.marketing-page { background: #fff; color: #15243d; }
.marketing-page::before { content: none; }
.marketing-main *, .marketing-footer * { box-sizing: border-box; letter-spacing: 0; }
.marketing-page a:focus-visible,.marketing-page summary:focus-visible { outline: 3px solid #0065dc; outline-offset: 4px; }
.marketing-main h1,.marketing-main h2,.marketing-main h3 { margin: 0 0 14px; color: #0c1c36; line-height: 1.12; }
.marketing-main h1 { font-size: 58px; }
.marketing-main h2 { font-size: 34px; }
.marketing-main h3 { font-size: 18px; }
.marketing-main p { margin: 0 0 18px; line-height: 1.55; }
.marketing-eyebrow { font-size: 12px; text-transform: uppercase; font-weight: 700; color: #0065dc; }
.marketing-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.marketing-main .btn { display: inline-flex; gap: 12px; align-items: center; justify-content: center; min-height: 46px; padding: 12px 20px; border-radius: 6px; font-size: 15px; white-space: normal; text-align: center; text-decoration: none; box-shadow: none; }
.marketing-main .btn.primary { background: #0065dc !important; border-color: #0065dc !important; color: #fff !important; box-shadow: 0 5px 12px #0065dc20; }
.marketing-main .btn.primary .marketing-icon { filter: brightness(0) invert(1); width: 20px; height: 20px; }
.marketing-main .btn.primary:hover { background: #0051b2 !important; }
.marketing-main .btn.secondary { background: #fff !important; color: #102541 !important; border-color: #d7e2ef !important; box-shadow: 0 4px 12px #132b4510; }
.marketing-hero { position: relative; display: flex; align-items: center; min-height: min(760px,calc(100svh - 80px)); margin-top: calc(-1 * var(--marketing-header-height,96px)); padding: calc(var(--marketing-header-height,96px) + 32px) 0 84px; }
.marketing-hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,#fffffffa 0%,#fffffff0 28%,#ffffffc4 39%,#ffffff00 65%),linear-gradient(180deg,#ffffffb8 0%,#ffffff00 180px); pointer-events: none; }
.marketing-hero-layout { position: relative; z-index: 2; display: block; }
.marketing-hero-copy { min-width: 0; width: min(540px,46%); }
.marketing-hero-copy h1 span { display: block; color: #0065dc; }
.marketing-hero-copy .marketing-lead { font-size: 17px; max-width: 510px; }
.marketing-hero-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; border: 0; border-radius: 0; background: transparent; transform: none; box-shadow: none; }
.marketing-trust { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; list-style: none; padding: 0; margin: 28px 0 0; }
.marketing-trust li { display: flex; gap: 9px; align-items: center; font-size: 12px; line-height: 1.4; }
.marketing-strip { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 30px 10px; border: 1px solid #e1edf8; border-radius: 8px; background: #fff; margin-top: -24px; box-shadow: 0 10px 28px -10px #17467228,0 0 0 4px #ffffffb3; }
.marketing-strip > div { text-align: center; padding: 0 18px; border-right: 1px solid #e5eef7; }
.marketing-strip > div:last-child { border: 0; }
.marketing-strip .marketing-icon { box-sizing: content-box; width: 30px; height: 30px; margin-bottom: 12px; padding: 8px; border-radius: 8px; background: #edf6ff; }
.marketing-strip h2 { font-size: 16px; margin-bottom: 8px; }
.marketing-strip p { font-size: 13px; color: #425773; margin: 0; }
.marketing-band { padding: 64px 0; scroll-margin-top: 24px; }
.marketing-showcase-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 52px; align-items: start; }
.marketing-showcase-layout .marketing-section-copy { padding-top: 20px; }
.marketing-section-copy > p:not(.marketing-eyebrow) { max-width: 490px; }
.marketing-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.marketing-feature-card { border: 1px solid #e4ebf3; border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 8px 24px -12px #183c6833; }
.marketing-image-link { display: block; padding: 12px; background: linear-gradient(145deg,#f3f8ff,#e9f1fa); border-bottom: 1px solid #e4edf6; }
.marketing-feature-card img:not(.marketing-icon) { display: block; width: 100%; height: auto; aspect-ratio: 1920/982; object-fit: contain; border: 3px solid #fff; border-radius: 6px; box-shadow: 0 4px 12px #17365c18; }
.marketing-feature-card > div { padding: 18px; }
.marketing-feature-card h3 { font-size: 18px; margin-bottom: 8px; }
.marketing-feature-card p { font-size: 13px; margin: 0; }
.marketing-feature-card .marketing-tier { color: #0065dc; font-size: 11px; font-weight: 700; margin-bottom: 7px; }
.marketing-demo-note { font-size: 12px; color: #526880; grid-column: 1/-1; margin: 0 !important; }
.marketing-premium { position: relative; background: linear-gradient(110deg,#061f40,#073e70); color: #fff; padding-block: 72px; }
.marketing-premium::before { content: ""; position: absolute; left: 0; top: -34px; width: 100%; height: 35px; background: linear-gradient(110deg,#061f40,#073e70); clip-path: polygon(0 0,35% 66%,70% 90%,100% 78%,100% 100%,0 100%); pointer-events: none; }
.marketing-premium .marketing-section-copy h2 { font-size: 38px; line-height: 1.15; }
.marketing-premium .marketing-eyebrow,.marketing-premium .marketing-section-copy h2 { color: #fff; }
.marketing-plans-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 44px; align-items: center; }
.marketing-plans { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.marketing-plan { display: flex; flex-direction: column; border: 1px solid #dbe7f3; border-radius: 8px; background: linear-gradient(160deg,#fff,#f5f9ff); color: #15243d; padding: 28px; box-shadow: 0 18px 32px -16px #020e2459; }
.marketing-plan-premium { position: relative; border: 2px solid #79b9ff; border-top: 4px solid #278bff; padding: 24px 27px 27px; background: #fff; transform: translateY(-8px); box-shadow: 0 22px 40px -14px #010d2459,0 0 0 4px #7abaff1a; }
.marketing-plan h3 { display: flex; gap: 10px; align-items: center; font-size: 24px; margin-bottom: 5px; }
.marketing-plan > p { font-size: 13px; }
.marketing-plan ul { list-style: none; padding: 0; margin: 2px 0 22px; }
.marketing-plan li { display: flex; gap: 8px; margin-bottom: 10px; font-size: 13px; line-height: 1.45; }
.marketing-plan li .marketing-icon { width: 18px; height: 18px; }
.marketing-plan .btn { width: 100%; margin-top: auto; }
.marketing-trial-note { font-size: 12px; margin-top: 20px !important; color: #dcecff; }
.marketing-workflow { padding-bottom: 30px; }
.marketing-workflow h2 { font-size: 29px; }
.marketing-steps { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.marketing-steps li { position: relative; display: flex; gap: 14px; padding: 18px 14px; border: 1px solid #e0e8f1; border-radius: 6px; background: #f9fbff; box-shadow: 0 4px 12px -8px #16457230; }
.marketing-steps li:not(:last-child)::after { content: ""; position: absolute; right: -24px; top: calc(50% - 12px); width: 24px; height: 24px; background: #fff url('../assets/marketing/icons/ArrowRight.svg') center/18px no-repeat; z-index: 1; pointer-events: none; }
.marketing-step-number { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: #0065dc; color: #fff; font-weight: 700; border: 3px solid #fff; box-shadow: 0 0 0 1px #c4ddfa,0 4px 8px #0065dc20; }
.marketing-steps h3 { font-size: 16px; margin-bottom: 6px; }
.marketing-steps p { font-size: 12px; margin: 0; color: #425773; }
.marketing-gallery { padding-top: 18px; padding-bottom: 36px; }
.marketing-gallery h2 { font-size: 28px; }
.marketing-gallery-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; margin: 26px 0 18px; }
.marketing-gallery figure { margin: 0; min-width: 0; }
.marketing-gallery figure a { display: block; border: 4px solid #fff; border-radius: 8px; background: #edf4fb; box-shadow: 0 5px 18px -8px #1a3e6740; transition: transform .18s ease,box-shadow .18s ease; }
.marketing-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 2; object-fit: contain; border-radius: 4px; }
.marketing-gallery figcaption { text-align: center; margin-top: 10px; font-size: 13px; font-weight: 600; color: #163e67; }
.marketing-faq { background: #f7faff; padding: 32px 0; }
.marketing-faq h2 { font-size: 24px; }
.marketing-faq details { border-bottom: 1px solid #dce5ee; padding: 14px 0; }
.marketing-faq summary { font-weight: 600; cursor: pointer; }
.marketing-faq details p { max-width: 900px; margin: 12px 0 0; }
.marketing-final { background: linear-gradient(110deg,#06264c,#064c82); color: #fff; padding: 40px 0; border-top: 1px solid #4479a34d; box-shadow: inset 0 1px 0 #ffffff0d; }
.marketing-final > div { display: flex; justify-content: space-between; gap: 32px; align-items: center; }
.marketing-final h2 { font-size: 34px; color: #fff; }
.marketing-final .marketing-eyebrow { color: #dcecff; }
.marketing-final p { margin-bottom: 8px; }
.marketing-credit-note { font-size: 11px; margin-top: 8px !important; text-align: center; }
@media(max-width:1100px) { .marketing-main h1 { font-size: 48px; } .marketing-trust { gap: 8px; } .marketing-trust li { flex-direction: column; align-items: flex-start; } .marketing-plans-layout { grid-template-columns: 1fr; } .marketing-plans-layout .marketing-section-copy { max-width: 680px; } }
@media(max-width:800px) { .marketing-inner { width: calc(100% - 40px); } .marketing-hero-layout { grid-template-columns: 1fr; gap: 24px; } .marketing-hero-copy { max-width: 650px; } .marketing-hero-image { max-width: 640px; margin-inline: auto; } .marketing-trust li { flex-direction: row; } .marketing-showcase-layout { grid-template-columns: 1fr; gap: 28px; } .marketing-strip { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 0; } .marketing-strip > div:nth-child(3) { border: 0; } .marketing-steps { grid-template-columns: repeat(2,minmax(0,1fr)); } .marketing-gallery-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .marketing-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .marketing-footer-brand { grid-column: 1/-1; } }
@media(max-width:500px) { .marketing-main h1 { font-size: 40px; } .marketing-main h2 { font-size: 28px; } .marketing-main h3 { font-size: 19px; } .marketing-hero { padding-top: 24px; } .marketing-hero-copy .marketing-lead { font-size: 15px; } .marketing-trust { margin-top: 20px; gap: 10px; } .marketing-trust li { font-size: 11px; flex-direction: column; } .marketing-strip { grid-template-columns: repeat(2,minmax(0,1fr)); } .marketing-strip > div { padding: 0 10px; } .marketing-strip > div:nth-child(even) { border: 0; } .marketing-strip > div:nth-child(3) { border-right: 1px solid #dce9f5; } .marketing-strip > div:last-child { grid-column: 1/-1; } .marketing-strip h2 { font-size: 15px; } .marketing-band { padding: 36px 0; } .marketing-feature-grid,.marketing-plans,.marketing-steps { grid-template-columns: 1fr; } .marketing-plan { padding: 24px; } .marketing-gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .marketing-gallery-grid figure:last-child { grid-column: 1/-1; max-width: 220px; width: 100%; margin-inline: auto; } .marketing-final > div { flex-direction: column; align-items: flex-start; gap: 14px; } .marketing-footer-grid { gap: 26px; } .marketing-footer-bottom { flex-direction: column; gap: 6px; } }
@media(prefers-reduced-motion:reduce) { .marketing-page .btn { transition: none; transform: none !important; } }
@media(max-width:800px) { .marketing-header { padding: 12px 20px; } .marketing-header .public-logo img { width: 190px; } }
@media(min-width:501px) and (max-width:800px) { .marketing-hero-image { max-height: 380px; } }
@media(max-width:500px) { .marketing-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; } .marketing-actions .btn { padding: 10px; font-size: 13px; gap: 6px; } .marketing-actions .btn .marketing-icon { width: 18px; height: 18px; } .marketing-trust { margin-top: 16px; } }
@media(max-width:500px) and (max-height:700px) { .marketing-main h1 { font-size: 34px; } .marketing-hero { padding-block: 16px; } .marketing-hero-copy .marketing-lead { font-size: 13px; } .marketing-hero-image { max-height: 140px; } .marketing-hero-layout { gap: 16px; } .marketing-trust { margin-top: 12px; } }
@media(hover:hover) and (pointer:fine) { .marketing-gallery figure a:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -9px #1a3e674a; } }
@media(max-width:800px) { .marketing-hero-layout { grid-template-columns: 1fr; } .marketing-hero-image { transform: none; } .marketing-hero { padding-bottom: 40px; } .marketing-steps li::after { display: none; } .marketing-plan-premium { transform: none; } .marketing-premium { padding-block: 48px; } .marketing-premium::before { top: -22px; height: 23px; } }
@media(max-width:500px) { .marketing-hero { padding-bottom: 28px; } .marketing-strip { padding-block: 24px; margin-top: -14px; } .marketing-premium .marketing-section-copy h2,.marketing-final h2 { font-size: 28px; } .marketing-footer-grid { gap: 26px; } .marketing-feature-card > div { padding: 18px; } }
@media(max-width:500px) and (max-height:700px) { .marketing-hero { padding-bottom: 22px; } }
@media(prefers-reduced-motion:reduce) { .marketing-gallery figure a { transition: none; transform: none !important; } }

/* The narrow fallback keeps the complete product image below readable copy. */
@media(max-width:1100px) {
  .marketing-hero { flex-direction: column; min-height: 0; margin-top: calc(-1 * var(--marketing-header-height,76px)); padding-top: calc(var(--marketing-header-height,76px) + 24px); gap: 24px; background: #f5f9ff; }
  .marketing-hero::before { background: linear-gradient(110deg,#fff,#f1f7ff); }
  .marketing-hero-layout { order: 1; }
  .marketing-hero-copy { width: 100%; max-width: 650px; }
  .marketing-hero-image { position: relative; z-index: 2; order: 2; inset: auto; width: calc(100% - 40px); max-width: 640px; height: auto; max-height: 380px; object-fit: contain; object-position: center; margin-inline: auto; }
}
@media(min-width:801px) and (max-width:1100px) { .marketing-hero { margin-top: calc(-1 * var(--marketing-header-height,96px)); padding-top: calc(var(--marketing-header-height,96px) + 24px); padding-bottom: 40px; } .marketing-hero-image { max-height: 260px; } }
@media(max-width:500px) and (max-height:700px) {
  .marketing-hero { padding-top: calc(var(--marketing-header-height,76px) + 16px); gap: 16px; }
  .marketing-hero-image { max-height: 140px; }
}

/* Interaction styles remain optional: layout and content never depend on motion. */
.marketing-page-root { scroll-padding-top: var(--marketing-header-offset,110px); }
.marketing-page-root:not(.marketing-reduced-motion) { scroll-behavior: smooth; }
.marketing-header { transition: box-shadow .2s ease,background-color .2s ease; }
.marketing-header.is-scrolled,.marketing-page .app-userbar.is-scrolled { background: #fffffff0; box-shadow: 0 8px 24px -8px #17395c45; backdrop-filter: blur(6px); }
.marketing-main .btn,.marketing-header .btn { transition: transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease; }
.marketing-main .btn .marketing-icon,.marketing-header .btn .marketing-icon { transition: transform .18s ease; }
.marketing-main .btn:focus-visible,.marketing-header .btn:focus-visible { transform: translateY(-1px); }
.marketing-main .btn.primary:focus-visible { box-shadow: 0 8px 18px #0065dc30; }
.marketing-header nav a,.marketing-footer nav a { position: relative; transition: color .18s ease; }
.marketing-header .public-center-nav a::after,.marketing-footer nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .18s ease; pointer-events: none; }
.marketing-header .public-center-nav a::after { left: 10px; right: 10px; bottom: 2px; }
.marketing-footer nav a { width: fit-content; }
.marketing-header .public-center-nav a:focus-visible { color: #0065dc; }
.marketing-header .public-center-nav a:focus-visible::after,.marketing-footer nav a:focus-visible::after { transform: scaleX(1); }
.marketing-strip > div,.marketing-strip .marketing-icon,.marketing-feature-card,.marketing-feature-card img,.marketing-plan,.marketing-plan h3 .marketing-icon,.marketing-steps li,.marketing-step-number,.marketing-gallery img,.marketing-gallery figcaption { transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease,color .2s ease; }
.marketing-image-link:focus-visible { outline-offset: -4px; }
.marketing-feature-card:focus-within { transform: translateY(-2px); border-color: #80b5ef; box-shadow: 0 12px 26px -12px #183c6840; }
.marketing-plan:focus-within { box-shadow: 0 24px 40px -14px #010d2470; }
.marketing-gallery figure a { overflow: hidden; }
@media(hover:hover) and (pointer:fine) {
  .marketing-main .btn:hover,.marketing-header .btn:hover { transform: translateY(-2px); }
  .marketing-main .btn.primary:hover,.marketing-header .btn.primary:hover { box-shadow: 0 8px 18px #0065dc30; }
  .marketing-main .btn.secondary:hover { background: #f3f8ff !important; border-color: #8eb9e9 !important; box-shadow: 0 6px 14px #132b4518; }
  .marketing-main .btn:hover .marketing-icon[src$="ArrowRight.svg"],.marketing-header .btn:hover .marketing-icon { transform: translateX(3px); }
  .marketing-header .public-center-nav a:hover { color: #0065dc; }
  .marketing-footer nav a:hover { color: #b8daff; text-decoration: none; }
  .marketing-header .public-center-nav a:hover::after,.marketing-footer nav a:hover::after { transform: scaleX(1); }
  .marketing-strip > div:hover { background: #f5faff; transform: translateY(-2px); }
  .marketing-strip > div:hover .marketing-icon { transform: translateY(-2px); background: #deeeff; }
  .marketing-feature-card:hover { transform: translateY(-3px); border-color: #a6c7ec; box-shadow: 0 14px 30px -12px #183c6840; }
  .marketing-feature-card:hover img { transform: scale(1.015); }
  .marketing-plan:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -14px #010d2470; }
  .marketing-plan-premium:hover { transform: translateY(-11px); }
  .marketing-plan-premium:hover h3 .marketing-icon { transform: translateY(-2px) rotate(-4deg); }
  .marketing-steps li:hover { transform: translateY(-2px); border-color: #a6c7ec; }
  .marketing-steps li:hover .marketing-step-number { box-shadow: 0 0 0 2px #b7d7fc,0 5px 10px #0065dc30; }
  .marketing-gallery figure:hover img { transform: scale(1.015); }
  .marketing-gallery figure:hover figcaption { color: #0065dc; }
}
@media(max-width:800px) and (hover:hover) and (pointer:fine) { .marketing-plan-premium:hover { transform: translateY(-3px); } }
@media(prefers-reduced-motion:reduce) {
  .marketing-page-root { scroll-behavior: auto !important; }
  .marketing-page .btn,.marketing-strip > div,.marketing-strip .marketing-icon,.marketing-feature-card,.marketing-feature-card img,.marketing-plan,.marketing-plan h3 .marketing-icon,.marketing-steps li,.marketing-step-number,.marketing-gallery img,.marketing-gallery figcaption,.marketing-header,.marketing-header nav a,.marketing-footer nav a { transition: none !important; }
  .marketing-page .btn,.marketing-page .btn .marketing-icon,.marketing-strip > div,.marketing-strip .marketing-icon,.marketing-feature-card,.marketing-feature-card img,.marketing-plan,.marketing-plan h3 .marketing-icon,.marketing-steps li,.marketing-gallery img { transform: none !important; }
  .marketing-header nav a::after,.marketing-footer nav a::after { transition: none; }
}