/* Product discovery and examples, extending the established IntraBis identity. */
.marketing h1 { font-family: Manrope, Inter, sans-serif; letter-spacing: -.045em; }
.marketing #site-nav > .nav-cta { background: #1754cd; border-color: #1754cd; color: #fff; }
.marketing #site-nav > .nav-cta:hover { background: #0c40a9; color: #fff; }
/* Only the header surface changes width; navigation columns stay aligned. */
.marketing-home .site-header { --header-bar-inset: max(2rem, calc((100% - 75rem) / 2)); --header-bar-top: 1rem; --header-bar-radius: 1rem; --header-bar-ease: cubic-bezier(.22, 1, .36, 1); min-height: calc(var(--header-height) + 1px); background: transparent; border-bottom: 0; }
.marketing-home .site-header::before { content: ''; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 4.5rem; background: #fff; border: 1px solid transparent; border-bottom-color: #e2e8f2; border-radius: 0; box-shadow: 0 0 0 #06183900; pointer-events: none; transition: top .45s var(--header-bar-ease), left .45s var(--header-bar-ease), right .45s var(--header-bar-ease), border-radius .45s var(--header-bar-ease), border-color .45s var(--header-bar-ease), box-shadow .45s var(--header-bar-ease); }
.marketing-home .site-header[data-floating="true"]::before { top: var(--header-bar-top); left: var(--header-bar-inset); right: var(--header-bar-inset); border-color: #e2e8f2; border-radius: var(--header-bar-radius); box-shadow: 0 6px 20px #0618391a; }
.marketing-home .site-header .header-inner { position: absolute; z-index: 1; top: 0; left: 0; right: 0; min-height: 4.5rem; display: grid; grid-template-columns: 8rem minmax(0, 1fr) 10.5rem; align-items: center; gap: 1.25rem; padding-inline: 1.25rem; background: transparent; border: 1px solid transparent; border-radius: var(--header-bar-radius); box-shadow: none; transition: top .45s var(--header-bar-ease); }
.marketing-home .site-header[data-floating="true"] .header-inner { top: var(--header-bar-top); }
.marketing-home .hero-marketing { margin-top: calc(-1 * (var(--header-height) + 1px)); padding-top: calc(var(--header-height) + 1px); }
.marketing-home .site-header .brand { grid-column: 1; min-width: 0; }
.marketing-home .site-header .brand img { width: 8rem; }
.marketing-home .site-header #site-nav { grid-column: 2; position: static; display: flex; justify-content: center; align-items: center; gap: 1.5rem; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.marketing-home .site-header #site-nav > a { padding-block: .75rem; }
.marketing-home .site-header .access-anchor { grid-column: 3; width: 10.5rem; margin-top: 0; }
.marketing-home .site-header .access-size { height: 2.75rem; min-height: 0; padding: 0; }
.marketing-home .site-header .menu-toggle { display: none; }
@media (max-width: 1020px) {
  .marketing-home .site-header .header-inner { grid-template-columns: minmax(0, 1fr) max-content 10.5rem; gap: .75rem; }
  .marketing-home .site-header .menu-toggle { grid-column: 2; display: inline-flex; min-height: 2.75rem; }
  .marketing-home .site-header #site-nav { grid-column: 1 / -1; display: none; position: absolute; top: calc(100% + .5rem); left: 0; right: 0; padding: .75rem; background: #fff; border: 1px solid var(--line); border-radius: .75rem; box-shadow: 0 8px 20px #0618391a; }
  .marketing-home .site-header #site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; }
  .marketing-home .site-header #site-nav > a { min-height: 2.75rem; padding: .65rem .7rem; }
}
@media (max-width: 900px) {
  .marketing-home .site-header { --header-bar-top: .75rem; }
}
@media (max-width: 640px) {
  .marketing-home .site-header { --header-bar-inset: 1.125rem; }
}
@media (max-width: 480px) {
  .marketing-home .site-header { --header-bar-inset: .75rem; --header-bar-radius: .75rem; }
  .marketing-home .site-header .header-inner { width: calc(100% - 1.5rem); grid-template-columns: minmax(0, 1fr) 2.75rem 8rem; gap: .5rem; padding-inline: .75rem; border-radius: .75rem; }
  .marketing-home .site-header .menu-toggle { justify-content: center; width: 2.75rem; padding: .5rem; }
  .marketing-home .site-header .menu-toggle > span:not(.menu-icon) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .marketing-home .site-header .access-anchor { width: 8rem; }
  .marketing-home .site-header .access-trigger { font-size: .8125rem; }
  .marketing-home .site-header .access-trigger-label { left: .625rem; right: 1.75rem; }
  .marketing-home .site-header .access-trigger-icon { right: .625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .marketing-home .site-header::before, .marketing-home .site-header .header-inner { transition: none; }
}
/* One shared surface grows from the existing header action's footprint. */
.access-anchor { position: relative; flex-shrink: 0; }
.access-size { display: block; padding: .65rem 1rem; border: 1px solid transparent; font-size: .9375rem; font-weight: 650; line-height: 1.65; white-space: nowrap; visibility: hidden; }
.access-surface { position: absolute; z-index: 2; top: 0; right: 0; width: 100%; height: var(--access-closed-height, 100%); padding: 0; overflow: hidden; background: #1754cd; border-radius: .65rem; box-shadow: 0 0 0 transparent; transition: width .6s ease, height .6s ease, border-radius .6s ease, background .6s ease, box-shadow .6s ease; }
.access-anchor[data-open="true"] .access-surface { width: var(--access-open-width, 420px); height: var(--access-open-height, 270px); background: #fff; border-radius: 1.25rem; box-shadow: 0 18px 42px #10254b24, 0 4px 12px #10254b14, inset 0 0 0 1px var(--line); transition: width .6s cubic-bezier(0, 1, .66, 1), height .6s cubic-bezier(0, 1.22, .66, 1.39), border-radius .6s ease, background .6s ease, box-shadow .6s ease; }
.access-trigger { position: absolute; z-index: 2; top: 0; right: 0; display: block; width: 100%; height: var(--access-closed-height, 100%); margin: 0; padding: 0; border: 0; border-radius: .65rem; background: transparent; color: #fff; font-size: .9375rem; font-weight: 650; line-height: 1.5; white-space: nowrap; transition: color .3s ease; }
.access-anchor[data-open="true"] .access-trigger { width: 2.75rem; color: #56677d; border-radius: 0 1.25rem 0 0; }
.access-trigger-label { position: absolute; left: 1rem; right: 2.5rem; top: 50%; transform: translateY(-50%); text-align: center; opacity: 1; transition: opacity .2s ease .3s; }
.access-anchor[data-open="true"] .access-trigger-label { opacity: 0; transition: opacity .08s ease; }
.access-trigger-icon { position: absolute; right: .9375rem; top: 50%; display: flex; width: 1rem; height: 1rem; transform: translateY(-50%); transition: opacity .18s ease, transform .6s ease; }
.access-trigger-icon .icon { width: 1rem; height: 1rem; }
.access-close { opacity: 0; transform: translateY(-50%) rotate(-90deg); }
.access-anchor[data-open="true"] .access-chevron { opacity: 0; transform: translateY(-50%) rotate(180deg); }
.access-anchor[data-open="true"] .access-close { opacity: 1; transform: translateY(-50%) rotate(0); }
.access-content { position: absolute; top: 0; right: 0; width: var(--access-open-width, 420px); max-height: var(--access-max-height, none); padding: 0 1.375rem 1.25rem; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .1s ease, visibility 0s linear .1s; }
.access-anchor[data-open="true"][data-content-ready="true"] .access-content { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s ease, visibility 0s; }
.access-top { display: flex; align-items: center; min-height: var(--access-closed-height, 3rem); padding-right: 1.75rem; }
.access-tabs { display: flex; align-items: center; gap: 1.25rem; }
.access-tab { min-height: 2.75rem; padding: .625rem 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #56677d; font-size: .875rem; font-weight: 500; line-height: 1.5; }
.access-tab[aria-selected="true"] { border-bottom-color: #1754cd; color: #1754cd; font-weight: 650; }
.access-panel h2 { margin: 1.25rem 0 .625rem; color: var(--ink); font-size: 1.4375rem; font-weight: 650; line-height: 1.22; letter-spacing: -.03em; }
.access-panel p { margin: 0 0 1.375rem; color: #56677d; font-size: 1rem; line-height: 1.5; }
.access-action { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 3rem; padding: .8125rem .9375rem; border-radius: .625rem; background: #ffad2d; color: #192745; font-size: .9375rem; font-weight: 650; line-height: 1.5; }
.access-action:hover { background: #ffb94b; }
.access-action .icon { width: 1.125rem; height: 1.125rem; }
.access-note { margin: 1rem 0 0; color: #56677d; font-size: .8125rem; line-height: 1.5; }
@media (max-width: 1100px) { .access-size, .access-trigger { font-size: .875rem; } }
@media (max-width: 900px) { .access-anchor { margin-top: .5rem; } .access-size { min-height: 2.8rem; padding: .65rem 1rem; text-align: center; } }
@media (max-width: 600px) { .access-content { padding-inline: 1.25rem; } .access-anchor[data-open="true"] .access-surface { border-radius: 1.125rem; } }
@media (prefers-reduced-motion: reduce) { .access-surface, .access-anchor[data-open="true"] .access-surface, .access-trigger, .access-trigger-label, .access-anchor[data-open="true"] .access-trigger-label, .access-trigger-icon, .access-content, .access-anchor[data-open="true"][data-content-ready="true"] .access-content { transition: none; } }
.marketing .hero-marketing { background: radial-gradient(ellipse at 95% 15%, #2c60dc 0, transparent 55%), linear-gradient(115deg, #0d2057, #193e9c); }
.hero-marketing .hero-grid { grid-template-columns: 1.06fr 1fr; gap: 3rem; align-items: center; }
.hero-marketing h1 { font-size: clamp(2.25rem, 3.7vw, 3.15rem); line-height: 1.15; font-weight: 800; }
.hero-marketing h1 span { color: #ffac39; }
.hero-marketing .hero-description { max-width: 47ch; font-size: 1.0625rem; line-height: 1.8; margin-top: 1.25rem; }
.hero-marketing .hero-actions { flex-wrap: wrap; gap: .7rem; }
.hero-free { margin-top: 1.2rem; display: grid; gap: .2rem; color: #d8e3f9; font-size: .875rem; }
.hero-free strong { color: #fff; font-weight: 650; }
.hero-example { min-width: 0; }
.hero-example-link { display: flex; align-items: center; justify-content: center; gap: .65rem; margin-top: 1rem; font-size: .9375rem; color: #fff; font-weight: 650; }
.hero-example-link .icon { width: 1.05rem; height: 1.05rem; }
.hero-foundation a { color: inherit; font-weight: 550; }
.hero-foundation a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.demo-board { min-width: 0; background: #fff; border: 1px solid #dce5f3; border-radius: 1.15rem; padding: 1.4rem; box-shadow: 0 12px 35px #19355d0b; color: var(--ink); }
.hero-board { box-shadow: 0 18px 45px #00144235; border: 7px solid #ffffff15; background-clip: padding-box; }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.board-brand { display: flex; gap: .5rem; align-items: center; font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 1.0625rem; }
.board-brand .icon { color: #245bca; width: 1.25rem; height: 1.25rem; }
.sample-label { display: inline-block; color: #69758a; font-size: .8125rem; line-height: 1.6; font-weight: 500; }
.board-title { display: grid; gap: .35rem; padding-block: 1.15rem 1rem; }
.board-title strong { font-family: Manrope, Inter, sans-serif; font-weight: 750; font-size: 1.35rem; line-height: 1.35; letter-spacing: -.025em; }
.board-title > span { font-size: .9375rem; color: #66758e; }
.board-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.board-stats > div { display: grid; align-content: start; gap: .3rem; background: #edf4ff; padding: .85rem 1rem; border-radius: .7rem; }
.board-stats span { font-size: .8125rem; color: #617496; }
.board-stats strong { font-family: Manrope, Inter, sans-serif; color: #174897; font-size: 1.45rem; line-height: 1.4; letter-spacing: -.025em; }
.board-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-width: 0; border-bottom: 1px solid #e9eef6; padding: .7rem .6rem; border-radius: .35rem; font-size: .9375rem; }
.board-row:last-child { border-bottom: 0; }
.board-row > span { min-width: 0; }
.board-row.is-highlight { background: #f2f6ff; }
.status { display: inline-block; padding: .2rem .5rem; border-radius: .4rem; color: #285c8b; background: #eaf4fb; font-weight: 600; font-size: .8125rem; line-height: 1.5; text-align: center; }
.status-warm { background: #fff2dc; color: #835819; }
.board-foot { display: flex; align-items: flex-start; gap: .6rem; color: #61718a; font-size: .875rem; line-height: 1.6; padding-top: .9rem; margin-top: .6rem; border-top: 1px solid #e5ebf4; }
.board-foot .icon { width: 1.05rem; height: 1.05rem; margin-top: .2rem; color: #2c6aaf; }
.needs-section { background: #fff; }
.need-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.need-card { padding: 1.25rem; background: #f6f8fc; border: 1px solid #e6ebf4; border-radius: .85rem; display: flex; flex-direction: column; align-items: flex-start; transition: border-color .18s, background .18s; }
.need-card:hover { background: #eef4ff; border-color: #aec7f8; }
.need-icon, .product-icon { display: inline-flex; align-items: center; justify-content: center; background: #e7efff; color: #235cc7; border-radius: .7rem; width: 2.6rem; height: 2.6rem; flex-shrink: 0; }
.need-card h3 { font-size: 1.125rem; font-weight: 750; line-height: 1.45; letter-spacing: -.02em; margin: .9rem 0 1.1rem; }
.need-route { display: flex; gap: .45rem; align-items: center; color: #1c54b7; font-size: .9375rem; font-weight: 650; margin-top: auto; }
.need-route .icon { width: 1rem; height: 1rem; }
.catalog-section { background: #f6f8fc; border-block: 1px solid #eaf0f7; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.product-card { background: #fff; border: 1px solid #dee6f2; border-radius: 1rem; padding: 1.5rem; display: flex; align-items: flex-start; flex-direction: column; }
.product-card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: .85rem; }
.product-number { color: #c2cfe3; font-family: Manrope, Inter, sans-serif; font-size: 1.45rem; font-weight: 700; }
.product-penjualan .product-icon, .product-keuangan .product-icon { color: #995913; background: #fff1dc; }
.product-role { color: #67758d; font-size: .8125rem; font-weight: 600; margin-bottom: .35rem; }
.product-card h3 { font-size: 1.45rem; line-height: 1.35; letter-spacing: -.035em; font-weight: 800; }
.product-card > p:not(.product-role) { margin-top: .6rem; color: #65728a; font-size: 1rem; line-height: 1.65; max-width: 44ch; }
.module-tags { display: flex; flex-wrap: wrap; padding: 0; list-style: none; gap: .4rem; margin: 1rem 0 1.1rem; }
.module-tags li { border: 1px solid #e4eaf3; border-radius: .4rem; color: #55677e; padding: .25rem .5rem; font-size: .8125rem; line-height: 1.5; background: #f9fbff; }
.product-link { margin-top: auto; display: flex; align-items: center; gap: .7rem; color: #1b55c4; font-weight: 750; min-height: 2rem; }
.product-link .icon { width: 1.15rem; height: 1.15rem; }
.product-link:hover { text-decoration: underline; text-underline-offset: 5px; }
/* Approved editorial layout, scoped to the extended ERP component. */
.erp-editorial { background: #fff; border-radius: 1rem; margin-top: 1.25rem; padding: 2rem; scroll-margin-top: 6rem; }
.erp-editorial-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.65fr); gap: 3rem; align-items: stretch; }
.erp-editorial-intro { min-width: 0; padding-top: .3rem; }
.erp-editorial-intro h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.35; letter-spacing: -.035em; font-weight: 800; margin-top: .85rem; }
.erp-editorial-intro h3 span { color: #1754cd; }
.erp-editorial-intro > p:not(.erp-editorial-eyebrow) { color: #60728e; font-size: .9375rem; line-height: 1.7; margin-top: .75rem; max-width: 35ch; }
.erp-editorial .erp-editorial-eyebrow { display: flex; align-items: center; gap: .5rem; color: #a45d10; font-size: .8125rem; font-weight: 700; line-height: 1.5; letter-spacing: .025em; }
.erp-editorial-eyebrow::before { content: ''; flex: 0 0 .375rem; width: .375rem; height: .375rem; border-radius: 50%; background: #db7e0d; }
.erp-editorial-contact { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; margin-top: .75rem; padding-block: .5rem; color: #1754cd; font-size: .9375rem; line-height: 1.5; font-weight: 750; }
.erp-editorial-contact .icon { flex-shrink: 0; width: 1.125rem; height: 1.125rem; }
.erp-editorial-contact:hover { text-decoration: underline; text-underline-offset: 5px; }
.erp-editorial-modules { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); min-width: 0; }
.erp-editorial-module { display: grid; grid-template-columns: minmax(12rem, .85fr) minmax(0, 1.15fr); align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid #e1e8f3; }
.erp-editorial-module:first-child { padding-top: .3rem; }
.erp-editorial-module:last-child { padding-bottom: .3rem; border-bottom: 0; }
.erp-editorial-label { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.erp-editorial-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: #eef4ff; color: #1754cd; }
.erp-editorial-icon .icon { width: 1.25rem; height: 1.25rem; }
.erp-editorial-module h4 { font-size: 1.0625rem; line-height: 1.4; letter-spacing: -.015em; font-weight: 750; }
.erp-editorial-scope { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; padding: 0; margin: 0; list-style: none; min-width: 0; }
.erp-editorial-scope li { max-width: 100%; padding: .25rem .5rem; border: 1px solid #e1e8f3; border-radius: .35rem; background: #f9fbfe; color: #60728e; font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
.erp-editorial .erp-editorial-note { border-top: 1px solid #e1e8f3; padding-top: 1rem; margin-top: 1.4rem; color: #64738b; font-size: .875rem; line-height: 1.7; max-width: none; }
.example-section { background: linear-gradient(130deg, #fff, #f2f6ff); border-bottom: 1px solid #e7edf6; }
.example-tabs { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1.5rem; }
.example-tabs button { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.example-panels { min-width: 0; }
.example-tabs button, .step-tabs button { min-height: 3rem; border: 1px solid #dce5f3; background: #fff; border-radius: .65rem; color: #596d8d; padding: .7rem .85rem; font-size: 1rem; line-height: 1.5; font-weight: 650; }
.example-tabs button[aria-selected="true"], .step-tabs button[aria-selected="true"] { background: #164eae; color: #fff; border-color: #164eae; }
.example-tabs button:hover:not([aria-selected="true"]), .step-tabs button:hover:not([aria-selected="true"]) { background: #eaf1fe; color: #194faa; }
.example-tabs[data-indicator-ready="true"] button[aria-selected="true"] { background: #fff; border-color: #dce5f3; color: #596d8d; }
.example-tab-indicator { display: none; position: absolute; z-index: 1; top: 0; left: 0; width: var(--example-tab-width); height: var(--example-tab-height); border-radius: .65rem; overflow: hidden; background: #164eae; pointer-events: none; transform: translate3d(var(--example-tab-x), var(--example-tab-y), 0); }
.example-tabs[data-indicator-ready="true"] .example-tab-indicator { display: block; transition: transform .34s cubic-bezier(.22, 1, .36, 1), width .34s cubic-bezier(.22, 1, .36, 1), height .34s cubic-bezier(.22, 1, .36, 1); }
.example-tab-indicator-labels { position: absolute; top: 0; left: 0; width: var(--example-tabs-width); height: var(--example-tabs-height); transform: translate3d(calc(-1 * var(--example-tab-x)), calc(-1 * var(--example-tab-y)), 0); transition: transform .34s cubic-bezier(.22, 1, .36, 1); }
.example-tab-label { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid transparent; color: #fff; text-align: center; white-space: normal; }
.example-tabs[data-indicator-measuring="true"] .example-tab-indicator, .example-tabs[data-indicator-measuring="true"] .example-tab-indicator-labels { transition: none; }
.example-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; min-width: 0; }
.example-copy { min-width: 0; }
.example-copy h3 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.35; max-width: 28ch; }
.example-copy > p:not(.eyebrow) { color: #62728d; font-size: 1rem; margin-top: .85rem; line-height: 1.75; max-width: 48ch; }
.example-steps { padding: 0; margin: 1.25rem 0; list-style: none; display: grid; gap: 1rem; }
.example-steps li { display: flex; gap: .85rem; align-items: flex-start; }
.example-steps li > span { flex-shrink: 0; color: #2962bc; font-size: .8125rem; font-weight: 700; padding-top: .2rem; }
.example-steps strong { font-size: 1rem; font-weight: 700; }
.example-steps p { color: #63738d; font-size: .9375rem; line-height: 1.65; margin-top: .25rem; }
.board-small { color: #6d7c94; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; }
.seat-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin-top: .7rem; }
.seat { border-radius: .45rem; background: #eef3fb; color: #4b6590; display: flex; align-items: center; justify-content: center; min-height: 2.2rem; font-size: .8125rem; font-weight: 650; }
.seat-taken { background: #dce3ec; color: #69798e; }
.seat-picked { background: #ffb13d; color: #4d3512; outline: 2px solid #ffcc7c; outline-offset: 1px; }
.seat-detail { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .6rem; min-width: 0; }
.seat-detail > strong { font-family: Manrope, Inter, sans-serif; font-size: 2.8rem; line-height: 1; color: #2a5aab; }
.seat-detail > span:not(.board-small):not(.status) { font-size: .875rem; color: #68778e; }
.channel-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.channel-pills span { background: #f1f5fb; border: 1px solid #e1e8f3; color: #5c6d87; border-radius: .4rem; font-size: .8125rem; padding: .25rem .5rem; }
.sample-ticket { display: flex; justify-content: space-between; gap: 1rem; align-items: center; background: #eef4ff; border: 1px solid #dbe7fb; border-radius: .75rem; padding: 1rem; margin-bottom: .75rem; }
.sample-ticket > div:first-child { display: grid; gap: .3rem; }
.sample-ticket strong { color: #234b96; font-size: 1.25rem; }
.sample-ticket > div:first-child > span:last-child { font-size: .875rem; color: #607493; }
.ticket-seat { display: grid; text-align: center; padding-left: 1rem; border-left: 1px dashed #b9cdeb; font-size: .8125rem; color: #6981a2; }
.ticket-seat strong { font-family: Manrope, Inter, sans-serif; font-size: 2rem; }
.network-story { background: #f6f8fc; }
.channel-map { display: grid; grid-template-columns: .65fr 2fr; gap: 1.5rem; border: 1px solid #dce5f4; background: #fff; border-radius: 1rem; padding: 1.5rem; align-items: center; }
.inventory-hub { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .5rem; border-right: 1px solid #dae3f3; padding-right: 1.25rem; }
.inventory-hub > .icon { width: 2rem; height: 2rem; color: #2b61bc; margin-bottom: .3rem; }
.inventory-hub strong { font-size: 1.15rem; font-family: Manrope, Inter, sans-serif; font-weight: 800; line-height: 1.4; }
.inventory-hub span { font-size: .8125rem; color: #697b96; }
.channel-map-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.channel-map-items h3 { font-size: 1.0625rem; font-weight: 750; line-height: 1.4; }
.channel-map-items p { color: #65758f; font-size: .9375rem; line-height: 1.7; margin-top: .5rem; }
.journey-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.journey-cards article { background: #fff; border: 1px solid #dfe6f2; border-radius: .85rem; padding: 1.5rem; }
.journey-cards h3 { font-size: 1.3rem; line-height: 1.4; letter-spacing: -.025em; }
.journey-cards p:not(.eyebrow) { color: #65758e; font-size: .9375rem; line-height: 1.75; margin-top: .85rem; }
.journey-cards .sample-label { margin-top: .7rem; }
.mini-route { display: flex; align-items: center; gap: .65rem; margin-top: 1rem; }
.mini-route span { display: block; background: #edf3ff; color: #285cae; border: 1px solid #dce7fc; border-radius: .55rem; padding: .6rem .85rem; font-size: .9375rem; font-weight: 700; }
.mini-route .icon { width: 1.1rem; height: 1.1rem; color: #6a86b2; }
.network-more { display: inline-block; margin-top: 1.1rem; }
.activation-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; border-top: 1px solid #e1e7f1; padding-top: 1.75rem; margin-top: 2rem; }
.activation-path > div { display: grid; grid-template-columns: 2rem 1fr; gap: .3rem .6rem; align-items: start; }
.activation-path > div > span { grid-row: 1/3; color: #4171c6; font-size: .8125rem; font-weight: 750; padding-top: .2rem; }
.activation-path strong { font-size: 1rem; font-weight: 700; }
.activation-path p { color: #67758b; font-size: .9375rem; line-height: 1.65; }
.free-cta { margin-top: 1.2rem; }
.family-banner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; border: 1px solid #dce5f3; border-radius: 1rem; padding: 1.75rem; align-items: center; }
.family-banner h2 { font-size: 1.65rem; }
.family-banner p:not(.eyebrow) { margin-top: .75rem; color: #66758e; font-size: .9375rem; line-height: 1.75; max-width: 54ch; }
.family-destination { display: grid; justify-items: center; gap: 1rem; padding: .5rem 1rem; }
.family-destination img { width: 14rem; }
.start-direct { margin-top: 1.25rem; }
.brief-heading { font-family: Manrope, Inter, sans-serif; font-size: 1.125rem; font-weight: 750; margin-bottom: 1.1rem; }
.marketing .footer-top { flex-wrap: wrap; }
.marketing .footer-top nav { flex-wrap: wrap; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .875rem; color: #6b7b96; margin-bottom: 1.75rem; }
.breadcrumb a { color: #3466b3; }
.detail-hero { background: radial-gradient(ellipse at 100% 0, #e6f0ff, transparent 65%), #f6f9fe; border-bottom: 1px solid #e5edf8; }
.detail-hero-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 3rem; align-items: center; }
.detail-hero h1 { font-size: clamp(2rem, 3.1vw, 2.8rem); line-height: 1.2; font-weight: 800; }
.detail-eyebrow { margin: 1rem 0 .7rem; }
.detail-intro { color: #62718a; margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.8; max-width: 48ch; }
.detail-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.button-outline { color: #2457af; background: #fff; border: 1px solid #b9cbea; }
.button-outline:hover { background: #edf3fd; }
.detail-note { margin-top: 1rem; color: #6a7990; font-size: .875rem; }
.challenge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.challenge-grid article { border-top: 2px solid #d4e1f6; padding-top: 1rem; }
.challenge-number { font-size: .875rem; color: #6a82a9; font-weight: 700; }
.challenge-grid p { font-family: Manrope, Inter, sans-serif; font-size: 1.125rem; line-height: 1.65; margin-top: .65rem; font-weight: 650; }
.step-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.75rem; }
.step-tabs button { display: flex; align-items: center; gap: .75rem; text-align: left; }
.step-tabs button > span { font-size: .8125rem; opacity: .8; }
.detail-example-panel { gap: 3rem; }
.example-result { border-left: 3px solid #ff9d24; padding-left: 1rem; margin: 1.5rem 0; }
.example-result strong { color: #314d77; font-size: .9375rem; }
.example-result p { color: #66758e; font-size: 1rem; margin-top: .5rem; line-height: 1.75; }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.capability-grid article { background: #f7f9fd; border: 1px solid #e3eaf5; padding: 1.5rem; border-radius: .85rem; }
.capability-grid h3 { font-size: 1.2rem; line-height: 1.4; letter-spacing: -.02em; margin-top: 1rem; }
.capability-grid p { color: #64728a; font-size: 1rem; line-height: 1.75; margin-top: .65rem; }
.detail-confirm { background: #f6f8fc; }
.detail-confirm .text-link { display: inline-block; margin-top: 1rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.related-grid a { display: flex; align-items: center; gap: .8rem; border: 1px solid #dce5f3; border-radius: .75rem; padding: 1.2rem; background: #fff; }
.related-grid a > .icon { color: #3468be; }
.related-grid strong { font-size: 1rem; line-height: 1.5; margin-right: auto; }
.related-grid a > .icon:last-child { width: 1rem; height: 1rem; }
.related-grid a:hover { background: #f0f5ff; border-color: #b7cbf0; }
.detail-closing { background: linear-gradient(115deg, #0e255f, #1848a5); color: #fff; }
.detail-closing > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.detail-closing p:not(.eyebrow) { color: #c7d7f2; font-size: 1rem; line-height: 1.75; margin-top: 1rem; max-width: 52ch; }
.detail-closing .button { flex-shrink: 0; }
@media (max-width: 1100px) {
  .erp-editorial-module { grid-template-columns: minmax(0, 1fr); gap: .75rem; padding-block: 1rem; }
  .erp-editorial-scope { justify-content: flex-start; }
  .marketing #site-nav { gap: 1rem; }
  .marketing #site-nav > a { font-size: .875rem; }
  .need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .need-card h3 { max-width: 30ch; }
  .channel-map { grid-template-columns: .7fr 2fr; }
  .channel-map-items { gap: 1rem; }
}
@media (max-width: 900px) {
  .hero-marketing .hero-grid, .detail-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-marketing .hero-copy { max-width: none; }
  .hero-marketing h1 { max-width: 24ch; }
  .hero-marketing .hero-description { max-width: 58ch; }
  .hero-example { max-width: 39rem; width: 100%; }
  .example-panel { gap: 1.5rem; }
  .demo-board { padding: 1.15rem; }
  .board-head { flex-wrap: wrap; }
  .channel-map { grid-template-columns: 1fr; }
  .inventory-hub { flex-direction: row; align-items: center; flex-wrap: wrap; border-right: 0; padding-right: 0; border-bottom: 1px solid #dce5f3; padding-bottom: 1rem; }
  .inventory-hub > .icon { margin: 0; width: 1.5rem; height: 1.5rem; }
  .inventory-hub span { margin-left: auto; }
  .activation-path { gap: 1.25rem; }
  .detail-hero-grid .demo-board { max-width: 39rem; width: 100%; }
  .related-grid a { padding: 1rem; gap: .5rem; }
  .family-banner { gap: 1.5rem; }
  .detail-closing > .wrap { align-items: flex-start; }
}
@media (max-width: 700px) {
  .product-grid, .example-panel, .journey-cards, .family-banner { grid-template-columns: 1fr; }
  .example-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activation-path, .challenge-grid, .capability-grid, .related-grid { grid-template-columns: 1fr; }
  .erp-editorial-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .erp-editorial-intro > p:not(.erp-editorial-eyebrow) { max-width: none; }
  .example-copy h3 { max-width: 30ch; font-size: 1.55rem; }
  .example-panel { gap: 1.5rem; }
  .example-copy { order: 0; }
  .example-panel .demo-board { order: 1; }
  .channel-map-items { grid-template-columns: 1fr; }
  .channel-map-items article + article { padding-top: 1rem; border-top: 1px solid #e1e8f4; }
  .family-destination { justify-items: start; padding: .5rem 0 0; }
  .step-tabs { grid-template-columns: 1fr; gap: .5rem; }
  .step-tabs button { min-height: 2.8rem; }
  .challenge-grid { gap: 1rem; }
  .challenge-grid p { margin-top: .35rem; }
  .capability-grid article { padding: 1.25rem; }
  .activation-path { gap: 1.15rem; }
  .detail-closing > .wrap { flex-direction: column; gap: 1.25rem; }
  .marketing .footer-top nav { gap: 1rem; }
}
@media (max-width: 480px) {
  .marketing .header-inner { gap: .75rem; }
  .hero-marketing h1 { font-size: 2.15rem; line-height: 1.2; }
  .hero-marketing .hero-description { font-size: 1rem; line-height: 1.8; }
  .hero-marketing .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-free { font-size: .875rem; line-height: 1.6; }
  .hero-marketing .hero-foundation { display: grid; gap: .65rem; font-size: .875rem; }
  .board-head { gap: .4rem; }
  .board-title strong { font-size: 1.2rem; }
  .board-row { font-size: .875rem; padding-inline: .3rem; gap: .5rem; }
  .board-stats > div { padding: .75rem; }
  .board-stats strong { font-size: 1.25rem; }
  .need-grid { grid-template-columns: 1fr; gap: .65rem; }
  .need-card { padding: 1rem; display: grid; grid-template-columns: 2.6rem 1fr; gap: .45rem .85rem; align-items: start; }
  .need-card .need-icon { grid-row: 1/3; }
  .need-card h3 { font-size: 1.0625rem; margin: 0; }
  .need-route { font-size: .875rem; margin-top: .25rem; }
  .product-card, .channel-map, .journey-cards article, .family-banner { padding: 1.25rem; }
  .erp-editorial { padding: 1.25rem; }
  .erp-editorial-intro h3 { font-size: 1.5rem; }
  .product-card h3 { font-size: 1.35rem; }
  .product-link { font-size: .9375rem; }
  .example-tabs button { font-size: .9375rem; }
  .example-steps { gap: .85rem; }
  .inventory-hub span { margin-left: 0; width: 100%; }
  .mini-route span { padding: .5rem .7rem; font-size: .875rem; }
  .journey-cards h3 { font-size: 1.2rem; }
  .detail-hero h1 { font-size: 2rem; }
  .detail-intro { font-size: 1rem; }
  .detail-actions { display: grid; grid-template-columns: 1fr; }
  .breadcrumb { font-size: .8125rem; gap: .45rem; margin-bottom: 1.5rem; }
  .detail-hero .development-label { font-size: .8125rem; }
  .detail-note { font-size: .875rem; }
  .family-banner h2 { font-size: 1.5rem; }
  .marketing .footer-top nav { margin-left: 0; }
}
@media (max-width: 360px) {
  .hero-marketing h1 { font-size: 1.95rem; }
  .demo-board { padding: 1rem; }
  .hero-board { border-width: 4px; }
  .board-stats strong { font-size: 1.125rem; }
  .seat-demo { gap: .75rem; grid-template-columns: 1.1fr 1fr; }
  .seats { gap: .25rem; }
  .seat { min-height: 1.9rem; font-size: .75rem; }
  .board-small { letter-spacing: .01em; font-size: .6875rem; }
  .seat-detail > strong { font-size: 2.3rem; }
  .detail-hero h1 { font-size: 1.85rem; }
  .mini-route { gap: .45rem; }
  .mini-route span { padding: .45rem .55rem; }
}


/* The journey film blends into the ownership section, without a player frame. */
.marketing .ownership { --motion-navy: #091d43; background: var(--motion-navy); color: #fff; }
.marketing .ownership-grid { grid-template-columns: 1.08fr 1fr; gap: 3rem; }
.marketing .network-media { background: none; border-radius: 0; aspect-ratio: 16 / 10; cursor: pointer; }
.marketing .network-media:focus-visible { outline: 3px solid #93b8ff; outline-offset: -4px; }
.marketing .network-media video { opacity: .94; }
.marketing .media-shade {
  inset: -1px;
  background: linear-gradient(90deg, var(--motion-navy), transparent 12%, transparent 72%, var(--motion-navy)),
    linear-gradient(180deg, var(--motion-navy), transparent 18%, transparent 76%, var(--motion-navy));
}
.marketing .media-caption { color: #e4edff; line-height: 1.6; max-width: calc(100% - 3rem); }
.marketing .ownership-copy > .eyebrow { color: #a8c6ff; }
.marketing .ownership-copy > p:not(.eyebrow), .marketing .ownership .trust-points { color: #c3d0e8; }
.marketing .ownership .activation-path { border-color: #ffffff24; }
.marketing .ownership .activation-path > div > span { color: #ffae42; }
.marketing .ownership .activation-path p { color: #bacbe5; }
.motion-instructions { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
  .marketing .ownership-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .marketing .network-media { width: min(100%, 40rem); margin-inline: auto; }
}
@media (max-width: 480px) {
  .marketing .media-caption { left: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); font-size: .6875rem; }
}