:root {
  --navy: #071b38;
  --navy-2: #0c2d59;
  --blue: #1268e8;
  --blue-2: #2f82f6;
  --cyan: #08aeca;
  --violet: #7357e8;
  --green: #00a965;
  --ink: #0c203c;
  --muted: #63738a;
  --line: #dbe4ef;
  --paper: #f5f8fc;
  --white: #fff;
  --shadow: 0 1.2cqh 3.2cqh rgba(22, 43, 72, .12);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #020b18; }
body { font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif; color: var(--ink); }
button { font: inherit; color: inherit; }
button:focus-visible { outline: .18cqw solid #ffbf47; outline-offset: .16cqw; }

.deck {
  container-type: size;
  position: fixed;
  left: 50%; top: 50%;
  width: min(100vw, 177.7778vh);
  height: min(100vh, 56.25vw);
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 8cqw rgba(0,0,0,.55);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(2.5cqw);
  transition: opacity .28s ease, transform .32s ease, visibility 0s linear .32s;
  overflow: hidden;
}
.slide.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; z-index: 2; }

.eyebrow { margin: 0 0 1.1cqh; font-size: .78cqw; font-weight: 900; letter-spacing: .16em; color: var(--blue); }
.eyebrow.light { color: #6fd8ff; }
.slide h2 { margin: 0; font-size: 2.55cqw; line-height: 1.15; letter-spacing: -.055em; color: var(--ink); }
.lead { margin: 1.2cqh 0 0; font-size: 1.05cqw; line-height: 1.55; color: var(--muted); }

.brand-mark {
  display: inline-grid; place-items: center;
  width: 2.5cqw; height: 2.5cqw;
  border-radius: .68cqw;
  background: linear-gradient(145deg, #1787ff, #05b2cf);
  color: #fff; font-size: 1.35cqw; font-weight: 950;
  box-shadow: 0 .5cqh 1.5cqh rgba(0,124,255,.28);
}
.brand-mark.small { width: 2cqw; height: 2cqw; border-radius: .52cqw; font-size: 1.02cqw; }

/* Cover */
.cover { background: radial-gradient(circle at 78% 34%, #15487e 0, #09284f 26%, var(--navy) 61%); color: #fff; }
.cover-grid { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(100,181,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(100,181,255,.16) 1px, transparent 1px); background-size: 4.5cqw 4.5cqw; mask-image: linear-gradient(90deg, #000, transparent 85%); }
.cover-brand { position: absolute; left: 5cqw; top: 6cqh; display: flex; align-items: center; gap: .8cqw; font-size: 1.05cqw; letter-spacing: -.02em; }
.cover-brand b, .closing-brand b, .nav-brand b { color: #53d6ff; }
.cover-copy { position: absolute; left: 5cqw; top: 21cqh; width: 52cqw; }
.cover h1 { margin: 0; font-size: 4.25cqw; line-height: 1.08; letter-spacing: -.065em; color: #fff; }
.cover h1 em { font-style: normal; color: #5bdbff; }
.cover-summary { width: 42cqw; margin: 2.2cqh 0 0; color: #c8d8ea; font-size: 1.08cqw; line-height: 1.62; }
.cover-actions, .closing-actions { display: flex; gap: .75cqw; margin-top: 3.3cqh; }
.primary-action, .ghost-action { border: 0; border-radius: .65cqw; padding: 1.25cqh 1.35cqw; font-size: .92cqw; font-weight: 850; cursor: pointer; transition: transform .18s, background .18s; }
.primary-action { color: #fff; background: linear-gradient(90deg, var(--blue), #00a9d4); box-shadow: 0 1cqh 2cqh rgba(0,108,232,.24); }
.ghost-action { color: #e7f2ff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); }
.primary-action:hover, .ghost-action:hover { transform: translateY(-.25cqh); }
.cover-orbit { position: absolute; right: 4.5cqw; top: 18cqh; width: 31cqw; height: 55cqh; }
.orbit { position: absolute; border: 1px solid rgba(95,210,255,.28); border-radius: 50%; }
.orbit span { position: absolute; display: grid; place-items: center; width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: #0e3b70; border: 1px solid #2d7bbc; color: #d7efff; font-weight: 850; font-size: .82cqw; box-shadow: 0 .8cqh 2cqh rgba(0,0,0,.2); }
.orbit-a { inset: 1cqh 1cqw; }.orbit-a span { left: 1.2cqw; top: 6cqh; }
.orbit-b { inset: 6cqh 4cqw; }.orbit-b span { right: -.4cqw; top: 7cqh; }
.orbit-c { inset: 11cqh 7cqw; }.orbit-c span { left: -.9cqw; bottom: 3cqh; }
.orbit-d { inset: 16cqh 10cqw; }.orbit-d span { right: -1.1cqw; bottom: 1cqh; }
.orbit-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%; background: linear-gradient(145deg,#1479f1,#05aebf); font-size: 1.3cqw; font-weight: 950; box-shadow: 0 0 0 1.1cqw rgba(50,162,255,.09), 0 2cqh 5cqh rgba(0,0,0,.3); }
.cover-footer { position: absolute; left: 5cqw; right: 5cqw; bottom: 5.2cqh; display: flex; justify-content: space-between; font-size: .78cqw; color: #8ea9c7; }

/* User value narrative */
.value-slide { background: linear-gradient(135deg,#f8fbff,#eef4fb); color: var(--ink); }
.value-slide.value-dark { background: radial-gradient(circle at 82% 18%,#174b80 0,#0a2d58 30%,#071b38 72%); color: #fff; }
.value-slide.value-blue { background: linear-gradient(135deg,#0b3d80,#0872d2 58%,#00a6c8); color: #fff; }
.value-slide.value-teal { background: linear-gradient(135deg,#07334e,#075c6c 58%,#058d7f); color: #fff; }
.value-shell { position: absolute; inset: 0; padding: 6cqh 6cqw; }
.value-top { display: flex; align-items: center; justify-content: space-between; }
.value-brand { display: flex; align-items: center; gap: .65cqw; font-size: .88cqw; font-weight: 800; }
.value-top button { border: 1px solid #d6e0eb; border-radius: .5cqw; padding: .72cqh .75cqw; background: rgba(255,255,255,.75); color: #496078; font-size: .65cqw; font-weight: 850; cursor: pointer; }
.value-dark .value-top button,.value-blue .value-top button,.value-teal .value-top button { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #e5f1ff; }
.value-slide .eyebrow { margin-top: 7cqh; }
.value-slide h2 { max-width: 77cqw; font-size: 3.05cqw; line-height: 1.18; }
.value-slide h2 em { font-style: normal; color: var(--blue); }
.value-dark h2,.value-blue h2,.value-teal h2 { color: #fff; }
.value-dark h2 em,.value-blue h2 em,.value-teal h2 em { color: #61dfff; }
.value-bottom { position: absolute; left: 6cqw; right: 6cqw; bottom: 5.2cqh; min-height: 6.4cqh; display: flex; align-items: center; justify-content: space-between; padding-top: 1.6cqh; border-top: 1px solid #cfdae7; }
.value-bottom strong { max-width: 65cqw; font-size: .78cqw; line-height: 1.5; color: #4d637c; }
.value-bottom button { border: 0; background: transparent; color: var(--blue); font-size: .75cqw; font-weight: 900; cursor: pointer; }
.value-dark .value-bottom,.value-blue .value-bottom,.value-teal .value-bottom { border-color: rgba(255,255,255,.2); }
.value-dark .value-bottom strong,.value-blue .value-bottom strong,.value-teal .value-bottom strong { color: #d7e6f5; }
.value-dark .value-bottom button,.value-blue .value-bottom button,.value-teal .value-bottom button { color: #60ddff; }

.loss-stream { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: .65cqw; margin-top: 8cqh; }
.loss-stream div { min-height: 23cqh; padding: 2.2cqh 1.05cqw; border-top: .35cqh solid #4dd9ff; background: rgba(255,255,255,.08); }
.loss-stream i { width: 1.6cqw; height: .16cqh; background: repeating-linear-gradient(90deg,#6b87a5 0,#6b87a5 .35cqw,transparent .35cqw,transparent .65cqw); }
.loss-stream span { color: #58d9ff; font-size: .65cqw; font-weight: 900; }.loss-stream b { display: block; margin-top: 1.3cqh; font-size: 1.05cqw; }.loss-stream small { display: block; margin-top: 1.3cqh; color: #b8cce1; font-size: .68cqw; line-height: 1.55; }

.platform-flow { position: relative; height: 37cqh; margin-top: 4.2cqh; }
.platform-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 24cqw; min-height: 14cqh; padding: 2.3cqh 1.4cqw; text-align: center; border-radius: 1cqw; background: linear-gradient(135deg,#0d68de,#05a7c5); color: #fff; box-shadow: 0 1.4cqh 3.5cqh rgba(18,104,232,.22); }
.platform-core span { font-size: .65cqw; color: #bdeaff; font-weight: 850; }.platform-core b { display: block; margin-top: .8cqh; font-size: 1.2cqw; }.platform-core small { display: block; margin-top: .8cqh; font-size: .62cqw; color: #d9f3ff; }
.platform-stage { position: absolute; width: 16.5cqw; min-height: 12cqh; padding: 1.8cqh 1cqw; border: 1px solid #d6e1ed; border-radius: .8cqw; background: #fff; box-shadow: 0 .8cqh 2.2cqh rgba(26,52,84,.08); }
.platform-stage::after { content: ""; position: absolute; height: 1px; background: #b7c9dc; }
.platform-stage span { font-size: .57cqw; color: var(--blue); font-weight: 900; letter-spacing: .12em; }.platform-stage b { display: block; margin-top: .7cqh; font-size: .95cqw; }.platform-stage small { display: block; margin-top: .55cqh; font-size: .6cqw; color: var(--muted); }
.platform-stage.s1 { left: 0; top: 0; }.platform-stage.s1::after { left: 100%; top: 70%; width: 13cqw; transform: rotate(11deg); transform-origin: left; }
.platform-stage.s2 { right: 0; top: 0; }.platform-stage.s2::after { right: 100%; top: 70%; width: 13cqw; transform: rotate(-11deg); transform-origin: right; }
.platform-stage.s3 { left: 0; bottom: 0; }.platform-stage.s3::after { left: 100%; bottom: 70%; width: 13cqw; transform: rotate(-11deg); transform-origin: left; }
.platform-stage.s4 { right: 0; bottom: 0; }.platform-stage.s4::after { right: 100%; bottom: 70%; width: 13cqw; transform: rotate(11deg); transform-origin: right; }

.before-after { display: grid; grid-template-columns: 1fr 4cqw 1fr; align-items: center; gap: 1.1cqw; margin-top: 5.2cqh; }
.before-after section { min-height: 31cqh; padding: 2.5cqh 1.5cqw; border-radius: 1cqw; }
.before-after .before { background: rgba(4,27,63,.32); border: 1px solid rgba(255,255,255,.17); }.before-after .after { background: #fff; color: var(--ink); box-shadow: 0 1.2cqh 3cqh rgba(0,40,90,.18); }
.before-after section>span { font-size: .62cqw; font-weight: 900; letter-spacing: .1em; color: #8fdfff; }.before-after .after>span { color: var(--blue); }
.before-after h3 { margin: 1cqh 0 0; font-size: 1.35cqw; }.before-after p { margin: 1.4cqh 0 0; max-width: 32cqw; font-size: .78cqw; line-height: 1.6; color: #d5e6f7; }.before-after .after p { color: #52677f; }
.change-arrow { text-align: center; font-size: 2cqw; color: #8be8ff; }
.timing-line { position: relative; display: flex; justify-content: flex-end; gap: 7cqw; margin-top: 5cqh; padding-top: 2cqh; border-top: .25cqh solid rgba(255,255,255,.38); }.timing-line.long { justify-content: space-between; gap: 0; border-color: #7dc6ff; }.timing-line i { position: absolute; left: 0; top: -.25cqh; width: 70%; height: .25cqh; background: #ffb547; }.timing-line.long i { width: 100%; background: linear-gradient(90deg,#00c389,#1376eb); }.timing-line b { font-size: .58cqw; color: #d5e6f7; }.timing-line.long b { color: #536b84; }
.value-outcomes { display: flex; gap: .8cqw; margin-top: 2.2cqh; }.value-outcomes b { padding: .9cqh .8cqw; border-radius: 2cqw; background: rgba(255,255,255,.12); color: #fff; font-size: .68cqw; }

.decision-value { display: grid; grid-template-columns: 25cqw 11cqw 1fr; gap: 1.2cqw; align-items: center; margin-top: 5.3cqh; }
.evidence-stack { display: grid; grid-template-columns: 1fr 1fr; gap: .7cqw; }.evidence-stack div { min-height: 11cqh; padding: 1.4cqh .8cqw; border-left: .25cqw solid var(--violet); background: #fff; box-shadow: 0 .6cqh 1.7cqh rgba(30,52,80,.07); }.evidence-stack span { color: var(--violet); font-size: .6cqw; font-weight: 900; }.evidence-stack b { display: block; margin-top: .8cqh; font-size: .75cqw; line-height: 1.35; }
.decision-bridge { display: flex; flex-direction: column; align-items: center; gap: 1.2cqh; text-align: center; color: #526b84; font-size: .72cqw; line-height: 1.5; }.decision-bridge i { width: 100%; height: .18cqh; background: linear-gradient(90deg,transparent,var(--violet),transparent); }
.focus-result { min-height: 25cqh; padding: 3cqh 1.7cqw; border-radius: 1cqw; background: linear-gradient(135deg,#5d49d9,#7357e8); color: #fff; box-shadow: 0 1.2cqh 3cqh rgba(91,72,215,.2); }.focus-result>span { font-size: .62cqw; font-weight: 900; color: #d9d2ff; letter-spacing: .12em; }.focus-result h3 { margin: 1cqh 0 0; font-size: 1.45cqw; }.focus-result p { margin: 1.3cqh 0 0; font-size: .75cqw; line-height: 1.55; color: #edeaff; }.focus-result b { display: block; margin-top: 2cqh; padding-top: 1.5cqh; border-top: 1px solid rgba(255,255,255,.25); font-size: .7cqw; }

.team-thread { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: .7cqw; margin-top: 6cqh; }.team-thread i { color: #83ecdf; font-style: normal; font-size: 1.5cqw; }.team-role { min-height: 23cqh; padding: 2.2cqh 1.05cqw; border-radius: .85cqw; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }.team-role span { font-size: .62cqw; color: #84eadf; font-weight: 900; }.team-role b { display: block; margin-top: 1.2cqh; font-size: 1cqw; }.team-role small { display: block; margin-top: 1.3cqh; font-size: .65cqw; line-height: 1.5; color: #c8e5e6; }
.team-foundation { display: flex; align-items: center; gap: .55cqw; margin-top: 2.2cqh; padding: 1.4cqh 1cqw; border-radius: .7cqw; background: rgba(0,20,36,.28); }.team-foundation span { padding: .65cqh .65cqw; border-radius: 2cqw; background: rgba(255,255,255,.11); color: #d9f7f4; font-size: .62cqw; font-weight: 850; }.team-foundation strong { margin-left: auto; font-size: .68cqw; color: #86eddf; }

.execution-road { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: .55cqw; margin-top: 6cqh; }.execution-road>div { min-height: 19cqh; padding: 2cqh .9cqw; border-top: .35cqh solid var(--green); background: #fff; box-shadow: 0 .7cqh 2cqh rgba(30,54,85,.07); }.execution-road>i { width: 1.3cqw; height: .18cqh; background: #a8bbcd; }.execution-road span { color: var(--green); font-size: .6cqw; font-weight: 900; }.execution-road b { display: block; margin-top: 1.1cqh; font-size: .9cqw; }.execution-road small { display: block; margin-top: 1.1cqh; color: #657a91; font-size: .6cqw; line-height: 1.45; }
.execution-result { display: grid; grid-template-columns: 9cqw 1fr auto auto auto; align-items: center; gap: .7cqw; margin-top: 3cqh; padding: 1.6cqh 1cqw; border-left: .3cqw solid var(--green); background: #e8f7f0; }.execution-result strong { color: #008652; font-size: .72cqw; }.execution-result p { margin: 0; font-size: .7cqw; color: #466078; }.execution-result span { padding: .65cqh .62cqw; border-radius: 2cqw; background: #fff; color: #008652; font-size: .58cqw; font-weight: 850; }

.asset-loop { position: relative; width: 58cqw; height: 35cqh; margin: 4cqh auto 0; }.asset-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%; background: linear-gradient(135deg,#1475ee,#05afbd); text-align: center; box-shadow: 0 0 0 1.8cqw rgba(72,202,255,.08); }.asset-center span { font-size: .78cqw; line-height: 1.45; font-weight: 900; }.asset-item { position: absolute; width: 14cqw; min-height: 9cqh; padding: 1.2cqh .8cqw; border: 1px solid rgba(96,210,255,.3); border-radius: .7cqw; background: rgba(255,255,255,.08); }.asset-item::after { content: ""; position: absolute; height: 1px; background: rgba(91,216,255,.35); }.asset-item b { font-size: .72cqw; color: #64dcff; }.asset-item small { display: block; margin-top: .55cqh; font-size: .57cqw; line-height: 1.4; color: #bed1e5; }.asset-item.a1 { left: 0; top: 0; }.asset-item.a1::after { left: 100%; top: 70%; width: 11cqw; transform: rotate(17deg); transform-origin: left; }.asset-item.a2 { right: 0; top: 0; }.asset-item.a2::after { right: 100%; top: 70%; width: 11cqw; transform: rotate(-17deg); transform-origin: right; }.asset-item.a3 { left: 0; bottom: 0; }.asset-item.a3::after { left: 100%; bottom: 70%; width: 11cqw; transform: rotate(-17deg); transform-origin: left; }.asset-item.a4 { right: 0; bottom: 0; }.asset-item.a4::after { right: 100%; bottom: 70%; width: 11cqw; transform: rotate(17deg); transform-origin: right; }.asset-item.a5 { left: 50%; top: 0; transform: translateX(-50%); }.asset-item.a5::after { left: 50%; top: 100%; width: 1px; height: 8cqh; }
.asset-conclusion { display: flex; align-items: center; justify-content: center; gap: .65cqw; margin-top: 1.4cqh; color: #d4e4f3; }.asset-conclusion b { font-size: .68cqw; }.asset-conclusion span { color: #5edcff; }.asset-conclusion strong { margin-left: .4cqw; padding: .8cqh .8cqw; border-radius: .5cqw; background: rgba(88,218,255,.13); color: #62dcff; font-size: .72cqw; }
.value-bottom .value-cta { padding: .9cqh .9cqw; border-radius: .55cqw; background: linear-gradient(90deg,#1475ef,#05afbe); color: #fff; }

/* Shared app chrome */
.app-slide, .feature-slide { background: var(--paper); }
.content-shell { position: absolute; left: 21cqw; top: 13cqh; right: 5cqw; bottom: 6cqh; }
.content-shell.wide { right: 4.5cqw; }
.app-nav, .topbar, .nav-controls, .progress { opacity: 0; pointer-events: none; transition: opacity .2s; }
.deck.chrome-on .app-nav, .deck.chrome-on .topbar, .deck.chrome-on .nav-controls, .deck.chrome-on .progress { opacity: 1; pointer-events: auto; }
.deck.value-mode .nav-controls, .deck.value-mode .progress { opacity: 1; pointer-events: auto; }
.deck.value-mode .progress { left: 0; }
.app-nav { position: absolute; z-index: 20; left: 0; top: 0; bottom: 0; width: 18cqw; padding: 3.2cqh 1.4cqw 2.3cqh; background: #081f3f; color: #d7e4f3; box-shadow: .6cqw 0 2.5cqw rgba(12,30,55,.08); }
.nav-brand { display: flex; align-items: center; gap: .65cqw; padding: 0 .3cqw 2.4cqh; font-size: .96cqw; }
.nav-home, .nav-journey { width: 100%; border: 0; border-radius: .55cqw; background: rgba(255,255,255,.07); color: #e9f2fc; padding: 1.15cqh .8cqw; text-align: left; font-weight: 800; font-size: .78cqw; cursor: pointer; }
.nav-journey { position: absolute; left: 1.4cqw; right: 1.4cqw; bottom: 2.4cqh; width: auto; display: flex; justify-content: space-between; color: #7edcff; }
.nav-groups { margin-top: 1.6cqh; }
.nav-group { margin-bottom: 1.25cqh; }
.nav-group h3 { margin: 0 0 .45cqh; padding: 0 .6cqw; color: #6f8baa; font-size: .62cqw; letter-spacing: .12em; }
.nav-item { position: relative; width: 100%; border: 0; background: transparent; color: #bdcde0; border-radius: .48cqw; padding: .72cqh .7cqw .72cqh 1.35cqw; text-align: left; font-size: .72cqw; font-weight: 720; cursor: pointer; white-space: nowrap; }
.nav-item::before { content: ""; position: absolute; left: .55cqw; top: 50%; width: .34cqw; height: .34cqw; border-radius: 50%; transform: translateY(-50%); background: #496886; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: linear-gradient(90deg,rgba(20,112,241,.34),rgba(17,157,214,.12)); color: #fff; }
.nav-item.active::before { background: #59d8ff; box-shadow: 0 0 0 .18cqw rgba(71,201,255,.14); }
.topbar { position: absolute; z-index: 19; left: 18cqw; top: 0; right: 0; height: 9cqh; padding: 0 3.2cqw; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); }
.crumb { font-size: .78cqw; color: var(--muted); font-weight: 780; }
.top-actions { display: flex; gap: .45cqw; }
.top-actions button, .mobile-menu { border: 1px solid var(--line); background: #fff; border-radius: .48cqw; padding: .75cqh .72cqw; color: #455b76; font-size: .69cqw; font-weight: 800; cursor: pointer; }
.mobile-menu { display: none; }
.nav-controls { position: absolute; z-index: 24; right: 2.2cqw; bottom: 2.2cqh; display: flex; align-items: center; gap: .55cqw; padding: .45cqh .52cqw; border-radius: 3cqw; background: rgba(7,27,56,.9); color: #fff; box-shadow: 0 .7cqh 2cqh rgba(0,0,0,.18); }
.nav-controls button { border: 0; width: 2.05cqw; height: 2.05cqw; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1cqw; cursor: pointer; }
.nav-controls span { font-size: .63cqw; color: #aabbd1; }.nav-controls b { color: #fff; }
.progress { position: absolute; z-index: 25; left: 18cqw; bottom: 0; height: .38cqh; width: 0; background: linear-gradient(90deg,var(--blue),var(--cyan)); transition: width .28s; }

/* Menu map */
.menu-map { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.15cqw; margin-top: 4cqh; }
.menu-column { min-height: 49cqh; padding: 2cqh 1cqw; border: 1px solid var(--line); border-radius: 1cqw; background: #fff; box-shadow: 0 .65cqh 2cqh rgba(30,54,85,.05); }
.menu-column:nth-child(1) { border-top: .55cqh solid var(--blue); }
.menu-column:nth-child(2) { border-top: .55cqh solid var(--cyan); }
.menu-column:nth-child(3) { border-top: .55cqh solid var(--violet); }
.menu-column:nth-child(4) { border-top: .55cqh solid var(--green); }
.menu-column-head { margin: 0 0 1.3cqh; padding: 0 .25cqw; }
.menu-column-head span { font-size: .64cqw; color: var(--muted); font-weight: 850; letter-spacing: .12em; }
.menu-column-head h3 { margin: .45cqh 0 0; font-size: 1.17cqw; color: var(--ink); }
.menu-card { width: 100%; min-height: 8cqh; margin-bottom: .75cqh; padding: 1.05cqh .72cqw; border: 1px solid #e1e8f1; border-radius: .65cqw; background: #f9fbfe; text-align: left; cursor: pointer; transition: transform .16s, box-shadow .16s, border-color .16s; }
.menu-card:hover { transform: translateY(-.3cqh); border-color: #99c8ff; box-shadow: 0 .75cqh 1.6cqh rgba(27,78,135,.1); }
.menu-card b { display: block; font-size: .82cqw; color: var(--ink); }
.menu-card small { display: block; margin-top: .4cqh; font-size: .62cqw; line-height: 1.35; color: var(--muted); }
.menu-hint { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: .5cqw; color: #7a889a; font-size: .66cqw; }
.menu-hint span { width: 1px; height: 1.8cqh; background: var(--line); margin: 0 .25cqw; }
kbd { display: inline-block; min-width: 1.65cqw; padding: .28cqh .35cqw; text-align: center; border: 1px solid #cfd9e6; border-bottom-width: .35cqh; border-radius: .3cqw; background: #fff; color: #344a66; font-weight: 850; }

/* Journey */
.journey-shell h2 { width: 61cqw; }
.journey-line { margin-top: 7cqh; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .7cqw; align-items: center; }
.journey-line i { font-style: normal; color: #a8b7c9; font-size: 1.45cqw; }
.journey-step { min-height: 25cqh; padding: 2.5cqh 1.2cqw; border: 1px solid var(--line); border-radius: .95cqw; background: #fff; text-align: left; cursor: pointer; box-shadow: 0 .7cqh 2cqh rgba(25,52,82,.06); transition: transform .18s, box-shadow .18s; }
.journey-step:hover { transform: translateY(-.55cqh); box-shadow: var(--shadow); }
.journey-step span { display: block; font-size: .68cqw; font-weight: 900; color: var(--blue); }
.journey-step b { display: block; margin-top: 1.3cqh; font-size: 1.55cqw; letter-spacing: -.04em; }
.journey-step small { display: block; margin-top: 1.2cqh; font-size: .7cqw; line-height: 1.45; color: var(--muted); }
.journey-step.cyan span { color: var(--cyan); }.journey-step.violet span { color: var(--violet); }.journey-step.green span { color: var(--green); }
.journey-message { margin-top: 5cqh; display: grid; grid-template-columns: 8cqw 1fr; align-items: center; padding: 2cqh 1.4cqw; border-left: .32cqw solid var(--blue); background: #eaf3ff; }
.journey-message strong { font-size: .82cqw; color: var(--blue); }.journey-message p { margin: 0; font-size: .9cqw; line-height: 1.5; color: #334b68; }
.text-link { margin-top: 3cqh; padding: 0; border: 0; background: none; color: var(--blue); font-size: .78cqw; font-weight: 850; cursor: pointer; }

/* Feature layout */
.feature-shell { position: absolute; left: 21cqw; right: 3.6cqw; top: 12.2cqh; bottom: 5.7cqh; }
.feature-head { display: grid; grid-template-columns: 1fr 26cqw; gap: 2cqw; align-items: end; }
.feature-head h2 { font-size: 2.18cqw; }
.feature-summary { margin: 0; padding-left: 1.4cqw; border-left: .26cqw solid var(--accent,var(--blue)); color: #4c6078; font-size: .86cqw; line-height: 1.55; }
.feature-body { display: grid; grid-template-columns: 22.5cqw 1fr; gap: 1.35cqw; height: 55cqh; margin-top: 3.1cqh; }
.explain-panel { display: flex; flex-direction: column; gap: 1.45cqh; }
.explain-block { padding: 1.45cqh 1cqw; background: #fff; border: 1px solid var(--line); border-radius: .76cqw; }
.explain-block h3 { margin: 0 0 .8cqh; font-size: .78cqw; color: var(--accent,var(--blue)); }
.explain-block p { margin: 0; font-size: .77cqw; line-height: 1.5; color: #455b75; }
.flow-list { margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.flow-list li { counter-increment: flow; position: relative; min-height: 4.8cqh; padding: .35cqh 0 .35cqh 2.4cqw; font-size: .72cqw; line-height: 1.42; color: #384f69; }
.flow-list li::before { content: counter(flow); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.65cqw; height: 1.65cqw; border-radius: 50%; background: color-mix(in srgb,var(--accent,var(--blue)) 13%,white); color: var(--accent,var(--blue)); font-size: .66cqw; font-weight: 900; }
.screen-panel { position: relative; overflow: hidden; padding: 1.1cqw; border-radius: .95cqw; background: #fff; border: 1px solid #d5e0ed; box-shadow: 0 1.2cqh 3cqh rgba(26,54,88,.1); }
.screen-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.2cqh; border-bottom: 1px solid #e3e9f1; }
.screen-title { display: flex; align-items: center; gap: .55cqw; font-size: .78cqw; font-weight: 900; }
.screen-title i { width: .55cqw; height: .55cqw; border-radius: 50%; background: var(--accent,var(--blue)); }
.sample-tag { padding: .4cqh .5cqw; border-radius: 2cqw; background: #edf3fa; color: #72839a; font-size: .55cqw; font-weight: 850; }
.mock-content { height: calc(100% - 4.2cqh); padding-top: 1.4cqh; }
.benefit-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: .7cqw; margin-top: 1.45cqh; }
.benefit { position: relative; padding: 1.12cqh .72cqw 1.12cqh 1.8cqw; background: color-mix(in srgb,var(--accent,var(--blue)) 6%,white); border-top: .28cqh solid var(--accent,var(--blue)); }
.benefit::before { content: "✓"; position: absolute; left: .6cqw; top: 1.05cqh; color: var(--accent,var(--blue)); font-weight: 950; }
.benefit b { display: block; font-size: .7cqw; }.benefit small { display: block; margin-top: .25cqh; color: var(--muted); font-size: .58cqw; line-height: 1.35; }
.feature-footer { position: absolute; left: 21cqw; right: 8cqw; bottom: 2.2cqh; display: flex; justify-content: space-between; color: #8996a7; font-size: .58cqw; }

/* Mock interface primitives */
.filter-row { display: grid; grid-template-columns: 1.2fr 1fr .7fr .7fr auto; gap: .55cqw; }
.field, .select, .mock-button { min-height: 4.5cqh; display: flex; align-items: center; padding: 0 .65cqw; border: 1px solid #dbe3ed; border-radius: .45cqw; background: #fff; color: #73839a; font-size: .61cqw; }
.mock-button { justify-content: center; min-width: 3.8cqw; color: #fff; border-color: var(--accent,var(--blue)); background: var(--accent,var(--blue)); font-weight: 850; }
.mock-table { margin-top: 1.2cqh; border: 1px solid #e0e7ef; border-radius: .55cqw; overflow: hidden; }
.mock-row { display: grid; grid-template-columns: 1.5fr .8fr .65fr .55fr; align-items: center; min-height: 5.6cqh; padding: 0 .7cqw; border-bottom: 1px solid #edf1f6; font-size: .6cqw; color: #4d6179; }
.mock-row:last-child { border-bottom: 0; }.mock-row.head { min-height: 4.3cqh; background: #f2f6fa; color: #78889c; font-weight: 850; }
.mock-row b { color: #1c3552; }.status { justify-self: start; padding: .4cqh .48cqw; border-radius: 2cqw; background: #e5f6ee; color: #008c54; font-weight: 850; }.status.blue { background: #e8f1ff; color: #1465d8; }.status.gray { background: #eef1f5; color: #66778b; }.status.orange { background: #fff1dd; color: #c27400; }
.stage-track { display: flex; align-items: center; justify-content: space-between; margin: 3cqh 1cqw; }
.stage-node { position: relative; flex: 1; text-align: center; font-size: .61cqw; color: #7a899b; }
.stage-node::before { content: ""; display: block; width: 1.45cqw; height: 1.45cqw; margin: 0 auto .8cqh; border-radius: 50%; border: .22cqw solid #cbd7e4; background: #fff; }
.stage-node::after { content: ""; position: absolute; left: 50%; top: .65cqw; width: 100%; height: .18cqh; background: #d6e0eb; z-index: -1; }
.stage-node:last-child::after { display: none; }.stage-node.done::before { background: var(--accent,var(--blue)); border-color: var(--accent,var(--blue)); box-shadow: inset 0 0 0 .28cqw #fff; }.stage-node.done { color: var(--accent,var(--blue)); font-weight: 850; }.stage-node.done::after { background: var(--accent,var(--blue)); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65cqw; }.detail-box { min-height: 9cqh; padding: 1.1cqh .7cqw; background: #f7f9fc; border-radius: .5cqw; }.detail-box span { display: block; font-size: .55cqw; color: #8593a5; }.detail-box b { display: block; margin-top: .7cqh; font-size: .7cqw; color: #263e5b; }
.card-list { display: grid; gap: .7cqh; }.list-card { display: grid; grid-template-columns: auto 1fr auto; gap: .65cqw; align-items: center; padding: 1.1cqh .75cqw; border: 1px solid #e0e7ef; border-radius: .5cqw; }.list-card .dot { width: .65cqw; height: .65cqw; border-radius: 50%; background: var(--accent,var(--blue)); }.list-card b { display: block; font-size: .66cqw; }.list-card small { display: block; margin-top: .25cqh; color: #7c8b9d; font-size: .55cqw; }.list-card time { color: #8796a7; font-size: .56cqw; }
.mini-columns { display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw; height: 100%; }.mini-column { padding: 1cqh .65cqw; border-radius: .55cqw; background: #f5f8fc; }.mini-column h4 { margin: 0 0 1cqh; font-size: .63cqw; color: #546a82; }.activity { padding: .8cqh 0; border-bottom: 1px solid #dde5ee; font-size: .59cqw; line-height: 1.4; color: #4c627a; }.activity b { color: #1d3857; }
.metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .7cqw; }.metric { padding: 1.25cqh .7cqw; background: #f4f8fc; border-radius: .5cqw; }.metric span { font-size: .55cqw; color: #7a899c; }.metric b { display: block; margin-top: .6cqh; font-size: 1.1cqw; color: #183755; }
.chart-area { display: flex; align-items: end; gap: .58cqw; height: 20cqh; margin-top: 2cqh; padding: 0 .7cqw 1cqh; border-bottom: 1px solid #cfd9e6; }.bar { flex: 1; height: var(--h); min-height: 2cqh; border-radius: .35cqw .35cqw 0 0; background: linear-gradient(180deg,var(--accent,var(--blue)),color-mix(in srgb,var(--accent,var(--blue)) 55%,white)); }.bar-labels { display: grid; grid-template-columns: repeat(6,1fr); gap: .58cqw; padding: .7cqh .7cqw 0; color: #7c8c9f; font-size: .52cqw; text-align: center; }
.score-list { display: grid; gap: 1cqh; margin-top: 1.2cqh; }.score-line { display: grid; grid-template-columns: 6.5cqw 1fr 2.4cqw; gap: .65cqw; align-items: center; font-size: .6cqw; }.score-line b { color: #35506e; }.score-track { height: .75cqh; background: #e7edf4; border-radius: 2cqw; overflow: hidden; }.score-track i { display: block; width: var(--w); height: 100%; background: var(--accent,var(--blue)); border-radius: inherit; }.score-line span { text-align: right; color: var(--accent,var(--blue)); font-weight: 900; }
.decision { display: grid; grid-template-columns: 9cqw 1fr; gap: 1cqw; align-items: center; height: 100%; }.decision-ring { position: relative; width: 8cqw; height: 8cqw; border-radius: 50%; background: conic-gradient(var(--accent,var(--violet)) 0 78%,#e7edf4 78%); display: grid; place-items: center; }.decision-ring::after { content: ""; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: #fff; }.decision-ring b { position: absolute; z-index: 1; font-size: 1.2cqw; color: var(--accent,var(--violet)); }.decision-copy h4 { margin: 0; font-size: .75cqw; }.decision-copy p { margin: .8cqh 0 0; color: #67798f; font-size: .61cqw; line-height: 1.5; }
.pipeline { display: grid; grid-template-columns: repeat(5,1fr); gap: .55cqw; height: 100%; }.pipe-col { padding: .8cqh .48cqw; border-radius: .48cqw; background: #f3f6fa; }.pipe-col h4 { margin: 0 0 .8cqh; font-size: .55cqw; color: #60758c; }.pipe-card { margin-bottom: .65cqh; padding: .8cqh .5cqw; border-left: .2cqw solid var(--accent,var(--green)); background: #fff; box-shadow: 0 .35cqh 1cqh rgba(20,45,75,.07); font-size: .52cqw; line-height: 1.35; color: #425b75; }
.task-progress { display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw; height: 100%; }.task-panel { padding: 1cqh .65cqw; border-radius: .55cqw; background: #f5f8fc; }.task-panel h4 { margin: 0 0 .8cqh; font-size: .63cqw; }.task { display: grid; grid-template-columns: auto 1fr auto; gap: .5cqw; align-items: center; padding: .7cqh 0; border-bottom: 1px solid #dce5ef; font-size: .56cqw; }.check { width: .9cqw; height: .9cqw; display: grid; place-items: center; border-radius: .25cqw; background: #e1f6ec; color: #00965a; font-weight: 950; }.task em { color: #8190a2; font-style: normal; }
.file-layout { display: grid; grid-template-columns: 12cqw 1fr; gap: .8cqw; height: 100%; }.folder-tree { padding: 1cqh .65cqw; border-radius: .55cqw; background: #f4f7fb; }.folder { padding: .75cqh .45cqw; border-radius: .35cqw; color: #4b6179; font-size: .58cqw; }.folder.active { background: #e4efff; color: #1463ce; font-weight: 850; }.file-table { border: 1px solid #e0e7ef; border-radius: .55cqw; overflow: hidden; }.file-row { display: grid; grid-template-columns: 1fr .65fr .45fr; min-height: 5.5cqh; padding: 0 .65cqw; align-items: center; border-bottom: 1px solid #edf1f5; font-size: .58cqw; color: #536a82; }.file-row.head { min-height: 4.2cqh; background: #f4f7fb; color: #7b8a9d; font-weight: 850; }

/* Notes and close */
.notes { position: absolute; z-index: 40; left: 20.3cqw; right: 8cqw; bottom: -22cqh; min-height: 15cqh; padding: 2cqh 1.4cqw; border-radius: .8cqw .8cqw 0 0; background: rgba(5,25,50,.96); color: #fff; box-shadow: 0 -1cqh 3cqh rgba(0,0,0,.25); transition: bottom .25s; }
.notes.open { bottom: 0; }.notes b { color: #66dcff; font-size: .72cqw; }.notes p { margin: .8cqh 0 0; font-size: .74cqw; line-height: 1.6; color: #d5e2ef; }
.closing { padding: 10cqh 7cqw; background: linear-gradient(135deg,#071b38,#0b3569 64%,#07584a); color: #fff; }
.closing::after { content: ""; position: absolute; right: -10cqw; top: -18cqh; width: 52cqw; height: 52cqw; border: 1px solid rgba(91,219,255,.2); border-radius: 50%; box-shadow: 0 0 0 6cqw rgba(70,196,255,.035),0 0 0 12cqw rgba(70,196,255,.025); }
.closing-brand { display: flex; align-items: center; gap: .7cqw; font-size: 1cqw; }
.closing .eyebrow { margin-top: 8cqh; }.closing h2 { margin-top: 1.4cqh; color: #fff; font-size: 3cqw; line-height: 1.25; }
.closing-values { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 1cqw; margin-top: 7cqh; width: 72cqw; }
.closing-values div { padding: 2.2cqh 1.15cqw; border-top: .35cqh solid #45d4ff; background: rgba(255,255,255,.08); }
.closing-values span { color: #55d7ff; font-size: .65cqw; font-weight: 900; }.closing-values b { display: block; margin-top: .9cqh; font-size: 1.1cqw; }.closing-values p { margin: .8cqh 0 0; font-size: .72cqw; line-height: 1.5; color: #c5d5e7; }
.light-border { border-color: rgba(255,255,255,.35); }.closing-footer { position: absolute; left: 7cqw; bottom: 5cqh; color: #88a5c3; font-size: .72cqw; }.closing-footer span { margin: 0 .4cqw; }
.rotate-hint { display: none; position: fixed; z-index: 99; inset: auto 8vw 6vh; padding: 1.3vh 2vw; border-radius: 1vw; background: rgba(6,27,56,.94); color: #fff; text-align: center; font-size: 3vw; }

@media (max-aspect-ratio: 1/1) {
  .rotate-hint { display: block; }
}

@media (max-width: 900px) {
  .app-nav { transform: translateX(-100%); transition: transform .22s; width: 28cqw; }
  .deck.nav-open .app-nav { transform: translateX(0); }
  .topbar { left: 0; }.progress { left: 0; }.mobile-menu { display: inline-block; }
  .content-shell, .feature-shell { left: 4.5cqw; }.feature-footer { left: 4.5cqw; }.notes { left: 4cqw; }
}

@media print {
  html,body { overflow: visible; background: #fff; }
  .deck { position: static; width: 100%; height: auto; transform: none; box-shadow: none; }
  .slide { position: relative; display: block; visibility: visible; opacity: 1; transform: none; width: 100%; aspect-ratio: 16/9; page-break-after: always; }
  .app-nav,.topbar,.nav-controls,.progress,.notes,.rotate-hint { display: none !important; }
  .content-shell,.feature-shell { left: 5cqw; }.feature-footer { left: 5cqw; }
}