*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.odidact-page { --bg: #ffffff; --panel: #ffffff; --panel-soft: #f7f9ff; --ink: #001d7d; --ink-strong: #07123f; --ink-soft: #53618c; --ink-muted: #7f8db5; --line: #dce5ff; --accent: #001dff; --accent-soft: #eef1ff; --accent-pink: #ff71b1; --success: #05b969; --rail: 186px; --sans: 'Roboto', 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif; --serif: 'Fraunces', 'Instrument Serif', 'Times New Roman', serif; font-family: var(--sans); color: var(--ink); background: radial-gradient(circle at 78% 6%, rgba(103, 102, 245, 0.11), transparent 28vw), linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
a { color: inherit; text-decoration: none; }
.odidact-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.odidact-glow { display: none; }
.showcase-main { position: relative; }
.section-panel { position: relative; padding: 48px 64px 48px var(--rail); }
.panel-hero { min-height: 100vh; }
.panel-paper { background: transparent; }
@media (min-width: 901px) {
  .showcase-main { display: flex; width: max-content; min-height: 100vh; }
  .section-panel { flex: 0 0 100vw; width: 100vw; height: 100vh; min-height: 100vh; overflow: hidden; padding: 72px 64px 58px var(--rail); }
  .panel-hero { flex-basis: 100vw; width: 100vw; min-height: 100vh; }
  .hero-shell { min-height: calc(100vh - 130px); grid-template-columns: minmax(480px, 560px) 1fr; }
  .odidact-challenge, .odidact-overview, .odidact-problem, .odidact-flow, .odidact-issues, .odidact-solution-system, .odidact-solutions, .odidact-key-screens, .odidact-ui, .odidact-system, .odidact-ending { padding-top: 72px; padding-bottom: 58px; }
}
.hero-shell { display: grid; grid-template-columns: minmax(480px, 560px) 1fr; align-items: center; gap: clamp(40px, 4vw, 80px); min-height: calc(100vh - 130px); }
.hero-copy > * { margin: 0; }
.odidact-hero { overflow: hidden; background: radial-gradient(circle at 76% 18%, rgba(103, 102, 245, 0.12), transparent 34vw), linear-gradient(135deg, #ffffff 0%, #fbfcff 52%, #f7f9ff 100%); }
.hero-copy { position: relative; z-index: 2; max-width: 560px; padding-top: 12px; }
.hero-title { color: #09246f; font-family: var(--sans); font-style: normal; font-size: clamp(60px, 5vw, 94px); line-height: 0.95; letter-spacing: 0; font-weight: 800; margin-bottom: 18px; }
.hero-tags { display: inline-flex; gap: 14px; flex-wrap: wrap; margin-bottom: 54px; }
.hero-tags span { padding: 14px 22px; border-radius: 13px; background: rgba(103, 102, 245, 0.08); color: #8e7bff; font-size: 14px; font-weight: 700; }
.hero-tags span:nth-child(3) { background: rgba(49, 196, 141, 0.1); color: #31c48d; }
.hero-visual { position: relative; isolation: isolate; z-index: 1; min-height: min(760px, calc(100vh - 150px)); width: 100%; }
.hero-device { position: absolute; margin: 0; overflow: hidden; background: #ffffff; border: 1px solid rgba(120, 142, 220, 0.16); box-shadow: 0 34px 90px rgba(9, 36, 111, 0.14); }
.hero-device img { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
.hero-device--desktop { right: clamp(230px, 14vw, 300px); top: 50%; z-index: 1; width: min(42vw, 800px); max-width: none; border-radius: 30px; transform: translateY(-50%); }
.hero-device--mobile { right: clamp(8px, 1.2vw, 24px); top: 51%; z-index: 2; height: min(70vh, 660px); max-height: 660px; border-radius: 28px; transform: translateY(-50%); }
.hero-device--mobile img { width: auto; height: 100%; }
.odidact-overview, .odidact-challenge, .odidact-problem, .odidact-flow, .odidact-issues, .odidact-solution-system, .odidact-solutions, .odidact-key-screens, .odidact-ui, .odidact-system, .odidact-ending { padding-top: 38px; padding-bottom: 38px; }
.overview-grid, .challenge-grid, .split-panels, .flow-strip, .issues-grid, .product-system-grid, .solutions-grid, .ui-grid, .system-grid, .odidact-ds-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 164px minmax(0, 1fr) 180px; gap: 18px; height: calc(100vh - 130px); min-height: 0; color: #07123f; font-family: "Roboto", var(--sans); }
.odidact-card { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.94); box-shadow: 0 22px 70px rgba(0, 0, 0, 0.06); }
@media (min-width: 901px) {
  .section-panel.odidact-challenge { padding-top: 90px; padding-bottom: 42px; }
}
.challenge-grid { display: grid; grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: clamp(38px, 4vw, 78px); height: calc(100vh - 132px); min-height: 0; overflow: visible; margin-top: 0; }
.challenge-copy { display: grid; grid-template-rows: auto auto auto minmax(0, auto); align-content: center; gap: clamp(18px, 2.2vh, 28px); min-width: 0; padding-bottom: clamp(8px, 1.5vh, 18px); }
.challenge-copy h2 { max-width: 690px; margin: 0; color: #09246f; font-size: clamp(44px, 3.8vw, 68px); line-height: 1.02; letter-spacing: -0.01em; }
.challenge-copy h2 em { color: #ff2fa3; font-style: normal; }
.challenge-copy > p { max-width: 680px; margin: 0; color: #51618d; font-size: clamp(15px, 0.95vw, 18px); font-weight: 500; line-height: 1.5; }
.friction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin-top: clamp(4px, 0.8vh, 10px); }
.friction-card { display: grid; grid-template-rows: 44px minmax(44px, auto) 1fr; align-content: start; gap: 12px; min-height: 196px; height: 100%; padding: 24px 22px 22px; overflow: hidden; }
.friction-icon { position: relative; display: grid; width: 44px; height: 44px; place-items: center start; border-radius: 0; background: transparent; color: inherit; }
.friction-icon img { display: block; width: 34px; height: 34px; object-fit: contain; }
.friction-card strong { display: flex; align-items: center; min-height: 44px; color: #09246f; font-size: clamp(14px, 0.9vw, 17px); font-weight: 900; line-height: 1.2; text-wrap: balance; }
.friction-card p { margin: 0; color: #51618d; font-size: clamp(12px, 0.78vw, 13.5px); font-weight: 600; line-height: 1.45; }
@media (max-height: 820px) and (min-width: 1290px) {
  .section-panel.odidact-challenge { padding-top: 72px; padding-bottom: 36px; }
  .challenge-grid { height: calc(100vh - 108px); margin-top: 0; }
  .challenge-copy { gap: 14px; }
  .challenge-copy h2 { font-size: clamp(36px, 3vw, 54px); }
  .challenge-copy > p { font-size: 16px; line-height: 1.45; }
  .friction-card { min-height: 116px; padding: 18px 20px; }
  .friction-icon { width: 44px; height: 44px; }
}
.challenge-visual { margin: 0; padding: 0; overflow: visible; border-radius: 0; background: transparent; border: 0 !important; box-shadow: none !important; align-self: center; justify-self: stretch; height: auto; display: grid; place-items: center; align-content: center; }
.challenge-visual img { display: block; width: 100%; height: auto; max-height: min(580px, calc(100vh - 140px)); object-fit: contain; object-position: center; mix-blend-mode: multiply; filter: drop-shadow(0 28px 46px rgba(0, 29, 125, 0.08)); }
.info-card, .story-card { padding: 26px; min-height: 320px; }
.info-card p { margin: 22px 0 0; color: var(--ink-soft); font-size: 20px; line-height: 1.6; }
.key-screens-shell { display: grid; grid-template-columns: minmax(0, 0.28fr) minmax(0, 0.72fr); grid-template-rows: minmax(0, 1fr); gap: clamp(20px, 2.2vw, 44px); align-items: center; height: calc(100vh - 130px); min-height: 0; overflow: hidden; }
.key-screens-copy { display: grid; align-content: space-between; gap: 18px; min-width: 0; align-self: stretch; padding-bottom: clamp(8px, 1.5vh, 18px); }
.key-screens-copy h2 { max-width: 390px; margin: 0; color: #09246f; font-size: clamp(44px, 4vw, 72px); line-height: 1.02; letter-spacing: -0.04em; }
.key-screens-copy h2 em { color: #ff2fa3; font-style: normal; }
.key-screens-copy > p { max-width: 330px; margin: 0; color: #51618d; font-size: clamp(14px, 0.9vw, 17px); font-weight: 500; line-height: 1.5; }
.key-screens-copy > p + p { padding-top: 14px; border-top: 1px solid rgba(9, 36, 111, 0.12); }
.screen-benefits { display: grid; gap: 14px; margin-top: 4px; }
.screen-benefits article { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; }
.screen-benefit-icon { position: relative; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: #f1e9ff; color: #8e63ff; }
.screen-benefit-icon::before, .screen-benefit-icon::after { content: ""; position: absolute; }
.screen-benefits strong { display: block; color: #09246f; font-size: 14px; font-weight: 900; line-height: 1.2; }
.screen-benefits p { margin: 4px 0 0; color: #51618d; font-size: 12px; font-weight: 550; line-height: 1.45; }
.key-screens-collage { position: relative; height: min(710px, calc(100vh - 138px)); min-height: 0; overflow: hidden; }
.key-shot { position: absolute; margin: 0; overflow: visible; border-radius: 16px; background: transparent; box-shadow: none; }
.key-shot img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 16px; filter: drop-shadow(0 22px 55px rgba(9, 36, 111, 0.1)); }
.key-shot figcaption { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: #51618d; font-size: 12px; font-weight: 650; }
.key-shot figcaption b { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #dcd8ff; color: #6766f5; font-size: 10px; }
.key-shot--dashboard { left: 1%; top: 6%; z-index: 3; width: 53%; height: 52%; transform: rotate(-3deg); }
.key-shot--hero { right: 0; top: 7%; z-index: 2; width: 42%; height: 35%; }
.key-shot--live { left: 0; bottom: 8%; width: 34%; height: 27%; }
.key-shot--community { left: 35%; bottom: 6%; width: 33%; height: 32%; }
.key-shot--footer { right: 0; bottom: 8%; width: 35%; height: 26%; }
.solution-screen { border: 1px solid rgba(103,102,245,0.14); border-radius: 8px; background: #fcfcff; min-height: 210px; overflow: hidden; padding: 16px; }
.ui-shot { min-height: 360px; padding: 18px; position: relative; overflow: hidden; }
.ui-shot::before { content: ""; position: absolute; inset: 18px 18px 56px; border: 1px solid rgba(103,102,245,0.14); border-radius: 8px; background: linear-gradient(180deg, #ffffff, #f8f9ff 70%), #ffffff; }
.ui-shot::after { content: ""; position: absolute; inset: 34px 34px 84px; background: linear-gradient(180deg, rgba(103,102,245,0.16), transparent 16%), linear-gradient(180deg, transparent 0 20%, #eef0fb 20% 28%, transparent 28% 42%, #eef0fb 42% 50%, transparent 50% 64%, #eef0fb 64% 72%, transparent 72%); }
.ui-shot span { position: absolute; left: 18px; bottom: 18px; font-size: 15px; font-weight: 600; }
.system-panel, .outro-panel, .ending-card { min-height: 280px; padding: 24px; }
.system-panel strong, .outro-panel strong { display: block; margin-bottom: 18px; font-size: 18px; }
.odidact-ending { display: flex; flex-direction: column; justify-content: space-between; }
.next-copy { margin: 30px 0 10px; max-width: 760px; }
.next-copy span { display: block; margin-bottom: 18px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.next-copy h2 { margin: 0; font-family: var(--sans); font-style: normal; font-size: clamp(56px, 6.5vw, 120px); line-height: 0.9; letter-spacing: -0.04em; font-weight: 900; }
.next-copy p { margin: 18px 0 0; color: var(--ink-soft); font-size: 19px; }
.next-copy a { display: inline-flex; margin-top: 28px; padding: 14px 18px; border-radius: 8px; background: var(--accent); color: #ffffff; font-weight: 700; }
/* Odidact unified visual skin */
.section-panel.panel-paper, .odidact-hero { background: radial-gradient(circle at 78% 6%, rgba(205, 212, 255, 0.58), transparent 30vw), radial-gradient(circle at 16% 88%, rgba(238, 241, 255, 0.72), transparent 28vw), linear-gradient(135deg, #ffffff 0%, #fbfcff 52%, #f7f9ff 100%); color: var(--ink); font-family: var(--sans); }
.odidact-card, .odidact-ds-card, .challenge-issue, .journey-result, .product-system-card, .key-shot, .system-result, .ending-card, .next-project-card { border-color: var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 48px rgba(0, 29, 125, 0.08); }
.hero-title, .challenge-copy h2, .journey-heading h2, .system-showcase__heading h2, .key-screens-copy h2, .next-copy h2 { color: var(--ink); font-family: var(--sans); font-weight: 900; letter-spacing: 0; }
.challenge-copy h2 em, .system-showcase__heading h2 em, .key-screens-copy h2 em, .system-result em { color: var(--accent-pink); font-style: normal; }
.hero-kicker, .hero-description, .challenge-copy > p, .journey-heading p, .system-showcase__heading p, .key-screens-copy > p, .screen-benefits p, .next-copy p, .ending-card p { color: var(--ink-muted); font-family: var(--sans); letter-spacing: 0; }
.hero-tags span, .chip-row b, .tag-row b, .benefit-pill { color: var(--accent); background: rgba(0, 29, 255, 0.07); }
.hero-tags span:nth-child(3), .benefit-pill, .system-ui--money p { color: var(--success); background: rgba(5, 185, 105, 0.1); }
.hero-meta-grid, .key-screens-copy > p + p, .system-ui, .product-system-card, .odidact-ds-card, .odidact-type-table > div, .odidact-token-grid span, .odidact-spacing-card, .odidact-list-card { border-color: var(--line); }
.hero-meta-grid span, .hero-meta-grid strong, .challenge-issue h3, .challenge-issue strong, .journey-step h3, .product-system-card h3, .system-card-content h3, .screen-benefits strong, .odidact-ds-card h3, .odidact-ds-card h4, .ending-card strong, .next-copy a { color: var(--ink); font-family: var(--sans); }
.system-card-icon, .screen-benefit-icon, .product-system-icon, .system-result__spark { color: var(--accent); background: var(--accent-soft); }
.button-pair button:first-child, .system-ui button, .next-copy a { background: var(--ink); color: #ffffff; }
.challenge-visual.odidact-card { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.next-copy h2, .overview-copy p { font-family: var(--sans); font-style: normal; }
.reveal-block, .reveal-stagger > *, .hero-copy > *, .hero-visual { will-change: transform, opacity; }
@media (max-width: 1280px) {
  .hero-shell, .overview-grid, .challenge-grid, .split-panels, .flow-strip, .issues-grid, .solutions-grid, .ui-grid, .system-grid, .ending-grid { grid-template-columns: 1fr; }
  .challenge-grid { width: min(900px, calc(100vw - var(--rail) - 64px)); height: auto; min-height: 0; grid-template-rows: none; }
  .challenge-copy, .challenge-visual, .friction-grid { grid-column: 1; grid-row: auto; }
  .friction-grid { grid-template-columns: 1fr; }
  .friction-card { grid-template-columns: 48px minmax(160px, 0.32fr) minmax(0, 1fr); }
  .key-screens-shell { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .key-screens-collage { height: 900px; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  .section-panel.odidact-challenge { padding-top: 72px; padding-bottom: 48px; }
  .section-panel.odidact-challenge .challenge-grid { grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: 34px; width: auto; height: calc(100vh - 120px); }
  .section-panel.odidact-challenge .challenge-copy, .section-panel.odidact-challenge .challenge-visual { grid-column: auto; grid-row: auto; }
  .section-panel.odidact-challenge .friction-grid { grid-column: auto; grid-row: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section-panel.odidact-challenge .friction-card { grid-template-columns: none; grid-template-rows: 40px minmax(42px, auto) 1fr; min-height: 184px; padding: 20px 18px; }
  .section-panel.odidact-challenge .friction-card strong { min-height: 42px; }
}
@media (max-width: 900px) {
  body.odidact-page { --rail: 0px; }
  .section-panel { padding: 80px 24px 24px; }
  .hero-shell { gap: 26px; }
  .friction-card { grid-template-columns: 1fr; gap: 12px; min-height: 0; }
  .friction-icon { width: 40px; height: 40px; }
}
.section-panel.odidact-challenge .friction-grid { display: flex; align-items: stretch; gap: 14px; }
.section-panel.odidact-challenge .friction-card { flex: 1 1 0; margin: 0 !important; align-self: stretch; transform: none !important; }
@media (min-width: 901px) and (max-width: 1280px) {
  .section-panel.odidact-challenge .friction-grid { flex-direction: row; gap: 12px; }
}
@media (max-width: 900px) {
  .section-panel.odidact-challenge .friction-grid { flex-direction: column; }
}
/* Step 1 layout cleanup: active Odidact sections only. Older section styles above are left in place because their HTML is not active. */
.odidact-page .hero-shell { grid-template-columns: minmax(430px, 0.42fr) minmax(0, 0.58fr); gap: clamp(34px, 3.4vw, 68px); }
.odidact-page .hero-copy { display: grid; align-content: center; max-width: 620px; padding-top: 0; }
.odidact-page .hero-title { font-size: clamp(76px, 6.4vw, 118px); line-height: 0.9; margin-bottom: clamp(18px, 2vh, 24px); }
.odidact-page .hero-tags { gap: 10px; margin-bottom: clamp(22px, 2.8vh, 34px); }
.odidact-page .hero-tags span { padding: 10px 14px; border-radius: 999px; font-size: 12px; }
.odidact-page .hero-visual { min-height: min(720px, calc(100vh - 148px)); }
.odidact-page .hero-device--desktop { right: clamp(150px, 10vw, 230px); width: min(47vw, 820px); border-radius: 22px; }
.odidact-page .hero-device--mobile { right: clamp(0px, 0.8vw, 16px); height: min(64vh, 610px); border-radius: 24px; }
.odidact-page .key-screens-shell { grid-template-columns: minmax(290px, 0.25fr) minmax(0, 0.75fr); gap: clamp(24px, 2.6vw, 52px); overflow: visible; }
.odidact-page .key-screens-copy { align-content: center; gap: clamp(16px, 2vh, 24px); }
.odidact-page .key-screens-copy h2 { max-width: 430px; font-size: clamp(42px, 3.7vw, 66px); line-height: 1; }
.odidact-page .key-screens-copy > p { max-width: 380px; font-size: clamp(14px, 0.86vw, 16px); }
.odidact-page .screen-benefits { gap: 12px; }
.odidact-page .key-screens-collage { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr); grid-template-rows: minmax(0, 1fr) minmax(0, 0.82fr); gap: clamp(14px, 1.25vw, 20px); height: min(700px, calc(100vh - 138px)); overflow: visible; }
.odidact-page .key-shot { position: relative; inset: auto; width: auto; height: auto; transform: none; overflow: visible; }
.odidact-page .key-shot img { object-fit: contain; filter: drop-shadow(0 18px 38px rgba(9, 36, 111, 0.1)); }
.odidact-page .key-shot--dashboard { grid-row: 1 / span 2; grid-column: 1; }
.odidact-page .key-shot--hero { grid-row: 1; grid-column: 2; }
.odidact-page .key-shot--live, .odidact-page .key-shot--community, .odidact-page .key-shot--footer { grid-row: 2; grid-column: 2; }
.odidact-page .key-shot--live { transform: translateY(-4%) scale(0.97); transform-origin: left top; }
.odidact-page .key-shot--community { transform: translate(24%, 5%) scale(0.78); transform-origin: center; }
.odidact-page .key-shot--footer { transform: translate(48%, 18%) scale(0.58); transform-origin: right bottom; }
.odidact-page .key-shot figcaption { font-size: 11px; }
.odidact-page .odidact-ending { justify-content: center; gap: clamp(38px, 5vh, 72px); }
.odidact-page .next-copy { max-width: 980px; margin: 0; }
.odidact-page .next-copy h2 { max-width: 980px; font-size: clamp(54px, 5.4vw, 104px); line-height: 0.92; }
.odidact-page .next-copy p { max-width: 560px; font-size: clamp(17px, 1.05vw, 20px); line-height: 1.55; }
@media (max-width: 1440px) and (min-width: 901px) {
  .odidact-page .hero-title { font-size: clamp(68px, 5.6vw, 96px); }
  .odidact-page .hero-device--desktop { width: min(45vw, 720px); }
  .odidact-page .hero-device--mobile { height: min(60vh, 560px); }
  .odidact-page .system-showcase__heading h2, .odidact-page .key-screens-copy h2 { font-size: clamp(36px, 3.2vw, 56px); }
  .odidact-page .key-screens-collage { height: min(650px, calc(100vh - 138px)); }
}
@media (max-width: 1280px) {
  .odidact-page .system-showcase__heading, .odidact-page .key-screens-shell { grid-template-columns: 1fr; }
  .odidact-page .hero-copy { max-width: 760px; }
  .odidact-page .hero-visual { min-height: 560px; }
  .odidact-page .hero-device--desktop { right: clamp(120px, 18vw, 220px); width: min(72vw, 760px); }
  .odidact-page .hero-device--mobile { height: min(56vh, 520px); }
  .odidact-page .key-screens-collage { height: 760px; }
}
@media (max-width: 900px) {
  .odidact-page .section-panel { overflow: visible; }
  .odidact-page .hero-shell { grid-template-columns: 1fr; min-height: auto; }
  .odidact-page .hero-title { font-size: clamp(58px, 19vw, 86px); }
  .odidact-page .hero-device--desktop { right: 74px; }
  .odidact-page .hero-device--mobile { right: 0; height: min(420px, 58vh); }
  .odidact-page .key-screens-collage { grid-template-columns: 1fr; grid-template-rows: none; }
  .odidact-page .key-shot, .odidact-page .key-shot--dashboard, .odidact-page .key-shot--hero, .odidact-page .key-shot--live, .odidact-page .key-shot--community, .odidact-page .key-shot--footer { grid-column: auto; grid-row: auto; transform: none; }
  .odidact-page .next-copy h2 { font-size: clamp(48px, 15vw, 72px); }
}
/* Odidact stability pass: soften horizontal joins and keep dense panels inside the viewport. */
@media (min-width: 901px) {
  .odidact-page .section-panel { isolation: isolate; }
  .odidact-page .section-panel::before, .odidact-page .section-panel::after { content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 0; }
  .odidact-page .section-panel::before { left: -1px; }
  .odidact-page .section-panel::after { right: -1px; }
  .odidact-page .section-panel > * { position: relative; z-index: 1; }
  .odidact-page .odidact-hero::after { background: linear-gradient(270deg, rgba(247, 249, 255, 0.82), rgba(247, 249, 255, 0)); }
  .odidact-page .key-screens-shell { overflow: visible; }
  .odidact-page .key-shot img { display: block; }
}
@media (max-height: 820px) and (min-width: 901px) {
  .odidact-page .key-screens-shell { height: calc(100vh - 96px); }
}
/* Odidact final layout correction: continuous horizontal canvas, fitted cards, direct screen imagery. */
@media (min-width: 901px) {
  .odidact-page .showcase-main { isolation: isolate; background: radial-gradient(circle at 10% 24%, rgba(0, 29, 255, 0.035), transparent 22vw), radial-gradient(circle at 37% 18%, rgba(255, 113, 177, 0.035), transparent 24vw), radial-gradient(circle at 66% 18%, rgba(0, 29, 255, 0.035), transparent 24vw), linear-gradient(90deg, #ffffff 0%, #fbfcff 13%, #f8faff 23%, #ffffff 35%, #fbfcff 50%, #f7f9ff 65%, #ffffff 82%, #f8f9fb 100%); }
  .odidact-page .showcase-main::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.62) 11%, rgba(247, 249, 255, 0.4) 18%, rgba(255, 255, 255, 0.66) 30%, rgba(255, 255, 255, 0.3) 44%, rgba(247, 249, 255, 0.46) 58%, rgba(255, 255, 255, 0.58) 72%, rgba(255, 255, 255, 0) 100%); }
  .odidact-page .section-panel { z-index: 1; }
  .odidact-page .section-panel::before, .odidact-page .section-panel::after { width: clamp(88px, 7vw, 150px); opacity: 0.62; }
  .odidact-page .section-panel::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)); }
  .odidact-page .section-panel::after { background: linear-gradient(270deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)); }
  .odidact-page .odidact-hero { background: transparent !important; }
  .odidact-page .key-screens-copy { gap: 12px; }
  .odidact-page .key-screens-copy > p { max-width: 340px; font-size: clamp(12px, 0.72vw, 14px); line-height: 1.42; }
  .odidact-page .screen-benefits { gap: 8px; }
  .odidact-page .screen-benefits article { padding: 9px 10px; gap: 8px; }
  .odidact-page .screen-benefits p { font-size: 10.5px; line-height: 1.28; }
  .odidact-page .key-screens-collage { overflow: visible; }
}
/* Odidact sections 04-06 repair: stronger boards, larger screens, fitted design-system panel. */
@media (min-width: 901px) {
  .odidact-page .odidact-key-screens { padding-top: 44px; padding-bottom: 34px; }
  .odidact-page .key-screens-copy h2 { max-width: 360px; }
  .odidact-page .key-screens-collage { align-items: stretch; }
  .odidact-page .key-shot { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; }
  .odidact-page .key-shot figcaption { margin-top: 6px; }
  .odidact-page .odidact-system { padding-top: 34px; padding-bottom: 30px; }
}
@media (max-height: 820px) and (min-width: 901px) {
  .odidact-page .key-screens-copy > p:nth-of-type(2), .odidact-page .screen-benefits { display: none; }
  .odidact-page .key-screens-collage { height: calc(100vh - 92px); }
}
/* Odidact sections 04-06 final correction: denser boards without oversized empty containers. */
@media (min-width: 901px) {
  .odidact-page .odidact-solution-system, .odidact-page .odidact-key-screens, .odidact-page .odidact-system { padding-top: 40px; padding-bottom: 34px; }
  .odidact-page .key-screens-shell { grid-template-columns: minmax(240px, 0.2fr) minmax(0, 0.8fr); height: calc(100vh - 74px); gap: clamp(18px, 1.8vw, 32px); }
  .odidact-page .key-screens-copy { align-content: center; }
  .odidact-page .key-screens-copy h2 { font-size: clamp(34px, 2.6vw, 48px); }
  .odidact-page .screen-benefit-icon::before, .odidact-page .screen-benefit-icon::after { content: none; }
  .odidact-page .screen-benefit-icon svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .odidact-page .key-shot img { max-width: 100%; max-height: 100%; }
}
@media (max-height: 820px) and (min-width: 901px) {
  .odidact-page .odidact-solution-system, .odidact-page .odidact-key-screens, .odidact-page .odidact-system { padding-top: 28px; padding-bottom: 24px; }
  .odidact-page .system-showcase, .odidact-page .key-screens-shell, .odidact-page .odidact-ds-shell { height: calc(100vh - 52px); }
  .odidact-page .screen-benefits { display: none; }
}
/* Odidact Section 04 reference rebuild. Scoped to Solution System only. */
/* Section 04 clipping fix: strict viewport math, no vertical overflow. */
/* Section 04 pixel-reference pass: compact board matching the provided target image. */
@media (min-width: 901px) {
  .odidact-page .odidact-solution::before, .odidact-page .odidact-solution::after { opacity: 0.22; }
}
/* Section 04 reference clone pass. Keep this last so older Odidact section styles cannot win. */
@media (min-width: 901px) {
  .odidact-page .odidact-solution { place-items: center; color: #07278a; }
  .odidact-page .odidact-solution::before, .odidact-page .odidact-solution::after { content: none; }
}
/* Section 04 hard rebuild. Exact normal-flow structure, fixed card height, no cropped grid. */
@media (min-width: 901px) {
  .odidact-page .odidact-solution { width: 100vw; min-height: 100vh; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; font-family: "Inter", "Outfit", var(--sans); }
  .odidact-page .odidact-solution::before, .odidact-page .odidact-solution::after { content: none !important; }
}
@media (min-width: 901px) and (max-width: 1520px), (min-width: 901px) and (max-height: 940px) {
  .odidact-page .odidact-solution { padding-top: 0 !important; }
}
/* Odidact User Journey standalone section adaptation. Namespaced to avoid cross-section bleed. */
.odidact-page .oj-journey-section { --oj-blue: #071b86; --oj-blue-deep: #00258c; --oj-blue-2: #1f4fff; --oj-step-blue: #5c7cff; --oj-step-pink: #ff4f9d; --oj-step-green: #45d58d; --oj-text: #31407d; --oj-text-soft: #6f7aa9; --oj-text-muted: #8f97bd; --oj-pink: #ff4f9d; --oj-green: #28c77d; --oj-green-soft: #dbf7ea; --oj-bg: #fbfcff; --oj-surface: rgba(255, 255, 255, 0.76); --oj-surface-chip: rgba(238, 242, 255, 0.78); --oj-line: rgba(125, 145, 230, 0.22); --oj-line-2: rgba(125, 145, 230, 0.3); --oj-shadow: 0 18px 45px rgba(20, 40, 120, 0.028); --oj-shadow-soft: 0 12px 28px rgba(16, 35, 120, 0.04); position: relative; width: 100vw; height: 100vh; overflow: hidden; display: grid; place-items: center; background: var(--oj-bg) !important; color: var(--oj-blue); font-family: "Inter", Arial, sans-serif; text-rendering: geometricPrecision; }
.odidact-page .oj-hero { position: absolute; left: 118px; top: 126px; width: 1080px; }
.odidact-page .oj-hero h2 { margin: 0 0 18px; color: var(--oj-blue); font-size: 64px; line-height: .98; letter-spacing: -.055em; font-weight: 700; }
.odidact-page .oj-hero h2 span { color: var(--oj-pink); }
.odidact-page .oj-hero p { margin: 0; width: 740px; color: #6d79ab; font-size: 18px; line-height: 1.45; font-weight: 600; }
.odidact-page .oj-journey-board { position: absolute; left: 116px; top: 338px; width: 1562px; height: 540px; border: 1.35px solid var(--oj-line); border-radius: 30px; background: var(--oj-surface); backdrop-filter: blur(8px); box-shadow: var(--oj-shadow); }
.odidact-page .oj-path-line { position: absolute; left: 154px; top: 82px; width: 1252px; height: 86px; pointer-events: none; opacity: .82; }
.odidact-page .oj-step { position: relative; text-align: center; padding-top: 0; }
.odidact-page .oj-step-circle { width: 92px; height: 92px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,247,255,.92)); border: 1.35px solid rgba(120, 145, 230, 0.22); box-shadow: 0 12px 28px rgba(19, 33, 105, 0.065); }
.odidact-page .oj-step-circle svg { width: 46px !important; height: 46px !important; color: var(--oj-current) !important; stroke: var(--oj-current) !important; stroke-width: 2.3 !important; }
.odidact-page .oj-step h3 { margin: 0 0 9px; color: var(--oj-blue); font-size: 20px; line-height: 1.05; font-weight: 700; }
.odidact-page .oj-step p { width: 218px; margin: 0 auto; color: #58669f; font-size: 12.8px; line-height: 1.42; font-weight: 600; }
.odidact-page .oj-card-row { position: absolute; left: 36px; right: 36px; bottom: 36px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.odidact-page [data-oj-icon] svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ========== SECTION 04 — FINAL FIT-TO-VIEWPORT OVERRIDES ========== */
@media (min-width: 901px) {
  .odidact-page .odidact-solution { width: 100vw !important; height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: #fafbff !important; }
  /* Row 1: top bar */
  /* Row 2: header — H2 left, divider, paragraph right */
  /* Row 3: grid — explicit equal rows, cards fill */
  /* Mockup — tighter spacing */
  /* Discovery mockup */
  /* Trust mockup */
  /* Communication mockup */
  /* Monetization mockup */
  /* Row 4: summary strip */
  /* Side label */
}
/* Odidact supplied standalone sections: start */
.odidact-page .os-solution-system, .odidact-page .ods-system-section, .odidact-page .oi-impact-section { position: relative !important; width: 100vw !important; height: 100vh !important; min-height: 100vh !important; overflow: hidden !important; display: grid !important; place-items: center !important; padding: 0 !important; background: #fbfcff !important; font-family: "Inter", Arial, sans-serif; color: #071b86; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; }
.odidact-page .os-solution-system::before, .odidact-page .os-solution-system::after, .odidact-page .ods-system-section::before, .odidact-page .ods-system-section::after, .odidact-page .oi-impact-section::before, .odidact-page .oi-impact-section::after { content: none !important; }
.odidact-page [data-od-icon] { display: inline-block; line-height: 0; }
.odidact-page [data-od-icon] svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 901px) { ; }
/* 04 Solution System */
.odidact-page .os-top-left, .odidact-page .ods-top-left { position: absolute; left: 104px; top: 50px; display: flex; align-items: center; gap: 14px; color: #071b86; font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.odidact-page .os-dot, .odidact-page .ods-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff4f9d; box-shadow: 0 0 0 5px rgba(255, 79, 157, 0.11); }
.odidact-page .os-side-label, .odidact-page .ods-side-label, .odidact-page .oi-side-label { position: absolute; left: 48px; top: 423px; height: 228px; display: flex; align-items: center; gap: 25px; writing-mode: vertical-rl; transform: rotate(180deg); color: #071b86; font-size: 16px; font-weight: 700; letter-spacing: .19em; z-index: 5; }
.odidact-page .os-side-label span:nth-child(2), .odidact-page .ods-side-label span:nth-child(2), .odidact-page .oi-side-label span:nth-child(2) { color: #6d76a5; font-weight: 500; letter-spacing: .05em; }
.odidact-page .os-mark, .odidact-page .ods-mark, .odidact-page .oi-mark { width: 2px; height: 18px; border-radius: 2px; background: #ff4f9d; }
.odidact-page .os-hero-title { position: absolute; left: 118px; top: 106px; width: 720px; margin: 0; color: var(--os-blue); font-size: 67px; line-height: .99; font-weight: 700; letter-spacing: -.055em; }
.odidact-page .os-cta { width: 100%; height: 30px; border: 0; border-radius: 6px; background: var(--os-blue); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 7px 14px rgba(6, 27, 135, .08); }
.odidact-page .os-primary { border: 0; background: var(--os-blue); color: #fff; box-shadow: 0 8px 16px rgba(6, 27, 135, .08); }
/* Design System */
.odidact-page .ods-hero { position: absolute; left: 118px; top: 126px; width: 620px; }
.odidact-page .ods-hero h1 { margin: 0 0 18px 0; color: var(--ods-blue); font-size: 55px; line-height: 1.02; letter-spacing: -.055em; font-weight: 700; }
.odidact-page .ods-hero p { margin: 0; width: 585px; color: #7580af; font-size: 16px; line-height: 1.45; font-weight: 600; }
.odidact-page .ods-left-grid { position: absolute; left: 118px; top: 340px; width: 560px; display: grid; grid-template-columns: 270px 270px; gap: 20px; }
.odidact-page .ods-right-wrap { position: absolute; left: 720px; top: 84px; width: 970px; display: grid; grid-template-rows: 535px 306px; gap: 18px; }
/* Impact */
.odidact-page .oi-impact-section { --oi-blue: #071b86; --oi-pink: #ff4f9d; --oi-surface: rgba(255, 255, 255, 0.78); --oi-line: rgba(125, 145, 230, 0.24); --oi-line-strong: rgba(125, 145, 230, 0.34); --oi-shadow: 0 22px 55px rgba(20, 40, 120, 0.04); }
.odidact-page .oi-stage { position: absolute; left: 50%; top: 50%; width: 1792px; height: 1024px; overflow: hidden; transform: translate(-50%, -50%) scale(var(--oi-section-scale, 1)); transform-origin: center center; background: radial-gradient(circle at 15% 10%, rgba(255,255,255,.99), rgba(255,255,255,.95) 34%, transparent 58%), radial-gradient(circle at 78% 62%, rgba(31,79,255,.032), transparent 36%), radial-gradient(circle at 86% 66%, rgba(255,79,157,.026), transparent 28%), linear-gradient(135deg, #ffffff 0%, #fbfcff 50%, #ffffff 100%); border: 1px solid rgba(160, 172, 210, 0.34); box-shadow: 0 18px 60px rgba(9, 25, 100, 0.045); }
.odidact-page .oi-top-grid { position: absolute; left: 98px; top: 50%; transform: translateY(-56%); width: 1596px; display: grid; grid-template-columns: 780px 780px; gap: 36px; }
.odidact-page .oi-info-card { position: relative; height: 380px; padding: 56px 44px 48px; border: 1.35px solid var(--oi-line); border-radius: 18px; background: var(--oi-surface); backdrop-filter: blur(8px); box-shadow: var(--oi-shadow); overflow: hidden; }
.odidact-page .oi-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 42px; color: var(--oi-blue); font-size: 14px; line-height: 1; font-weight: 800; letter-spacing: .04em; }
.odidact-page .oi-eyebrow-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--oi-pink); box-shadow: 0 0 0 4px rgba(255, 79, 157, .12); }
.odidact-page .oi-impact-copy, .odidact-page .oi-takeaway-copy { margin: 0; color: #7f8cbc; font-size: 22px; line-height: 1.55; font-weight: 600; letter-spacing: -.015em; }
.odidact-page .oi-impact-copy { width: 625px; }
.odidact-page .oi-takeaway-copy { width: 620px; margin-top: 24px; }
.odidact-page .oi-stats { position: absolute; left: 44px; right: 44px; bottom: 54px; display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; align-items: end; column-gap: 36px; }
.odidact-page .oi-divider { width: 1px; height: 92px; background: var(--oi-line); align-self: center; }
.odidact-page .oi-stat-value { color: var(--oi-blue); font-size: 56px; line-height: .95; letter-spacing: -.055em; font-weight: 800; margin-bottom: 22px; }
.odidact-page .oi-stat-label { color: #8b95be; font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: .1em; }
.odidact-page .oi-sparkle-badge { position: absolute; top: 44px; right: 44px; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: rgba(238, 242, 255, .78); color: #8e9ac8; }
.odidact-page .oi-sparkle-badge i { width: 34px; height: 34px; }
.odidact-page .oi-bottom-area { position: absolute; left: 118px; right: 118px; top: 570px; height: 360px; }
.odidact-page .oi-continue-label { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; color: #0d12f8; font-size: 15px; line-height: 1; font-weight: 800; letter-spacing: .04em; }
.odidact-page .oi-continue-label span:first-child { color: var(--oi-pink); font-size: 22px; transform: translateY(1px); }
.odidact-page .oi-next-title { margin: 0 0 22px; color: var(--oi-blue); font-size: 82px; line-height: .95; letter-spacing: -.06em; font-weight: 800; }
.odidact-page .oi-next-copy { margin: 0 0 40px; width: 570px; color: #8190bd; font-size: 24px; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; }
.odidact-page .oi-btn { height: 64px; padding: 0 36px; border-radius: 7px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.odidact-page .oi-project-orbit { position: absolute; right: 4px; top: 4px; width: 620px; height: 360px; }
.odidact-page .oi-arrow-circle { position: absolute; right: 16px; top: 144px; width: 82px; height: 82px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,1), rgba(255,255,255,.92) 48%, rgba(255,255,255,.84) 100%); border: 1.2px solid rgba(125, 145, 230, .25); color: var(--oi-pink); box-shadow: 0 14px 32px rgba(16, 35, 120, .058), inset 0 1px 0 rgba(255,255,255,.8); z-index: 4; text-decoration: none; }
.odidact-page .oi-arrow-circle i { width: 24px; height: 24px; }
/* next project: fitness theme card (replaces the Ryujin mountain scene) */
@keyframes oiFitFlow {
  to { stroke-dashoffset: 0; }
}
/* Odidact supplied standalone sections: end */
/* Odidact integration normalization: keep standalone layouts inside one shared case-study world. */
.odidact-page .oj-journey-section, .odidact-page .os-solution-system, .odidact-page .ods-system-section, .odidact-page .oi-impact-section { background: radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9) 30%, rgba(251, 252, 255, 0) 58%), radial-gradient(circle at 78% 24%, rgba(255, 79, 157, 0.025), rgba(255, 79, 157, 0) 34%), radial-gradient(circle at 42% 74%, rgba(31, 79, 255, 0.025), rgba(31, 79, 255, 0) 38%), linear-gradient(135deg, #ffffff 0%, #fbfcff 48%, #ffffff 100%) !important; }
.odidact-page .oj-stage, .odidact-page .os-stage, .odidact-page .ods-stage, .odidact-page .oi-stage { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.odidact-page .oj-top-right, .odidact-page .os-top-right, .odidact-page .ods-top-right, .odidact-page .oj-bottom-left, .odidact-page .oj-bottom-right, .odidact-page .ods-bottom-left, .odidact-page .ods-bottom-right, .odidact-page .oj-side-label, .odidact-page .os-side-label, .odidact-page .ods-side-label, .odidact-page .oi-side-label { display: none !important; }
@media (min-width: 901px) {
  /* desktop artboard normalization */
  .odidact-page .oj-journey-board, .odidact-page .oj-mini-card, .odidact-page .oj-result-banner, .odidact-page .os-card, .odidact-page .os-bottom-banner, .odidact-page .ods-panel, .odidact-page .ods-components-board, .odidact-page .ods-layout-board, .odidact-page .ods-component-card, .odidact-page .ods-layout-card, .odidact-page .oi-info-card { border-color: rgba(125, 145, 230, 0.22) !important; box-shadow: 0 18px 45px rgba(20, 40, 120, 0.032) !important; }
  /* Hero rhythm correction: one consistent stack instead of inherited text-title spacing. */
  .odidact-page .odidact-hero .hero-copy { row-gap: 0; }
  .odidact-page .odidact-hero .hero-case-pill.odidact-section-dot-title, .odidact-page .odidact-hero .hero-kicker, .odidact-page .odidact-hero .hero-description, .odidact-page .odidact-hero .hero-tags { margin: 0 !important; }
  .odidact-page .odidact-hero .hero-tags { padding-top: clamp(18px, 2vh, 26px); }
  .odidact-page .oj-journey-section { display: flex !important; align-items: center !important; justify-content: center !important; }
  /* Section 03 User Journey balance pass: keep the supplied content, remove the standalone-poster feel. */
  .odidact-page .oj-hero { position: static !important; margin: 0 !important; min-height: 0 !important; display: grid !important; }
  .odidact-page .oj-hero h2 { grid-column: 1 !important; margin-bottom: 16px !important; line-height: 1.02 !important; }
  .odidact-page .oj-journey-board { position: relative !important; left: auto !important; top: auto !important; height: auto !important; margin: 22px auto 0 !important; display: grid !important; grid-template-rows: auto auto !important; align-content: start !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  .odidact-page .oj-path-line { position: absolute !important; left: var(--oj-sequence-pad) !important; right: var(--oj-sequence-pad) !important; top: 24px !important; width: auto !important; height: 88px !important; pointer-events: none !important; }
  .odidact-page .oj-step { width: 100% !important; min-width: 0 !important; display: grid !important; justify-items: center !important; text-align: center !important; row-gap: 9px !important; }
  .odidact-page .oj-step:not(:last-child)::after { content: none !important; }
  .odidact-page .oj-step-circle { position: relative !important; z-index: 2 !important; margin: 0 !important; border: 1.35px solid rgba(120, 145, 230, 0.22) !important; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,247,255,.92)) !important; }
  .odidact-page .oj-step-circle svg { fill: none !important; stroke-width: 2.3 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
  .odidact-page .oj-step h3 { margin: 0 !important; color: #071B86 !important; line-height: 1.05 !important; font-weight: 700 !important; }
  .odidact-page .oj-step p { margin: 0 auto !important; margin-left: auto !important; margin-right: auto !important; color: #6F7AA9 !important; font-weight: 600 !important; }
  .odidact-page .oj-card-row { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; padding: 0 var(--oj-sequence-pad) !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; row-gap: 0 !important; }
}
/* end desktop artboard normalization */
/* ========================================================= ODIDACT REWORK - life + responsive layer (appended) ========================================================= */
/* ---------- desktop: organize the key-screens collage ---------- */
@media (min-width: 901px) {
  .odidact-page .key-shot--live { transform: none; }
  .odidact-page .key-shot--community { transform: none; }
  .odidact-page .key-shot--footer { transform: none; }
}
/* ---------- hover life on cards (all sizes) ---------- */
.odidact-page .friction-card, .odidact-page .oj-mini-card, .odidact-page .os-card, .odidact-page .ods-component-card, .odidact-page .ods-panel, .odidact-page .oi-info-card { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.odidact-page .friction-card:hover, .odidact-page .oj-mini-card:hover, .odidact-page .ods-component-card:hover, .odidact-page .oi-info-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(16, 35, 120, 0.12); }
.odidact-page .key-shot { will-change: transform; transform-style: preserve-3d; }
.odidact-page .oi-arrow-circle { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.odidact-page .oi-arrow-circle:hover { transform: scale(1.12); }
/* ========================================================= MOBILE / TABLET REBUILD (max 900px) the four 1792x1024 artboards become natural flow layouts ========================================================= */
@media (max-width: 900px) {
  /* hero: stack devices */
  .odidact-page .hero-shell { display: flex; flex-direction: column; }
  .odidact-page .hero-visual { position: relative; height: auto; min-height: 0; margin-top: 8px; }
  .odidact-page .hero-device { position: static; width: 100%; transform: none; }
  .odidact-page .hero-device--desktop { width: 100%; }
  .odidact-page .hero-device--mobile { width: 52%; margin: -34% 0 0 auto; }
  .odidact-page .hero-device img { width: 100%; height: auto; }
  .odidact-page .challenge-grid { display: flex; flex-direction: column; }
  .odidact-page .challenge-visual img { width: 100%; height: auto; }
  /* ---- shared: stages become normal flow ---- */
  .odidact-page .oj-journey-section, .odidact-page .os-solution-system, .odidact-page .ods-system-section, .odidact-page .oi-impact-section { height: auto !important; min-height: 0 !important; display: block !important; place-items: initial !important; padding: 72px 20px 56px !important; overflow: visible !important; }
  .odidact-page .oj-stage, .odidact-page .os-stage, .odidact-page .ods-stage, .odidact-page .oi-stage { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; transform: none; background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
  /* text blocks inside stages may carry fixed artboard widths */
  .odidact-page .oj-stage p, .odidact-page .os-stage p, .odidact-page .ods-stage p, .odidact-page .oi-stage p { width: auto !important; max-width: 100% !important; }
  /* artboard headings were single-line; let them wrap again */
  .odidact-page .oj-hero h2, .odidact-page .oj-hero-copy, .odidact-page .os-hero-title, .odidact-page .os-hero-copy, .odidact-page .ods-hero h1, .odidact-page .ods-hero p, .odidact-page .oi-next-title, .odidact-page .oi-next-copy, .odidact-page .os-banner-text { white-space: normal !important; max-width: 100% !important; }
  /* artboard chrome off */
  .odidact-page .oj-top-right, .odidact-page .oj-side-label, .odidact-page .oj-bottom-left, .odidact-page .oj-bottom-right, .odidact-page .os-top-right, .odidact-page .os-side-label, .odidact-page .ods-top-right, .odidact-page .ods-side-label, .odidact-page .ods-bottom-left, .odidact-page .ods-bottom-right, .odidact-page .oi-side-label { display: none !important; }
  /* section labels become inline pills */
  .odidact-page .oj-top-left, .odidact-page .os-top-left, .odidact-page .ods-top-left { position: static; margin-bottom: 20px; font-size: 13px; }
  /* ---- 03 user journey ---- */
  .odidact-page .oj-hero { position: static; width: auto; margin-bottom: 26px; }
  .odidact-page .oj-hero h2 { font-size: clamp(30px, 8.6vw, 42px); line-height: 1.04; letter-spacing: -0.03em; }
  .odidact-page .oj-hero h2 br { display: none; }
  .odidact-page .oj-journey-board { position: static; width: auto; height: auto; }
  .odidact-page .oj-path-line { display: none; }
  .odidact-page .oj-step { position: static; width: auto; display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; text-align: left; align-items: center; }
  .odidact-page .oj-step-circle { grid-row: 1 / span 2; position: static; width: 58px; height: 58px; margin: 0; }
  .odidact-page .oj-step h3 { margin: 0; font-size: 19px; align-self: end; }
  .odidact-page .oj-step p { margin: 0; font-size: 14px; align-self: start; }
  .odidact-page .oj-card-row { position: static; display: flex; flex-wrap: nowrap; gap: 14px; width: calc(100% + 40px); margin: 0 -20px; padding: 6px 20px 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* ---- 04 solution system ---- */
  .odidact-page .os-hero-title { position: static; width: auto; font-size: clamp(30px, 8.6vw, 42px); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 14px; }
  .odidact-page .os-hero-title br { display: none; }
  /* ---- 06 design system ---- */
  .odidact-page .ods-hero { position: static; width: auto; margin-bottom: 24px; }
  .odidact-page .ods-hero h1 { font-size: clamp(30px, 8.6vw, 42px); line-height: 1.04; letter-spacing: -0.03em; }
  .odidact-page .ods-hero h1 br { display: none; }
  .odidact-page .ods-hero p { position: static; width: auto; max-width: 38em; font-size: 15px; }
  .odidact-page .ods-left-grid, .odidact-page .ods-right-wrap { position: static; display: grid; grid-template-columns: 1fr; gap: 16px; width: auto; height: auto; }
  .odidact-page .ods-left-grid { margin-bottom: 16px; }
  /* ---- 07 impact ---- */
  .odidact-page .oi-impact-copy, .odidact-page .oi-takeaway-copy, .odidact-page .oi-eyebrow, .odidact-page .oi-stats { width: auto !important; max-width: 100% !important; }
  .odidact-page .oi-stats > div { min-width: 0; }
  .odidact-page .oi-impact-copy, .odidact-page .oi-takeaway-copy { font-size: 17px; }
  .odidact-page .oi-top-grid { position: static; display: grid; grid-template-columns: 1fr; gap: 16px; width: auto; margin-bottom: 30px; }
  .odidact-page .oi-info-card { position: static; width: auto; height: auto; }
  .odidact-page .oi-impact-section { padding-top: 40px !important; }
  .odidact-page .oi-stats { flex-wrap: wrap; gap: 14px; }
  .odidact-page .oi-bottom-area { position: static; width: auto; height: auto; }
  .odidact-page .oi-next-title { font-size: clamp(34px, 10vw, 48px); width: auto; }
  .odidact-page .oi-next-copy { width: auto; max-width: 34em; font-size: 18px; }
  .odidact-page .oi-btn { height: 54px; padding: 0 24px; min-width: 0; }
  .odidact-page .oi-project-orbit { position: relative; right: auto; top: auto; width: 100%; max-width: 440px; height: 300px; margin: 30px auto 0; }
  .odidact-page .oi-arrow-circle { right: 12px; bottom: 6px; }
}
/* ========================================================= ODIDACT PREMIUM LAYER - one continuous story ========================================================= */
/* product dot-grid on the shared canvas, all sizes */
.odidact-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(13, 18, 248, 0.05) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0.55), rgba(0,0,0,0.18) 58%, transparent 82%); mask-image: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0.55), rgba(0,0,0,0.18) 58%, transparent 82%); pointer-events: none; }
@media (min-width: 901px) {
  /* de-frame the artboards: one canvas, not four posters */
  .odidact-page .oj-stage, .odidact-page .os-stage, .odidact-page .ods-stage, .odidact-page .oi-stage { background: none !important; border-color: transparent !important; box-shadow: none !important; }
  /* floating product particles */
  .odidact-page .od-deco { position: absolute; pointer-events: none; z-index: 0; color: rgba(13, 18, 248, 0.2); font-weight: 400; }
  .odidact-page .od-deco--pink { color: rgba(255, 47, 129, 0.26); }
  .odidact-page .od-deco--plus { font-family: "Inter", sans-serif; font-size: 22px; line-height: 1; }
  .odidact-page .od-deco--ring { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; }
  .odidact-page .od-deco--ring.is-lg { width: 26px; height: 26px; border-width: 2.4px; }
  .odidact-page .od-deco--dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .odidact-page .od-deco--blob { width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(13, 18, 248, 0.05), transparent 65%); }
  .odidact-page .od-deco--blob.od-deco--pink { background: radial-gradient(circle, rgba(255, 47, 129, 0.05), transparent 65%); }
  /* progress hairline: discovery blue to return pink */
  .odidact-page .od-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: rgba(13, 18, 248, 0.07); pointer-events: none; }
  .odidact-page .od-progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #0d12f8, #3313ff 55%, #ff2f81); transform-origin: left center; transform: scaleX(0); }
  /* chapter counter */
}
@media (max-width: 900px) {
  .odidact-page .od-deco, .odidact-page .od-progress, .odidact-page .od-counter { display: none !important; }
}
/* ========================================================= ODIDACT REWORK 2 - navbar, wall, icons, key screens ========================================================= */
/* ---------- the one navbar ---------- */
.odidact-page .od-bar { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 80; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); padding: 0 clamp(16px, 2.4vw, 30px); background: rgba(251, 252, 255, 0.93); border-bottom: 1px solid rgba(160, 172, 210, 0.28); font-family: "Inter", sans-serif; }
.odidact-page .od-bar__back, .odidact-page .od-bar__next { font-size: 13px; font-weight: 700; color: #0f1336; text-decoration: none; white-space: nowrap; transition: color 0.25s; }
.odidact-page .od-bar__back:hover, .odidact-page .od-bar__next:hover { color: #0d12f8; }
/* fake artboard chrome is fully retired (navbar owns it now) */
/* keep first fold clear of the bar */
.odidact-page .panel-hero { padding-top: 86px; }
/* ---------- travelling gradient wall (desktop) ---------- */
.odidact-page .od-wall { position: absolute; left: 0; top: 0; height: 100%; z-index: 0; pointer-events: none; background-image: radial-gradient(circle 480px at 14.3% 26%, rgba(13, 18, 248, 0.055), transparent 70%), radial-gradient(circle 520px at 28.6% 74%, rgba(255, 47, 129, 0.05), transparent 70%), radial-gradient(circle 460px at 42.9% 20%, rgba(51, 19, 255, 0.05), transparent 70%), radial-gradient(circle 540px at 57.1% 70%, rgba(13, 18, 248, 0.05), transparent 70%), radial-gradient(circle 480px at 71.4% 24%, rgba(255, 47, 129, 0.05), transparent 70%), radial-gradient(circle 540px at 85.7% 68%, rgba(51, 19, 255, 0.055), transparent 70%), linear-gradient(90deg, rgba(13, 18, 248, 0.028), rgba(122, 80, 255, 0.022) 48%, rgba(255, 47, 129, 0.03)); }
/* ---------- icons: clean library rendering, responsive ---------- */
.odidact-page svg.lucide { display: block; }
.odidact-page .friction-icon { display: grid; place-items: center; color: #0d12f8; }
.odidact-page .friction-icon svg { width: 22px; height: 22px; }
.odidact-page .screen-benefit-icon { color: #0d12f8; }
.odidact-page .screen-benefit-icon svg { width: 20px; height: 20px; }
.odidact-page .oj-step-circle svg { width: 30px; height: 30px; }
.odidact-page .oi-sparkle-badge svg { width: 22px; height: 22px; }
.odidact-page .oi-arrow-circle svg { width: 18px; height: 18px; }
/* ---------- key screens: composed app-window stack ---------- */
@media (min-width: 901px) {
  .odidact-page .key-screens-collage { display: block; }
  .odidact-page .key-shot { inset: auto; margin: 0; }
  .odidact-page .key-shot img { width: 100%; height: 100%; object-fit: cover; filter: none; }
  .odidact-page .key-shot figcaption { position: absolute; left: 16px; top: 16px; margin: 0; display: inline-flex; padding: 5px 11px; border-radius: 999px; background: rgba(13, 18, 248, 0.92); color: #ffffff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; z-index: 2; }
  .odidact-page .key-shot figcaption b { color: rgba(255, 255, 255, 0.65); }
  .odidact-page .key-shot--dashboard { left: 0; top: 3%; width: 57%; height: 66%; z-index: 3; }
  .odidact-page .key-shot--hero { left: 52%; top: 0; width: 48%; height: 42%; z-index: 4; }
  .odidact-page .key-shot--live { left: 61%; top: 47%; width: 39%; height: 38%; z-index: 5; }
  .odidact-page .key-shot--community { left: 5%; top: 62%; width: 44%; height: 36%; z-index: 6; }
  .odidact-page .key-shot--footer { left: 53%; top: 88%; width: 43%; height: 12%; z-index: 2; }
}
/* ---------- mobile adjustments ---------- */
@media (max-width: 900px) {
  .odidact-page .od-bar { height: 52px; gap: 12px; padding: 0 16px; }
  .odidact-page .od-bar__next { display: none; }
  .odidact-page .od-wall { display: none; }
  .odidact-page .panel-hero { padding-top: 76px; }
  .odidact-page .oj-step-circle svg { width: 24px; height: 24px; }
  .odidact-page .screen-benefit-icon svg { width: 18px; height: 18px; }
  .odidact-page .key-screens-collage { display: block; height: auto; }
  .odidact-page .key-shot { position: relative !important; width: 100% !important; height: auto !important; margin: 0 0 16px; padding: 8px; background: #fff; border: 1px solid rgba(160, 172, 210, 0.32); border-radius: 14px; box-shadow: 0 16px 34px -16px rgba(9, 36, 111, 0.14); }
  .odidact-page .key-shot img { width: 100%; height: auto; border-radius: 8px; }
  .odidact-page .key-shot figcaption { position: static; display: inline-flex; gap: 6px; margin: 8px 4px 2px; padding: 4px 10px; border-radius: 999px; background: rgba(13, 18, 248, 0.92); color: #fff; font-size: 10.5px; font-weight: 700; }
  .odidact-page .key-shot figcaption b { color: rgba(255, 255, 255, 0.65); }
}
/* ---------- mobile hotfixes: friction cards + hero meta ---------- */
@media (max-width: 900px) {
  .odidact-page .friction-grid { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; gap: 12px !important; }
  .odidact-page .friction-card { flex: 0 0 auto !important; display: grid !important; grid-template-columns: 44px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; column-gap: 14px; row-gap: 3px; padding: 16px !important; align-items: center; }
  .odidact-page .friction-card .friction-icon { grid-row: 1 / span 2; width: 44px !important; height: 44px !important; border-radius: 12px; background: #eef1ff; }
  .odidact-page .friction-card strong, .odidact-page .friction-card p { height: auto !important; min-height: 0 !important; margin: 0 !important; }
  .odidact-page .friction-card strong { font-size: 15px; align-self: end; }
  .odidact-page .friction-card p { font-size: 13px; line-height: 1.5; align-self: start; }
}
/* ===== R3: desktop polish batch ===== */
@media (min-width: 901px) {
  /* sec 1: meta cards stack cleanly */
  /* sec 2: friction icons, colored + bigger */
  .odidact-page .friction-icon { width: 52px; height: 52px; border-radius: 14px; }
  .odidact-page .friction-icon svg { width: 26px; height: 26px; }
  .odidact-page .friction-card:nth-of-type(1) .friction-icon { color: #0d12f8; background: #eef1ff; }
  .odidact-page .friction-card:nth-of-type(2) .friction-icon { color: #ff71b1; background: #ffeaf3; }
  .odidact-page .friction-card:nth-of-type(3) .friction-icon { color: #12b76a; background: #e7f9f0; }
  /* sec 3: the line rides above any haze */
  /* one canvas: every panel transparent, wall does the color */
  .odidact-page .section-panel { background: transparent !important; }
  /* sec 4 + 6 sit visually heavier: compact their artboards */
  /* sec 5: never crop the screens */
  /* navbar: floating chips instead of a heavy bar */
  .odidact-page .od-bar { background: transparent; border-bottom: 0; height: 66px; pointer-events: none; }
  .odidact-page .od-bar > * { pointer-events: auto; }
  .odidact-page .od-bar__back, .odidact-page .od-bar__next, .odidact-page .od-bar__brand, .odidact-page .od-bar__counter { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(160, 172, 210, 0.35); border-radius: 999px; padding: 9px 16px; box-shadow: 0 8px 22px -8px rgba(9, 36, 111, 0.12); }
}
@media (min-width: 901px) {
  .odidact-page .hero-shell { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(24px, 3vw, 56px); align-items: center; }
  .odidact-page .hero-visual { position: relative !important; inset: auto !important; width: auto !important; min-height: 0; }
  .odidact-page .hero-device--desktop { position: relative !important; inset: auto !important; width: 94% !important; margin: 0; }
  .odidact-page .hero-device--mobile { position: absolute !important; left: auto !important; top: auto !important; right: 0 !important; margin: 0; }
  .odidact-page .hero-device img { width: 100%; height: auto; }
}
@media (min-width: 901px) {
  .odidact-page .panel-hero { padding-top: 96px; }
}
/* ===== R4: per-feedback desktop fixes ===== */
@media (min-width: 901px) {
  /* 1) hero meta: no card chrome, icon + text rows */
  /* 1b) hero phone: tall page screenshot must be cropped, not towering */
  .odidact-page .hero-device--mobile { height: 72% !important; width: 30% !important; bottom: 4% !important; overflow: hidden; border-radius: 16px; box-shadow: 0 24px 50px -18px rgba(9, 36, 111, 0.35); }
  .odidact-page .hero-device--mobile img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: top center; }
  /* 2) journey: line behind icons, never clipped */
  .odidact-page .oj-path-line { overflow: visible !important; }
  .odidact-page .oj-step { position: relative !important; z-index: 3; }
  .odidact-page .od-deco--blob { z-index: 0; }
  /* 3) solution: grid compacts left, banner becomes a vertical rail on the right */
  /* 4) key screens: strict grid, zero overlap */
  .odidact-page .key-screens-collage { position: relative; }
  .odidact-page .key-shot { min-height: 0; }
  .odidact-page .key-shot--dashboard { grid-column: 1; grid-row: 1 / span 2; }
  .odidact-page .key-shot--hero { grid-column: 2; grid-row: 1; }
  .odidact-page .key-shot--live { grid-column: 2; grid-row: 2; }
  .odidact-page .key-shot--community { grid-column: 1; grid-row: 3; }
  .odidact-page .key-shot--footer { grid-column: 2; grid-row: 3; }
  /* 5) design system: layout tokens move right, vertical */
  /* 6) absolutely no visible panel edges */
  .odidact-page .section-panel { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
}
/* ========================================================= ODH - hero redesign (clean product stage) ========================================================= */
@media (min-width: 901px) {
  .odidact-page .odh { display: grid !important; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(40px, 4.5vw, 84px); align-items: center; width: min(1520px, 100%); margin: 0 auto; }
  /* ---- copy column ---- */
  .odidact-page .odh-copy { max-width: 560px; }
  .odidact-page .odh-logo { margin: 22px 0 18px; }
  .odidact-page .odh-logo img { height: auto; display: block; }
  .odidact-page .odh-headline { margin: 0 0 14px; font-family: "Inter", sans-serif; font-weight: 800; letter-spacing: -0.02em; color: #0f1336; }
  .odidact-page .odh-headline em { font-style: normal; }
  .odidact-page .odh-lede { margin: 0 0 20px; font-size: 15.5px; line-height: 1.7; color: #5a628c; }
  .odidact-page .odh-stack img { width: 20px; height: 20px; }
  .odidact-page .odh-stack span { margin-left: 6px; font-size: 12px; font-weight: 600; color: #8a93bd; }
  /* ---- product stage ---- */
  .odidact-page .odh-stage { position: relative !important; inset: auto !important; width: auto !important; min-height: 480px; }
  .odidact-page .odh-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
  .odidact-page .odh-glow--b { width: 56%; padding-top: 56%; left: -8%; top: -6%; background: radial-gradient(circle, rgba(13, 18, 248, 0.10), transparent 65%); }
  .odidact-page .odh-glow--p { width: 52%; padding-top: 52%; right: -6%; bottom: -10%; background: radial-gradient(circle, rgba(255, 47, 129, 0.09), transparent 65%); }
  .odidact-page .odh-main { position: absolute !important; inset: auto !important; left: 0; margin: 0; background: #fff; border: 1px solid rgba(160, 172, 210, 0.4); border-radius: 16px; box-shadow: 0 36px 80px -30px rgba(9, 36, 111, 0.28); overflow: hidden; z-index: 2; }
  .odidact-page .odh-chrome { display: flex; align-items: center; background: #f4f6ff; border-bottom: 1px solid rgba(160, 172, 210, 0.3); }
  .odidact-page .odh-chrome i { width: 9px; height: 9px; border-radius: 50%; }
  .odidact-page .odh-chrome i:nth-child(1) { background: #ff5f57; }
  .odidact-page .odh-chrome i:nth-child(2) { background: #febc2e; }
  .odidact-page .odh-chrome i:nth-child(3) { background: #28c840; }
  .odidact-page .odh-main__view { display: block; overflow: hidden; }
  .odidact-page .odh-main__view img { width: 100% !important; height: 100% !important; object-position: top center; }
  .odidact-page .odh-phone { position: absolute !important; inset: auto !important; margin: 0; overflow: hidden; background: #fff; z-index: 3; }
  .odidact-page .odh-phone img { width: 100% !important; object-fit: cover; object-position: top center; }
  /* floating trust chips */
  @keyframes odh-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
  }
}
/* ===== final nav correction: calm editorial strip ===== */
/* ===== final last-word hero/nav responsive fix ===== */
@media (min-width: 901px) {
  .odidact-page .odidact-hero .odh-stage { position: relative !important; overflow: visible !important; }
  .odidact-page .odidact-hero .odh-main { position: absolute !important; }
  .odidact-page .odidact-hero .odh-phone { position: absolute !important; }
}
/* ===== final responsive mockup height clamp ===== */
/* ===== absolute final mobile hero fit ===== */
@media (max-width: 900px) {
  .odidact-page .odidact-hero .odh-stage { position: relative !important; }
  .odidact-page .odidact-hero .odh-main { position: absolute !important; top: 8% !important; }
  .odidact-page .odidact-hero .odh-main__view { display: block !important; width: 100% !important; overflow: hidden !important; }
  .odidact-page .odidact-hero .odh-main__view img { display: block !important; }
  .odidact-page .odidact-hero .odh-phone { position: absolute !important; left: auto !important; right: 4% !important; top: auto !important; bottom: 0 !important; height: auto !important; aspect-ratio: 800 / 2048 !important; transform: none !important; }
}
@media (max-width: 560px) {
  .odidact-page .odidact-hero .odh-stage { height: clamp(390px, 104vw, 470px) !important; }
  .odidact-page .odidact-hero .odh-main { width: 92% !important; }
  .odidact-page .odidact-hero .odh-phone { width: min(40%, 165px) !important; right: 3% !important; }
}
/* ===== final responsive + nav simplification ===== */
@media (max-width: 560px) {
  .odidact-page .od-bar { grid-template-columns: auto 1fr auto !important; }
}
/* ---- mobile: simple stack ---- */
@media (max-width: 900px) {
  .odidact-page .odh { display: flex; flex-direction: column; }
  .odidact-page .odh-logo img { width: 200px; height: auto; }
  .odidact-page .odh-headline { font-size: 20px; font-weight: 800; line-height: 1.35; color: #0f1336; margin: 0 0 12px; }
  .odidact-page .odh-headline em { font-style: normal; color: #0d12f8; }
  .odidact-page .odh-lede { font-size: 15px; line-height: 1.65; color: #5a628c; margin: 0 0 18px; }
  .odidact-page .odh-stack { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .odidact-page .odh-stack img { width: 18px; height: 18px; }
  .odidact-page .odh-stack span { font-size: 11.5px; color: #8a93bd; width: 100%; }
  .odidact-page .odh-stage { position: relative !important; height: auto !important; min-height: 0; margin-top: 10px; }
  .odidact-page .odh-glow { display: none; }
  .odidact-page .odh-main { position: relative !important; width: 100% !important; transform: none; background: #fff; border: 1px solid rgba(160, 172, 210, 0.4); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 44px -20px rgba(9, 36, 111, 0.25); }
  .odidact-page .odh-main__view { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
  .odidact-page .odh-main__view img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: top center; }
  .odidact-page .odh-phone { position: relative !important; width: 44% !important; height: auto !important; aspect-ratio: 9 / 16; margin: -24% 4% 0 auto; border-radius: 16px; border: 1px solid rgba(160, 172, 210, 0.45); overflow: hidden; background: #fff; box-shadow: 0 20px 40px -18px rgba(9, 36, 111, 0.3); }
  .odidact-page .odh-phone img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: top center; }
}
/* ===== ODH v2: match the target mock ===== */
@media (min-width: 901px) {
  .odidact-page .odh-logo img { width: clamp(280px, 21vw, 380px); }
  .odidact-page .odh-headline { font-size: clamp(23px, 1.8vw, 30px); line-height: 1.32; }
  .odidact-page .odh-headline em { color: #ff71b1; }
  /* meta: four soft cards in a row, icon on top */
  /* tech stack: one white bar with dividers */
  .odidact-page .odh-stack { display: flex; align-items: center; gap: 0; border: 1px solid rgba(160, 172, 210, 0.35); border-radius: 14px; background: rgba(255, 255, 255, 0.85); padding: 12px 18px; box-shadow: 0 10px 24px -16px rgba(9, 36, 111, 0.18); width: max-content; max-width: 100%; }
  .odidact-page .odh-stack b { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #8a93bd; padding-right: 26px; }
  .odidact-page .odh-stack__item { display: flex; align-items: center; gap: 7px; padding: 0 14px; border-left: 1px solid rgba(160, 172, 210, 0.35); font-size: 12.5px; font-weight: 700; color: #0f1336; white-space: nowrap; }
  .odidact-page .odh-stack__item img { width: 17px; height: 17px; }
  /* browser: real chrome with address bar */
  .odidact-page .odh-chrome { height: 42px; padding: 0 16px; gap: 14px; }
  .odidact-page .odh-chrome__lights { display: flex; gap: 6px; }
  .odidact-page .odh-chrome__lights i { width: 10px; height: 10px; border-radius: 50%; }
  .odidact-page .odh-chrome__lights i:nth-child(1) { background: #ff5f57; }
  .odidact-page .odh-chrome__lights i:nth-child(2) { background: #febc2e; }
  .odidact-page .odh-chrome__lights i:nth-child(3) { background: #28c840; }
  .odidact-page .odh-chrome i { background: transparent; }
  .odidact-page .odh-chrome__url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 320px; margin: 0 auto; height: 26px; border-radius: 8px; background: #ffffff; border: 1px solid rgba(160, 172, 210, 0.3); font-size: 11.5px; font-weight: 600; color: #5a628c; }
  .odidact-page .odh-chrome__url svg { width: 11px; height: 11px; }
  .odidact-page .odh-chrome__re { color: #8a93bd; font-size: 15px; }
  /* assistance panel: flat rounded card overlapping the right edge */
  .odidact-page .odh-phone { border-radius: 16px; border: 1px solid rgba(160, 172, 210, 0.4); box-shadow: 0 30px 64px -24px rgba(9, 36, 111, 0.3); }
}
/* ===== ODH v3: spacing + exact-fit media ===== */
@media (min-width: 901px) {
  .odidact-page .odh-tags { margin-bottom: 32px; }
  .odidact-page .odh-lede { margin-bottom: 22px; }
  /* browser shows the WHOLE landing shot: window takes the image ratio */
  .odidact-page .odh-main { top: 50%; transform: translateY(-50%); }
  .odidact-page .odh-main__view { aspect-ratio: 5760 / 3496; }
  .odidact-page .odh-main__view img { object-fit: fill; }
}
/* ===== ODH v4: decisive stage coordinates ===== */
@media (min-width: 901px) {
  .odidact-page .odh-main { bottom: auto !important; }
}
@media (min-width: 901px) {
  .odidact-page .odh-phone { transform: none !important; }
}
/* ===== journey sizing to match reference ===== */
@media (min-width: 901px) {
  .odidact-page .oj-step-circle svg { width: 38px !important; height: 38px !important; }
  .odidact-page .oj-step h3 { font-size: 26px !important; }
  .odidact-page .oj-step p { line-height: 1.5 !important; max-width: 280px; }
  .odidact-page .oj-card-row { align-items: stretch !important; }
}
/* ===== key screens: reference design (in-card headers, 12-col grid) ===== */
@media (min-width: 901px) {
  .odidact-page .key-screens-collage { grid-template-columns: repeat(12, 1fr); grid-template-rows: 1.18fr 1fr; height: min(720px, calc(100vh - 160px)); }
  .odidact-page .key-shot { flex-direction: column; padding: 16px 16px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(160, 172, 210, 0.3); box-shadow: 0 18px 40px -24px rgba(9, 36, 111, 0.16); overflow: hidden; }
  /* header inside the card: number badge + title */
  .odidact-page .key-shot figcaption { order: -1; display: flex !important; align-items: center; gap: 11px; font-weight: 700 !important; }
  .odidact-page .key-shot figcaption b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #eef1ff; font-size: 12px; font-weight: 800; }
  .odidact-page .key-shot img { flex: 1 1 auto; min-height: 0; object-position: top center; }
  /* left column: divider + outlined benefit icons */
  .odidact-page .screen-benefits { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(90, 98, 140, 0.18); }
  .odidact-page .screen-benefit-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1.4px solid rgba(13, 18, 248, 0.25); border-radius: 13px; background: #fff; color: #0d12f8; }
  .odidact-page .screen-benefit-icon svg { width: 21px; height: 21px; }
}
/* the white edge-fade overlays were drawing a seam at every boundary */
.odidact-page .section-panel::before, .odidact-page .section-panel::after { display: none !important; content: none !important; }
/* cursor glow: the canvas notices you */
.odidact-page .od-cursor-glow { position: fixed; left: -260px; top: -260px; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgba(13, 18, 248, 0.055) 0%, rgba(255, 47, 129, 0.035) 42%, transparent 68%); }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .odidact-page .od-cursor-glow { display: none; }
}
/* design system intro must own its column, never under the boards */
@media (min-width: 901px) {
  .odidact-page .ods-hero { width: 540px !important; max-width: 540px !important; }
  .odidact-page .ods-hero h1 { line-height: 1.05 !important; }
  .odidact-page .ods-hero p { width: auto !important; max-width: 100% !important; }
}
/* ===== WIDE CHAPTERS: use the horizontal space, one type scale ===== */
@media (min-width: 901px) {
  /* solution system: 124vw panel, full-size cards, rail in its own lane */
  /* design system: 120vw panel, boards at native size */
  .odidact-page .ods-hero h1 { font-size: 52px !important; }
  /* key screens: 130vw panel, room for uncut screens */
  .odidact-page .odidact-key-screens { width: 130vw !important; }
  .odidact-page .key-screens-shell { display: grid !important; align-items: center; }
  .odidact-page .key-screens-copy h2 { font-size: clamp(38px, 2.6vw, 52px) !important; line-height: 1.08; }
}
@media (min-width: 901px) {
  .odidact-page .odidact-key-screens { flex: 0 0 130vw !important; min-width: 130vw !important; }
}
/* ===== consistency sweep ===== */
@media (min-width: 901px) {
  /* journey compare card: profiles size to content */
  /* stages that hugged the top: settle into the optical center */
  /* key screens: short pages show whole, tall pages crop from top */
  .odidact-page .key-shot--hero img, .odidact-page .key-shot--community img, .odidact-page .key-shot--footer img { object-fit: contain !important; }
  /* design system: equal gaps everywhere */
}
/* ===== round N: hero air, journey card padding + unbroken line, full screens, DS back to horizontal ===== */
@media (min-width: 901px) {
  /* hero: chips breathe above the cards; mockups bigger */
  .odidact-page .odh-tags { margin-bottom: 40px !important; }
  .odidact-page .odh-stage { height: min(680px, 76vh); }
  /* journey: tighter card padding, line never erased */
  .odidact-page .oj-step { background: none !important; }
  .odidact-page .oj-step-circle { box-shadow: 0 12px 30px rgba(16, 35, 120, 0.12) !important; }
  /* key screens: the whole point is SEEING the screens */
  /* design system: layout tokens back under components, one column-height */
  /* a notch up on DS type so columns balance */
}
/* ===== FINAL SWEEP ===== */
@media (min-width: 901px) {
  /* 1: chips never glued to cards */
  .odidact-page .odh-copy .odh-tags { margin: 0 0 44px 0 !important; }
  /* 1b: desktop big right, mobile panel smaller overlapping LEFT */
  /* 4: solution grid drops below the headline */
  /* 5: key screens are naked images, as large as the cell allows */
  .odidact-page .key-shot { gap: 10px; }
  .odidact-page .key-screens-collage { gap: 22px; }
  .odidact-page .key-shot img { border-radius: 12px; border: 1px solid rgba(160, 172, 210, 0.35); background: #fff; box-shadow: 0 22px 48px -26px rgba(9, 36, 111, 0.22); }
  /* 6: design system, layout tokens vertical on the right (final answer) */
  /* 6b: nothing clipped: panels grow with their content */
  .odidact-page .ods-token-panel, .odidact-page .ods-type-panel, .odidact-page .ods-panel { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  /* 6c: iconography separation, asserted once more */
  /* 6d: checkbox icon, properly sized and centered */
}
/* ===== DS components grid rebuilt sane + the rest ===== */
@media (min-width: 901px) {
  /* components: clean 3-col grid, auto rows, real gaps, aligned heights */
  /* color tokens: swatches fill the panel */
  /* layout tokens: under components, horizontal (final) */
  /* key screens: never upscale past native pixels = max sharpness */
  .odidact-page .key-shot { align-items: center; justify-content: center; }
  .odidact-page .key-shot img { margin: auto; image-rendering: -webkit-optimize-contrast; }
}
/* ===== DS: equalized columns, structural separation, vertical layout tokens ===== */
@media (min-width: 901px) {
  /* color tokens stretches to typography height: swatches absorb the slack */
  .odidact-page .ods-token-panel { display: flex !important; flex-direction: column !important; }
  /* components board becomes a flex column: gaps are STRUCTURAL, nothing can glue */
  /* layout tokens: vertical rail on the right (locked) */
}
@media (min-width: 901px) {
  /* right column distributes to end exactly at color tokens' bottom */
  .odidact-page .ods-right-wrap { flex-direction: column !important; }
}
@media (min-width: 901px) {
  /* color tokens: horizontal board under components */
  .odidact-page .ods-right-wrap .ods-token-panel { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; width: auto !important; height: auto !important; flex: 0 0 auto !important; }
  .odidact-page .ods-right-wrap .ods-token-panel h2, .odidact-page .ods-right-wrap .ods-token-panel .ods-panel-desc { grid-column: 1 / -1; margin: 0 !important; }
  /* typography back to its native vertical layout on the left */
}
/* ===== hero balance repair: first section only ===== */
@media (min-width: 901px) {
  .odidact-page .odidact-hero { padding-left: clamp(36px, 4.2vw, 76px) !important; padding-right: clamp(36px, 4.2vw, 76px) !important; background: radial-gradient(circle at 78% 18%, rgba(13, 18, 248, 0.08), transparent 31vw), radial-gradient(circle at 68% 88%, rgba(255, 47, 129, 0.055), transparent 28vw), linear-gradient(135deg, #fbfcff 0%, #ffffff 48%, #f7f9ff 100%); }
  .odidact-page .odidact-hero .odh { grid-template-columns: minmax(520px, 32vw) minmax(0, 1fr) !important; gap: clamp(34px, 4vw, 74px) !important; align-items: center; width: 100%; max-width: none; margin: 0; padding-inline: 0; }
  .odidact-page .odidact-hero .odh-copy { max-width: 600px; padding-top: 0; --odh-copy-rail: min(100%, 580px); }
  .odidact-page .odidact-hero .odh-logo { margin: 0 0 clamp(24px, 2.6vh, 32px) !important; }
  .odidact-page .odidact-hero .odh-logo img { width: clamp(270px, 20vw, 360px) !important; }
  .odidact-page .odidact-hero .odh-headline { max-width: 590px; margin-top: 0 !important; margin-bottom: clamp(18px, 2vh, 24px) !important; font-size: clamp(28px, 2.15vw, 38px) !important; line-height: 1.18 !important; letter-spacing: -0.01em; }
  .odidact-page .odidact-hero .odh-lede { max-width: 580px; margin-bottom: clamp(22px, 2.4vh, 28px) !important; font-size: clamp(15px, 1vw, 18px); line-height: 1.62; }
  .odidact-page .odidact-hero .odh-copy .odh-tags { margin: 0 0 clamp(20px, 2.4vh, 28px) 0 !important; width: var(--odh-copy-rail); max-width: var(--odh-copy-rail); }
  .odidact-page .odidact-hero .odh-stack { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px 14px !important; align-self: flex-start; width: var(--odh-copy-rail); max-width: var(--odh-copy-rail); margin-left: 0 !important; min-height: 0; padding: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible; }
  .odidact-page .odidact-hero .odh-stack b { flex: 0 0 100%; color: #8a93bd; font-size: 9.6px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; padding: 0 3px 0 0; margin-bottom: 9px; }
  .odidact-page .odidact-hero .odh-stack__item { position: relative; display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: #4f587f; font-size: 12px; line-height: 1; font-weight: 750; white-space: nowrap; }
  .odidact-page .odidact-hero .odh-stack__item img { width: 16px; height: 16px; filter: saturate(0.95); }
  .odidact-page .odidact-hero .odh-stack__item:not(:last-child)::after { content: ""; display: block; width: 3px; height: 3px; margin-left: 8px; border-radius: 999px; background: rgba(138, 147, 189, 0.42); }
  .odidact-page .odidact-hero .odh-stage { min-height: 520px; overflow: visible; }
  .odidact-page .odidact-hero .odh-main { border-radius: 20px !important; box-shadow: 0 34px 80px -34px rgba(9, 36, 111, 0.26); }
  .odidact-page .odidact-hero .odh-main__view { aspect-ratio: 2048 / 1228 !important; }
  .odidact-page .odidact-hero .odh-main__view img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center; transform: translateZ(0); backface-visibility: hidden; }
  .odidact-page .odidact-hero .odh-phone { aspect-ratio: 800 / 2048; border-radius: 18px !important; box-shadow: 0 32px 74px -30px rgba(9, 36, 111, 0.34); }
  .odidact-page .odidact-hero .odh-phone img { object-position: top center; transform: translateZ(0); backface-visibility: hidden; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  .odidact-page .odidact-hero .odh { grid-template-columns: minmax(390px, 0.42fr) minmax(0, 0.58fr) !important; }
  .odidact-page .odidact-hero .odh-headline { font-size: clamp(25px, 2.2vw, 31px) !important; }
  .odidact-page .odidact-hero .odh-stage { height: 560px !important; }
  .odidact-page .odidact-hero .odh-main { left: 0 !important; width: 82% !important; }
  .odidact-page .odidact-hero .odh-phone { right: 0 !important; width: clamp(190px, 20vw, 250px) !important; }
}
@media (max-width: 900px) {
  .odidact-page .odidact-hero { overflow-x: hidden; padding-left: 24px !important; padding-right: 24px !important; }
  .odidact-page .odidact-hero .odh, .odidact-page .odidact-hero .odh-copy { width: calc(100vw - 48px) !important; max-width: calc(100vw - 48px) !important; min-width: 0; }
  .odidact-page .odidact-hero .odh-headline, .odidact-page .odidact-hero .odh-lede { overflow-wrap: break-word; }
  .odidact-page .odidact-hero .odh-copy .odh-tags { display: flex !important; width: calc(100vw - 48px) !important; max-width: calc(100vw - 48px) !important; flex-wrap: wrap !important; }
  .odidact-page .odidact-hero .odh-stage { margin-top: 18px; }
  .odidact-page .odidact-hero .odh-stack { display: flex; align-items: center; gap: 9px 13px !important; flex-wrap: wrap; width: calc(100vw - 48px) !important; max-width: calc(100vw - 48px) !important; }
  .odidact-page .odidact-hero .odh-stack b { flex: 0 0 100%; }
  .odidact-page .odidact-hero .odh-stack__item { width: auto !important; margin-left: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; }
  .odidact-page .odidact-hero .odh-stack__item:not(:last-child)::after { display: none; }
  .odidact-page .odidact-hero .odh-main__view img, .odidact-page .odidact-hero .odh-phone img { object-fit: cover !important; object-position: top center; }
  .odidact-page .odidact-hero .odh-phone { width: min(46%, 220px) !important; margin: -22% 5% 0 auto !important; aspect-ratio: 800 / 2048; }
  .odidact-page .odidact-hero .odh-main { left: 0 !important; right: auto !important; transform: none !important; }
}
@media (max-width: 560px) {
  .odidact-page .odidact-hero { --odh-phone-copy: min(calc(100vw - 48px), 342px); }
  .odidact-page .odidact-hero .odh, .odidact-page .odidact-hero .odh-copy, .odidact-page .odidact-hero .odh-headline, .odidact-page .odidact-hero .odh-lede, .odidact-page .odidact-hero .odh-copy .odh-tags, .odidact-page .odidact-hero .odh-stack { width: var(--odh-phone-copy) !important; max-width: var(--odh-phone-copy) !important; }
  .odidact-page .odidact-hero .odh-copy .odh-tags { gap: 10px; }
  .odidact-page .odidact-hero .odh-stack { gap: 9px 12px !important; }
}
/* ===== section 03 balance repair: journey rail, connector, video frame ===== */
@media (min-width: 901px) {
  .odidact-page .oj-hero { width: calc(100% - var(--oj-text-rail)) !important; margin-left: var(--oj-text-rail) !important; grid-template-columns: minmax(0, 760px) minmax(280px, 360px) !important; column-gap: clamp(44px, 6vw, 92px) !important; align-items: end !important; }
  .odidact-page .oj-hero h2 { max-width: 760px !important; color: #071b86 !important; font-size: clamp(40px, 3.35vw, 48px) !important; letter-spacing: -0.045em !important; }
  .odidact-page .oj-hero h2 span { color: inherit !important; }
  .odidact-page .oj-journey-board { width: 100% !important; margin-top: clamp(24px, 3vh, 34px) !important; row-gap: clamp(22px, 2.5vh, 30px) !important; }
  .odidact-page .oj-path-line { display: block !important; clip-path: none !important; opacity: 0.9 !important; filter: drop-shadow(0 6px 14px rgba(92, 124, 255, 0.08)); z-index: 0 !important; }
  .odidact-page .oj-path-line path { stroke: rgba(116, 139, 255, 0.54) !important; stroke-width: 2.2 !important; stroke-dasharray: 5 7 !important; stroke-linecap: round !important; animation: oj-flow-dash 18s linear infinite; }
  .odidact-page .oj-step-top-dot, .odidact-page .oj-step-circle, .odidact-page .oj-step-index, .odidact-page .oj-step h3, .odidact-page .oj-step p { position: relative; z-index: 1; }
  .odidact-page .oj-step-circle { width: 100px !important; height: 100px !important; }
  .odidact-page .oj-step p { width: min(100%, 250px) !important; font-size: 14.5px !important; }
  .odidact-page .oj-card-row { column-gap: var(--oj-step-gap) !important; padding-left: var(--oj-sequence-pad) !important; padding-right: var(--oj-sequence-pad) !important; }
}
@keyframes oj-flow-dash {
  to { stroke-dashoffset: -112; }
}
/* ===== section 03 compare card repair ===== */
/* ===== section 04 solution system: fit-to-viewport repair ===== */
@media (min-width: 901px) {
  .odidact-page .os-hero-title { position: static !important; grid-column: 1 !important; width: min(100%, 650px) !important; margin: 0 !important; font-size: clamp(40px, 3.85vw, 54px) !important; line-height: 1.02 !important; letter-spacing: -0.055em !important; }
}
/* ===== section 05 key screens: sharp source images ===== */
@media (min-width: 901px) {
  .odidact-page .key-screens-shell { grid-template-columns: 390px minmax(0, 1fr) !important; gap: clamp(36px, 3.2vw, 58px) !important; }
  .odidact-page .key-screens-collage { display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.9fr) minmax(240px, 0.76fr) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; height: min(760px, calc(100vh - 124px)) !important; transform: none !important; contain: layout paint !important; }
  .odidact-page .key-shot { position: relative !important; inset: auto !important; display: block !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; transform: none; filter: none !important; overflow: hidden !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .odidact-page .key-shot--dashboard { grid-column: 1 !important; grid-row: 1 / 3 !important; justify-self: stretch !important; align-self: stretch !important; width: auto !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
  .odidact-page .key-shot--hero, .odidact-page .key-shot--live, .odidact-page .key-shot--footer { display: flex !important; flex-direction: column !important; gap: 9px !important; }
  .odidact-page .key-shot--hero { grid-column: 2 !important; grid-row: 1 !important; }
  .odidact-page .key-shot--live { grid-column: 2 !important; grid-row: 2 !important; }
  .odidact-page .key-shot--footer { grid-column: 3 !important; grid-row: 1 !important; }
  .odidact-page .key-shot--community { grid-column: 3 !important; grid-row: 2 !important; }
  .odidact-page .key-shot--community { display: flex !important; flex-direction: column !important; gap: 9px !important; }
  .odidact-page .key-shot img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: top center !important; border-radius: 14px !important; border: 1px solid rgba(160, 172, 210, 0.28) !important; background: #fff !important; filter: none !important; image-rendering: auto !important; backface-visibility: hidden; will-change: transform, opacity, filter !important; }
  .odidact-page .key-shot figcaption { position: absolute !important; left: 18px !important; top: 18px !important; z-index: 2 !important; margin: 0 !important; width: max-content !important; max-width: calc(100% - 36px) !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #071b86 !important; box-shadow: none !important; backdrop-filter: none !important; gap: 9px !important; font-size: 12px !important; line-height: 1 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }
  .odidact-page .key-shot figcaption b { display: inline-grid !important; place-items: center !important; width: 24px !important; height: 24px !important; border: 1px solid rgba(255, 79, 157, 0.26) !important; border-radius: 999px !important; background: rgba(255, 79, 157, 0.08) !important; color: #ff4f9d !important; font-size: 10px !important; letter-spacing: 0 !important; }
  .odidact-page .key-shot--dashboard figcaption { position: static !important; left: auto !important; top: auto !important; flex: 0 0 auto !important; color: rgba(7, 27, 134, 0.74) !important; }
  .odidact-page .key-shot--hero figcaption, .odidact-page .key-shot--live figcaption, .odidact-page .key-shot--footer figcaption, .odidact-page .key-shot--community figcaption { position: static !important; left: auto !important; top: auto !important; flex: 0 0 auto !important; color: rgba(7, 27, 134, 0.74) !important; }
  .odidact-page .key-shot--dashboard img { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; border: 1px solid rgba(160, 172, 210, 0.28) !important; border-radius: 14px !important; background: #fff !important; padding: 18px 14px !important; box-sizing: border-box !important; }
  .odidact-page .key-shot--hero img, .odidact-page .key-shot--live img, .odidact-page .key-shot--footer img, .odidact-page .key-shot--community img { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; }
  .odidact-page .key-shot--dashboard img, .odidact-page .key-shot--hero img, .odidact-page .key-shot--live img, .odidact-page .key-shot--footer img, .odidact-page .key-shot--community img { box-shadow: 0 18px 42px -24px rgba(9, 36, 111, 0.2) !important; }
}
/* ===== section 06 components board: clean spacing owner ===== */
@media (min-width: 901px) {
  .odidact-page .ods-right-wrap { --ods-board-gap: 18px; --ods-card-gap: 12px; --ods-card-pad-y: 14px; --ods-card-pad-x: 16px; }
}
/* ===== section 06 typography panel: left-column cleanup ===== */
/* ===== section 06 real Odidact component samples ===== */
/* ===== section 06 final 2x2 system balance ===== */
@media (min-width: 901px) {
  .odidact-page .ods-left-grid { grid-template-columns: 1fr !important; grid-template-rows: 535px 285px !important; gap: 18px !important; align-items: stretch !important; }
  .odidact-page .ods-left-grid .ods-type-panel, .odidact-page .ods-left-grid .ods-token-panel, .odidact-page .ods-right-wrap .ods-components-board, .odidact-page .ods-right-wrap .ods-layout-board { position: static !important; inset: auto !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; align-self: stretch !important; box-sizing: border-box !important; margin: 0 !important; }
  .odidact-page .ods-left-grid .ods-token-panel { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px 16px !important; padding: 18px 20px !important; overflow: hidden !important; }
  .odidact-page .ods-left-grid .ods-token-panel h2, .odidact-page .ods-left-grid .ods-token-panel .ods-panel-desc { grid-column: 1 / -1 !important; margin: 0 !important; }
}
/* ===== section 06 horizontal board reset ===== */
@media (min-width: 901px) {
  .odidact-page .ods-left-grid { position: absolute !important; display: block !important; margin: 0 !important; }
  .odidact-page .ods-right-wrap { position: absolute !important; align-items: stretch !important; margin: 0 !important; }
  .odidact-page .ods-right-wrap .ods-components-board, .odidact-page .ods-right-wrap .ods-token-panel, .odidact-page .ods-right-wrap .ods-layout-board { position: static !important; inset: auto !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; box-sizing: border-box !important; overflow: hidden !important; }
  .odidact-page .ods-right-wrap .ods-token-panel { display: flex !important; flex-direction: column !important; gap: 17px !important; padding: 22px 24px !important; }
  .odidact-page .ods-right-wrap .ods-token-panel h2 { margin: 0 0 -4px !important; }
}
/* ===== section 06 layout tokens use horizontal space ===== */
/* ===== section 06 final simplified system: type, color, layout ===== */
@media (min-width: 901px) {
  .odidact-page .ods-right-wrap > .ods-token-panel, .odidact-page .ods-right-wrap > .ods-layout-board { position: static !important; width: 100% !important; height: 100% !important; margin: 0 !important; min-height: 0 !important; overflow: hidden !important; box-sizing: border-box !important; }
}
/* ===== section 06 components proportion repair ===== */
/* ===== section 06 sane final layout after removing components ===== */
@media (min-width: 901px) {
  .odidact-page .ods-left-grid { left: 118px !important; top: 340px !important; width: 430px !important; height: 535px !important; }
  .odidact-page .ods-right-wrap { left: 590px !important; top: 340px !important; width: 1390px !important; height: 535px !important; display: grid !important; grid-template-columns: 420px 940px !important; grid-template-rows: 1fr !important; gap: 24px !important; }
  .odidact-page .ods-right-wrap > .ods-token-panel { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; height: 100% !important; padding: 24px !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
  .odidact-page .ods-right-wrap > .ods-token-panel h2, .odidact-page .ods-right-wrap > .ods-layout-board h2 { margin: 0 0 8px !important; font-size: 26px !important; line-height: 1 !important; }
}
/* ===== section 06 layout token cards: content-height, no empty wells ===== */
/* ===== section 06 layout usage band ===== */
/* ===== section 06 spacing bars exact thickness ===== */
/* ===== section 06 spacing bars visual consistency ===== */
/* ===== section 06 layout board flex cleanup ===== */
/* ===== section 06 layout board final fit ===== */
/* ===== section 06 compact balanced boards ===== */
@media (min-width: 901px) {
  .odidact-page .ods-left-grid, .odidact-page .ods-right-wrap { top: 340px !important; height: 465px !important; }
  .odidact-page .ods-left-grid .ods-type-panel, .odidact-page .ods-right-wrap > .ods-token-panel, .odidact-page .ods-right-wrap > .ods-layout-board { height: 100% !important; padding: 22px 24px !important; }
  .odidact-page .ods-left-grid .ods-type-panel h2, .odidact-page .ods-right-wrap > .ods-token-panel h2, .odidact-page .ods-right-wrap > .ods-layout-board h2 { font-size: 24px !important; margin-bottom: 5px !important; }
  .odidact-page .ods-right-wrap > .ods-token-panel { gap: 11px !important; }
}
/* ===== final nav polish ===== */
@media (min-width: 901px) {
  .odidact-page .od-bar { position: fixed !important; top: 16px !important; left: 50% !important; right: auto !important; width: min(1120px, calc(100vw - 48px)) !important; height: 58px !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto !important; align-items: center !important; gap: 12px !important; padding: 0 12px !important; transform: translateX(-50%) !important; pointer-events: auto !important; z-index: 120 !important; border: 1px solid rgba(160, 172, 210, 0.32) !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.78) !important; box-shadow: 0 20px 46px -28px rgba(9, 36, 111, 0.32) !important; backdrop-filter: blur(18px) saturate(1.12) !important; }
  .odidact-page .od-bar > * { pointer-events: auto !important; }
  .odidact-page .od-bar__back, .odidact-page .od-bar__next, .odidact-page .od-bar__brand, .odidact-page .od-bar__counter { box-shadow: none !important; }
  .odidact-page .od-bar__back, .odidact-page .od-bar__next { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; padding: 0 15px !important; color: #071b86 !important; font-size: 12px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -0.01em !important; text-decoration: none !important; border: 1px solid rgba(160, 172, 210, 0.34) !important; border-radius: 999px !important; background: rgba(247, 248, 255, 0.78) !important; transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease !important; }
  .odidact-page .od-bar__next { color: #ffffff !important; border-color: rgba(13, 18, 248, 0.24) !important; background: linear-gradient(90deg, #0d12f8 0%, #3313ff 100%) !important; }
  .odidact-page .od-bar__back:hover, .odidact-page .od-bar__next:hover { transform: translateY(-1px) !important; }
}
/* ===== final nav correction override ===== */
.odidact-page .od-bar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 120 !important; display: grid !important; align-items: center !important; transform: none !important; pointer-events: auto !important; }
.odidact-page .od-bar > * { pointer-events: auto !important; }
.odidact-page .od-bar__back, .odidact-page .od-bar__next { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: auto !important; line-height: 1 !important; text-decoration: none !important; transition: color 0.2s ease, transform 0.2s ease !important; }
.odidact-page .od-bar__back:hover, .odidact-page .od-bar__next:hover { color: #0d12f8 !important; transform: translateY(-1px) !important; }
@media (max-width: 900px) {
  .odidact-page .od-bar__brand em, .odidact-page .od-bar__next { display: none !important; }
}
/* ===== absolute final hero/nav fix ===== */
.odidact-page .od-bar { grid-template-columns: auto 1fr auto auto !important; gap: clamp(14px, 2vw, 28px) !important; padding: 0 clamp(18px, 4.4vw, 72px) !important; }
.odidact-page .od-bar__back, .odidact-page .od-bar__next { padding: 0 !important; color: #5a628c !important; font-size: 11px !important; font-weight: 850 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
@media (min-width: 901px) {
  .odidact-page .panel-hero { padding-top: 88px !important; }
  .odidact-page .odidact-hero .hero-shell { width: min(100%, 1420px) !important; margin-inline: auto !important; grid-template-columns: minmax(440px, 0.44fr) minmax(560px, 0.56fr) !important; gap: clamp(32px, 4vw, 72px) !important; align-items: center !important; }
  .odidact-page .odidact-hero .odh-copy { max-width: 610px !important; }
  .odidact-page .odidact-hero .odh-stage { margin-left: auto !important; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .odidact-page .odidact-hero .hero-shell { grid-template-columns: minmax(380px, 0.46fr) minmax(420px, 0.54fr) !important; gap: 28px !important; }
  .odidact-page .odidact-hero .odh-logo img { max-width: min(420px, 42vw) !important; }
  .odidact-page .odidact-hero .odh-headline { font-size: clamp(24px, 2.5vw, 30px) !important; }
}
@media (max-width: 900px) {
  .odidact-page .od-bar { height: 54px !important; grid-template-columns: auto 1fr auto !important; gap: 12px !important; padding: 0 16px !important; }
  .odidact-page .od-bar__next, .odidact-page .od-bar__counter span { display: none !important; }
  .odidact-page .panel-hero { padding-top: 74px !important; }
  .odidact-page .odidact-hero .hero-shell { display: flex !important; flex-direction: column !important; gap: 28px !important; min-height: 0 !important; }
  .odidact-page .odidact-hero .odh-copy { width: 100% !important; max-width: 640px !important; margin-inline: auto !important; }
  .odidact-page .odidact-hero .odh-logo img { width: min(420px, 82vw) !important; max-width: 100% !important; }
  .odidact-page .odidact-hero .odh-headline, .odidact-page .odidact-hero .odh-lede { width: 100% !important; max-width: 100% !important; }
  .odidact-page .odidact-hero .odh-headline { font-size: clamp(25px, 7.2vw, 34px) !important; line-height: 1.18 !important; }
  .odidact-page .odidact-hero .odh-stage { height: auto !important; min-height: clamp(380px, 86vw, 610px) !important; margin-inline: auto !important; }
}
@media (max-width: 560px) {
  .odidact-page .od-bar { gap: 10px !important; padding: 0 14px !important; }
  .odidact-page .od-bar__back { font-size: 0 !important; gap: 0 !important; }
  .odidact-page .od-bar__back span { font-size: 16px !important; }
  .odidact-page .odidact-hero .odh-headline { font-size: clamp(24px, 8vw, 31px) !important; }
}
/* ===== final responsive mockup height clamp ===== */
@media (max-width: 900px) {
  .odidact-page .odidact-hero .odh-main { min-height: 0 !important; aspect-ratio: auto !important; overflow: hidden !important; }
}
/* ===== safe restore: hero scale + plain navbar only ===== */
.odidact-page .odidact-hero .odh-headline { color: #071b86 !important; }
.odidact-page .odidact-hero .odh-headline em { color: #ff71b1 !important; }
.odidact-page .od-bar { height: 56px !important; background: rgba(251, 252, 255, 0.88) !important; border: 0 !important; border-bottom: 1px solid rgba(160, 172, 210, 0.22) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: blur(10px) !important; }
.odidact-page .od-bar__back, .odidact-page .od-bar__next, .odidact-page .od-bar__counter { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
@media (min-width: 901px) {
  .odidact-page .odidact-hero .odh-stage { width: min(58vw, 900px) !important; max-width: 900px !important; height: clamp(560px, 74vh, 700px) !important; min-height: 540px !important; }
}
/* ===== safe mobile fix: journey cards only ===== */
@media (max-width: 900px) {
  .odidact-page .oj-card-row { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; }
}
/* ===== safe desktop section gutter tuning ===== */
@media (min-width: 901px) {
  body.odidact-page { --rail: clamp(88px, 7vw, 118px); }
}
/* ========================================================= ODX-NAV — floating glass capsule with chapter stepper ========================================================= */
.odidact-page .odx-nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 140; display: flex; align-items: center; gap: 20px; height: 52px; padding: 0 10px 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.66); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 18px 44px -18px rgba(13, 18, 120, 0.28), 0 4px 14px -6px rgba(13, 18, 120, 0.14); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); overflow: hidden; }
/* brand */
/* stepper */
.odidact-page .odx-step { position: relative; width: 22px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(13, 18, 120, 0.13); cursor: pointer; overflow: hidden; transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease; }
.odidact-page .odx-step > i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #0d12f8, #3313ff 55%, #ff2f81); transform: scaleX(0); transform-origin: left center; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.odidact-page .odx-step.is-done > i { transform: scaleX(1); }
.odidact-page .odx-step.is-active { width: 40px; background: rgba(13, 18, 120, 0.1); }
.odidact-page .odx-step.is-active > i { transform: scaleX(1); }
.odidact-page .odx-step:hover { background: rgba(13, 18, 120, 0.22); }
/* readout */
/* next */
/* slim progress hairline along the very bottom of the capsule */
/* mobile: trim to brand + stepper */
@media (max-width: 900px) {
  .odidact-page .odx-nav { gap: 12px; height: 48px; padding: 0 8px 0 12px; top: 12px; max-width: calc(100vw - 24px); }
  .odidact-page .odx-step { width: 16px; height: 7px; }
  .odidact-page .odx-step.is-active { width: 28px; }
}
/* ========================================================= ODTOP — single top row (star left · links right) ========================================================= */
.odidact-page .odtop { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; justify-content: space-between; height: 60px; padding: 0 clamp(20px, 3vw, 40px); font-family: "Inter", sans-serif; pointer-events: none; }
.odidact-page .odtop > * { pointer-events: auto; }
.odidact-page .odtop__star { display: inline-flex; align-items: center; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.odidact-page .odtop__star svg { width: 26px; height: 26px; }
.odidact-page .odtop__star:hover { transform: rotate(90deg) scale(1.1); }
.odidact-page .odtop__links { display: inline-flex; align-items: center; }
.odidact-page .odtop__links a { position: relative; font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; color: #0f1336; text-decoration: none; transition: color 0.25s; }
.odidact-page .odtop__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px; background: #0d12f8; transform: scaleX(0); transform-origin: left center; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.odidact-page .odtop__links a:hover { color: #0d12f8; }
.odidact-page .odtop__links a:hover::after { transform: scaleX(1); }
.odidact-page .odtop__next { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px; border-radius: 999px; background: linear-gradient(180deg, #1a1fff, #0d12f8); font-weight: 800; box-shadow: 0 8px 18px -8px rgba(13, 18, 248, 0.6); }
.odidact-page .odtop__next span { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.odidact-page .odtop__next:hover { transform: translateY(-1px); }
.odidact-page .odtop__next:hover span { transform: translateX(3px); }
@media (max-width: 900px) {
  .odidact-page .odtop { height: 52px; padding: 0 16px; }
  .odidact-page .odtop__links { gap: 16px; }
}
/* star like the original: plain asterisk */
.odidact-page .odtop__star { font-size: 26px; font-weight: 600; line-height: 1; color: #0d12f8; text-decoration: none; }
.odidact-page .odtop__star svg { display: none; }
/* nav refinements: text-only links, bolder pink star */
.odidact-page .odtop__next { background: none !important; box-shadow: none !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; color: #0f1336 !important; font-weight: 700 !important; }
.odidact-page .odtop__next:hover { transform: none !important; color: #0d12f8 !important; }
.odidact-page .odtop__star { font-weight: 900 !important; color: #ff71b1 !important; }
/* ===== odtop: bigger, 3-zone balanced ===== */
.odidact-page .odtop { display: grid !important; align-items: center; height: 72px !important; padding: 0 clamp(26px, 3.4vw, 50px) !important; background: transparent; }
.odidact-page .odtop::before { content: ""; position: absolute; inset: 0 0 -22px 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0.64), rgba(255,255,255,0.34) 55%, rgba(255,255,255,0)); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
.odidact-page .odtop__star { font-size: 30px !important; margin-top: -6px; }
.odidact-page .odtop__links { gap: clamp(22px, 2.4vw, 38px); }
.odidact-page .odtop__links a { font-size: 14.5px !important; }
@media (max-width: 900px) {
  .odidact-page .odtop { height: 56px !important; grid-template-columns: auto 1fr auto !important; }
  .odidact-page .odtop__star { font-size: 24px !important; }
}
/* nav: no center title, keep star left + links right balanced */
.odidact-page .odtop { grid-template-columns: 1fr auto !important; }
.odidact-page .odtop__star { justify-self: start; }
.odidact-page .odtop__links { justify-self: end; }
/* nav text in dark blue */
.odidact-page .odtop__links a { color: #071b86 !important; }
.odidact-page .odtop__links a:hover { color: #0d12f8 !important; }
/* hero: desktop browser dominant, assistance card a smaller accent */
@media (min-width: 901px) {
  .odidact-page .odh-main { width: 100% !important; left: 0 !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2 !important; }
  .odidact-page .odh-phone { width: 30% !important; height: auto !important; aspect-ratio: 300 / 470 !important; right: -2% !important; left: auto !important; top: auto !important; bottom: 6% !important; z-index: 4 !important; }
  .odidact-page .odh-phone img { height: 100% !important; object-fit: cover !important; object-position: top center !important; }
}
/* ===== FINAL hero dominance: desktop big, assistance card small accent ===== */
@media (min-width: 901px) {
  .odidact-page .odidact-hero .odh-main { width: 100% !important; left: 0 !important; right: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; z-index: 2 !important; }
  .odidact-page .odidact-hero .odh-phone { width: clamp(190px, 14vw, 250px) !important; height: clamp(300px, 30vw, 400px) !important; aspect-ratio: auto !important; left: auto !important; right: -1.5% !important; top: auto !important; bottom: 5% !important; transform: none !important; z-index: 4 !important; }
  .odidact-page .odidact-hero .odh-phone img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; }
}
/* ========================================================= ONE-STORY PASS: tighter gutters, less dead space ========================================================= */
@media (min-width: 901px) {
  /* tighter, consistent gutter between every chapter */
  .odidact-page .section-panel { padding-left: 96px !important; padding-right: 96px !important; }
  /* shrink the over-wide Design System panel (had ~850px dead space) */
  /* solution + ending were centered with big side gaps: pull content left */
  .odidact-page .odidact-solution { justify-items: start !important; }
  .odidact-page .odidact-ending { justify-items: start !important; }
}
/* ending: minimal "Next Project" corner link (matches Ryujin/Fitness) */
.odidact-page .oi-next { position: absolute; right: clamp(50px, 5vw, 112px); bottom: clamp(44px, 6vh, 74px); display: grid; grid-template-columns: auto auto; grid-template-areas: "label arrow" "name arrow"; align-items: center; column-gap: 18px; row-gap: 2px; z-index: 6; text-decoration: none; }
.odidact-page .oi-next span { grid-area: label; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.odidact-page .oi-next strong { grid-area: name; color: var(--ink-strong); font-family: var(--serif); font-size: clamp(28px, 2.4vw, 36px); font-weight: 500; transition: color .3s ease; }
.odidact-page .oi-next i { grid-area: arrow; position: relative; display: grid; align-self: center; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font-style: normal; font-size: 0; line-height: 0; transition: background .3s ease, color .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.odidact-page .oi-next i::before, .odidact-page .oi-next i::after { content: ""; position: absolute; left: 50%; top: 50%; display: block; }
.odidact-page .oi-next i::before { width: 15px; height: 1.6px; background: currentColor; transform: translate(-50%, -50%); }
.odidact-page .oi-next i::after { width: 7px; height: 7px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: translate(calc(-50% + 5px), -50%) rotate(45deg); }
.odidact-page .oi-next:hover i { background: var(--accent); color: #fff; transform: translateX(3px); }
.odidact-page .oi-next:hover strong { color: var(--accent); }
@media (max-width: 900px) {
  .odidact-page .oi-next { position: static; margin-top: clamp(52px, 7vh, 64px); justify-content: flex-start; }
  .odidact-page .oi-next strong { font-size: 30px; }
  .odidact-page .oi-next i { width: 44px; height: 44px; }
}
/* mobile: the desktop vertical-centering transform on the impact cards must not leak to mobile (it shifted them up and left a gap before the Next Project link) */
@media (max-width: 900px) {
  .odidact-page .oi-top-grid { position: static !important; top: auto !important; left: auto !important; transform: none !important; width: auto !important; }
}
body.odidact-page.is-entering .hero-copy > *, body.odidact-page.is-entering .hero-visual { opacity: 0; transform: translateY(28px); }
@media (max-width: 900px) {
  body.odidact-page { background: radial-gradient(circle at 82% 9%, rgba(255, 113, 177, 0.08), transparent 28rem), radial-gradient(circle at 12% 36%, rgba(13, 18, 248, 0.07), transparent 30rem), linear-gradient(180deg, #fbfcff 0%, #f8faff 46%, #fbfcff 100%) !important; }
  .odidact-page .showcase-main { background: transparent !important; }
  .odidact-page .section-panel { min-height: auto !important; margin: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; }
  .odidact-page .section-panel::before, .odidact-page .section-panel::after { display: none !important; }
  .odidact-page .odidact-hero { min-height: 100svh !important; }
}
/* Final key-screen motion cleanup: figures and captions stay still; only the screen image itself is allowed to lift or reveal. */
.odidact-page .key-shot { transform: none !important; transform-style: flat !important; overflow: hidden !important; }
.odidact-page .key-shot figcaption, .odidact-page .key-shot figcaption * { transform: none !important; }
.odidact-page .key-shot img { display: block; will-change: transform, opacity, filter; transform-origin: 50% 50%; }
@media (min-width: 901px) {
  .odidact-page .key-screens-collage { gap: clamp(18px, 1.45vw, 28px) !important; }
}
/* Final mobile rhythm and scale pass. Keep the case study feeling like one continuous product story, while giving the first two mockups enough presence. */
@media (max-width: 900px) {
  .odidact-page .section-panel + .section-panel { margin-top: -1px !important; }
  .odidact-page .odidact-hero .odh-stage { margin-left: -5vw !important; margin-right: -5vw !important; }
  .odidact-page .odidact-hero .odh-main { max-height: none !important; }
  .odidact-page .odidact-hero .odh-main__view { aspect-ratio: auto !important; }
  .odidact-page .odidact-challenge .challenge-visual { order: 4 !important; margin-top: clamp(18px, 3vh, 30px) !important; }
  .odidact-page .odidact-challenge .challenge-visual img { margin-left: -6% !important; }
  .odidact-page .odidact-challenge .challenge-grid { display: flex !important; flex-direction: column !important; }
  .odidact-page .odidact-challenge .challenge-copy { display: contents !important; }
  .odidact-page .odidact-challenge .challenge-copy .sec-eyebrow { order: 1 !important; }
  .odidact-page .odidact-challenge .challenge-copy h2 { order: 2 !important; }
  .odidact-page .odidact-challenge .challenge-copy > p { order: 3 !important; }
  .odidact-page .odidact-challenge .friction-grid { order: 5 !important; margin-top: clamp(22px, 4vh, 34px) !important; }
  .odidact-page .sol-info { display: grid !important; grid-template-columns: 42px auto minmax(0, 1fr) !important; grid-template-areas: "icon num name" "bullets bullets bullets" !important; align-items: center !important; column-gap: 10px !important; row-gap: 12px !important; }
  .odidact-page .sol-info > .sol-ic { grid-area: icon !important; margin: 0 !important; }
  .odidact-page .sol-info > .sol-num { grid-area: num !important; margin: 0 !important; white-space: nowrap !important; }
  .odidact-page .sol-info > .sol-num::before { content: "Loop "; }
  .odidact-page .sol-info > .sol-name { grid-area: name !important; margin: 0 !important; line-height: 1.05 !important; }
  .odidact-page .sol-info > .sol-bullets { grid-area: bullets !important; margin-top: 0 !important; }
}
/* ========================================================================= AUTHORITATIVE MOBILE FIXES (<=900px) Appended last so it wins over the accumulated mobile blocks above. Fixes the reported issues: edge-bleeding hero/section images, misaligned eyebrows, and an inconsistent section rhythm. (Full cleanup of the older duplicate mobile blocks is deferred to the planned audit pass.) ========================================================================= */
@media (max-width: 900px) {
  /* 1. Consistent, tighter vertical rhythm on every chapter (reduce the big gaps above the eyebrows, e.g. hero mockup -> 02, content -> User Journey). */
  .odidact-page .section-panel { padding-top: clamp(36px, 4.5vh, 52px) !important; padding-bottom: clamp(36px, 4.5vh, 52px) !important; }
  .odidact-page .odidact-hero { padding-top: clamp(74px, 9vh, 98px) !important; }
  /* 2. Eyebrows: always left-aligned to the section content edge, with a consistent eyebrow->heading gap matching the Design System section. */
  .odidact-page .sec-eyebrow { align-self: start !important; justify-self: start !important; margin-left: 0 !important; padding-left: 0 !important; margin-bottom: 30px !important; }
  /* zero per-section heading margins so the eyebrow gap is the single source */
  .odidact-page .section-panel h2, .odidact-page .jr-title, .odidact-page .sol-title, .odidact-page .ds-title, .odidact-page .key-title { margin-top: 0 !important; }
  /* Some sections wrap the heading in a flex/grid container whose gap STACKS on top of the eyebrow margin (challenge-grid 38, jr-inner 32, key copy 16), making 02/03/05 gaps bigger than 04/06. Neutralise each so the eyebrow-> heading gap is ~30px everywhere (matching the Solution/Design System). */
  .odidact-page .odidact-challenge .sec-eyebrow { margin-bottom: -8px !important; }
  .odidact-page .jr .sec-eyebrow { margin-bottom: -2px !important; }
  .odidact-page .odidact-key-screens .sec-eyebrow { margin-bottom: 14px !important; }
  /* 3. Hero mockup: contained inside the screen (no side bleed) but still large via a cover crop. Overrides the earlier full-bleed -5vw rules. */
  .odidact-page .odidact-hero .odh-stage { width: 100% !important; max-width: 100% !important; margin: 10px 0 0 !important; overflow: visible !important; }
  .odidact-page .odidact-hero .odh-main { width: 100% !important; max-width: 100% !important; height: clamp(240px, 62vw, 380px) !important; margin: 0 auto !important; }
  .odidact-page .odidact-hero .odh-main__view { height: 100% !important; }
  .odidact-page .odidact-hero .odh-main__view img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; }
  /* 4. Section-2 (challenge) image: centred, no edge bleed */
  .odidact-page .odidact-challenge .challenge-visual { width: 100% !important; max-width: 440px !important; min-height: 0 !important; margin: clamp(18px, 3vh, 30px) auto 0 !important; overflow: visible !important; }
  .odidact-page .odidact-challenge .challenge-visual img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; }
}
/* Desktop: the first-section hero mockup overflows ~66px into the next (challenge) section, which — being a later sibling at the same z-index — painted over the mockup's right edge (visible when zoomed out). Raise the hero above the adjacent section so the mockup stays in the foreground. */
@media (min-width: 901px) {
  .odidact-page .odidact-hero { z-index: 5 !important; }
}