:root { --plan-page: min(1320px, calc(100vw - 72px)); --plan-dark: #090c11; --plan-silver: #dfe7ef; --plan-green: #4bbf9d; }
html { scroll-padding-top: 94px; }
.plan-page { margin: 0; color: var(--ink); background: var(--pearl); font-family: Inter, sans-serif; font-size: 17px; }
.plan-page h1, .plan-page h2, .plan-page h3 { font-family: Manrope, Inter, sans-serif; letter-spacing: 0; text-wrap: balance; }
.plan-header { position: fixed; z-index: 100; top: 18px; left: 50%; width: min(1180px, calc(100vw - 36px)); min-height: 64px; padding: 10px 12px 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid rgba(255,255,255,.75); border-radius: 20px; background: rgba(248,251,255,.76); box-shadow: 0 16px 42px rgba(17,51,83,.1); backdrop-filter: blur(24px) saturate(160%); transform: translateX(-50%); }
.plan-header nav { display: flex; gap: 28px; }.plan-header nav a { color: #344050; font-size: 14px; font-weight: 600; text-decoration: none; }.plan-header__cta { min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; color: white; background: var(--ink); border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; }
.plan-hero { width: var(--plan-page); min-height: 840px; margin: 0 auto; padding: 168px 0 100px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr); align-items: center; gap: 56px; }
.plan-kicker { margin: 0 0 24px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.plan-hero h1 { max-width: 760px; margin: 0; font-size: 116px; line-height: .84; font-weight: 650; }
.plan-hero__lead { max-width: 670px; margin: 34px 0 0; color: var(--muted); font-size: 24px; line-height: 1.5; }
.plan-hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.plan-status { margin: 46px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--line); }.plan-status div { padding: 18px; background: rgba(255,255,255,.72); }.plan-status dt { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }.plan-status dd { margin: 8px 0 0; font-weight: 700; }
.revenue-instrument { position: relative; min-height: 620px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 42px; overflow: hidden; background: radial-gradient(circle at 48% 45%, rgba(191,222,249,.9), rgba(255,255,255,.75) 38%, rgba(224,232,241,.75) 68%, rgba(248,250,253,.95)); box-shadow: var(--shadow); }
.revenue-instrument::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: conic-gradient(from 160deg, #fefefe, #a7b4c2, #fff, #7c8b9a, #edf4fa, #fff); filter: blur(18px); opacity: .82; animation: revenue-breathe 7s ease-in-out infinite; }
.revenue-orbit { position: absolute; border: 1px solid rgba(17,44,75,.12); border-radius: 50%; }.revenue-orbit--one { width: 430px; height: 430px; }.revenue-orbit--two { width: 540px; height: 540px; border-style: dashed; animation: revenue-spin 28s linear infinite; }
.revenue-core { position: relative; z-index: 2; width: 285px; min-height: 285px; padding: 52px 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; color: #e8f3ff; background: rgba(10,16,25,.85); box-shadow: inset 0 0 60px rgba(132,192,247,.15), 0 36px 90px rgba(24,58,91,.25); backdrop-filter: blur(24px); }.revenue-core span { color: #8fbbe7; font-size: 10px; font-weight: 800; letter-spacing: 0; }.revenue-core strong { margin: 9px 0; font-size: 22px; }.revenue-core i { width: 5px; height: 5px; border-radius: 50%; background: #70c6ff; box-shadow: 0 0 18px #70c6ff; }
.revenue-signal { position: absolute; z-index: 3; min-width: 255px; padding: 17px 20px; border: 1px solid rgba(255,255,255,.9); border-radius: 16px; background: rgba(255,255,255,.76); box-shadow: var(--shadow-small); backdrop-filter: blur(20px); }.revenue-signal span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; }.revenue-signal strong { display: block; margin-top: 5px; font-size: 14px; }.revenue-signal--top { top: 60px; right: 42px; }.revenue-signal--bottom { bottom: 56px; left: 42px; }
.plan-section { width: var(--plan-page); margin: 0 auto; padding: 120px 0; border-top: 1px solid var(--line); }.plan-heading { max-width: 920px; }.plan-heading--center { margin-inline: auto; text-align: center; }.plan-heading h2 { margin: 0; font-size: 84px; line-height: .95; font-weight: 650; }.plan-heading > p:not(.plan-kicker) { max-width: 720px; margin: 24px 0 0; color: var(--muted); font-size: 21px; }.plan-heading--center > p:not(.plan-kicker) { margin-inline: auto; }
.first-move__grid { margin-top: 68px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; }.first-move__statement { margin: 0; font-size: 42px; line-height: 1.14; font-weight: 600; }.first-move ol { margin: 0; padding: 0; list-style: none; }.first-move li { padding: 22px 0; display: grid; grid-template-columns: 56px 1fr; gap: 20px; border-bottom: 1px solid var(--line); }.first-move li > span { color: var(--blue); font-size: 12px; font-weight: 800; }.first-move li strong { font-size: 20px; }.first-move li p { margin: 5px 0 0; color: var(--muted); }
.benefit-ledger { margin-top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: white; box-shadow: var(--shadow-small); }.benefit-ledger article { min-height: 410px; padding: 30px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }.benefit-ledger article:last-child { border-right: 0; }.benefit-ledger article > span { color: var(--blue); font-size: 11px; font-weight: 800; }.benefit-ledger h3 { margin: 30px 0 12px; font-size: 29px; }.benefit-ledger p { margin: 0; color: var(--muted); }.benefit-ledger strong { margin-top: auto; font-size: 54px; line-height: 1; }.benefit-ledger article:nth-child(2) strong, .benefit-ledger article:nth-child(4) strong { color: #168266; }.benefit-ledger small { margin-top: 8px; color: var(--muted); }.model-disclaimer { max-width: 850px; margin: 22px auto 0; color: var(--muted); font-size: 13px; text-align: center; }
.integration-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.integration-grid article { min-height: 330px; padding: 30px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }.integration-grid article:last-child { border-right: 0; }.integration-grid span { color: var(--blue); font-size: 11px; font-weight: 800; }.integration-grid h3 { margin: 34px 0 12px; font-size: 38px; }.integration-grid p { margin: 0; color: var(--muted); }.integration-grid strong { margin-top: auto; color: #168266; font-size: 14px; }.integration-proof { margin-top: 36px; display: grid; grid-template-columns: auto minmax(0, 460px); align-items: center; gap: 28px; }.integration-proof strong { color: var(--ink); font-size: 76px; line-height: 1; }.integration-proof p { margin: 0; color: var(--muted); font-size: 18px; }
.economics { width: 100%; max-width: none; padding-inline: max(36px, calc((100vw - 1320px) / 2)); color: #f3f7fb; background: var(--plan-dark); }.economics .plan-heading > p:not(.plan-kicker) { color: #a9b4c1; }.economics-shell { margin-top: 72px; display: grid; grid-template-columns: .83fr 1.17fr; gap: 18px; }.economics-controls, .economics-results { padding: 40px; border: 1px solid rgba(255,255,255,.11); border-radius: 24px; background: rgba(255,255,255,.055); }.economics-controls { display: grid; gap: 26px; }.economics-controls label { display: grid; grid-template-columns: 1fr auto; gap: 10px; color: #cad3dc; font-size: 14px; }.economics-controls output { color: white; font-weight: 700; }.economics-controls input { grid-column: 1 / -1; width: 100%; accent-color: #6ebeff; }.economics-controls select { grid-column: 1 / -1; min-height: 52px; padding: 0 14px; color: white; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: #151b24; }
.economics-results__primary { padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.12); }.economics-results__primary span { color: #80bdf2; font-size: 11px; font-weight: 800; letter-spacing: 0; }.economics-results__primary strong { margin-top: 14px; display: block; font-size: 92px; line-height: .9; overflow-wrap: anywhere; }.economics-results__primary small { margin-top: 16px; display: block; color: #98a4b1; }.economics-results dl { margin: 34px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.1); }.economics-results dl div { padding: 24px; background: #10151d; }.economics-results dt { color: #929eaa; font-size: 12px; }.economics-results dd { margin: 9px 0 0; font-size: 28px; font-weight: 700; }.economics-results dl div:nth-child(4) dd { color: #6fd7b6; }.economics-assumptions { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: #9ba7b3; font-size: 12px; }
.benchmark-table { margin-top: 60px; overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--shadow-small); }.benchmark-table table { width: 100%; min-width: 850px; border-collapse: collapse; }.benchmark-table th, .benchmark-table td { padding: 23px 24px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }.benchmark-table thead th { color: var(--muted); font-size: 11px; text-transform: uppercase; }.benchmark-table tbody th { font-size: 19px; }.benchmark-table tbody td { color: #4f5966; }.benchmark-sources { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }.benchmark-sources a { padding: 8px 11px; color: #425064; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 12px; text-decoration: none; }
.tier-grid { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.tier-grid article { min-height: 500px; padding: 34px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.75); }.tier-grid__featured { color: white; background: #0d1118 !important; transform: translateY(-16px); box-shadow: var(--shadow); }.tier-grid article > span { color: var(--blue); font-size: 11px; font-weight: 800; }.tier-grid h3 { margin: 28px 0 0; font-size: 31px; }.tier-grid article > strong { margin-top: 60px; font-size: 68px; line-height: .9; }.tier-grid article > small { max-width: 190px; margin-top: 12px; color: var(--muted); }.tier-grid__featured > small, .tier-grid__featured dt { color: #9aa7b4 !important; }.tier-grid dl { margin: auto 0 0; }.tier-grid dl div { padding: 15px 0; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }.tier-grid dt { color: var(--muted); }.tier-grid dd { margin: 0; font-weight: 700; }.pricing-notes { margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.pricing-notes p { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: white; font-size: 14px; }
.launch { color: white; background: linear-gradient(180deg, #0a0d12, #111822); width: 100%; max-width: none; padding-inline: max(36px, calc((100vw - 1320px) / 2)); }.launch-folds { margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; }.launch-folds li { min-height: 390px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.04); transform-origin: left center; }.launch-folds li:nth-child(even) { background: rgba(125,188,242,.09); }.launch-folds li > span { color: #76bff7; font-weight: 800; }.launch-folds p { color: #8e9aa7; font-size: 11px; font-weight: 800; }.launch-folds h3 { margin: 16px 0; font-size: 31px; }.launch-folds strong { color: #bdc8d3; font-size: 14px; line-height: 1.5; }
.governance-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }.governance-grid a { min-height: 310px; padding: 26px; display: flex; flex-direction: column; color: inherit; border: 1px solid var(--line); border-radius: 18px; background: white; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }.governance-grid a:hover { transform: translateY(-5px); box-shadow: var(--shadow-small); }.governance-grid span { color: var(--blue); font-size: 11px; font-weight: 800; }.governance-grid h3 { margin: auto 0 12px; font-size: 24px; }.governance-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.review-list { display: grid; grid-template-columns: .75fr 1fr .48fr; gap: 54px; align-items: start; }.review-list .plan-heading h2 { font-size: 72px; }.checklist { display: grid; gap: 10px; }.checklist label { min-height: 62px; padding: 15px 18px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 13px; background: white; }.checklist input { width: 20px; height: 20px; accent-color: var(--blue); }.review-progress { position: sticky; top: 108px; padding: 26px; color: white; border-radius: 18px; background: var(--plan-dark); }.review-progress span { color: #82bff0; font-size: 10px; font-weight: 800; }.review-progress strong { margin-top: 16px; display: block; font-size: 50px; }.review-progress p { color: #8f9aa6; font-size: 12px; }
.plan-cta { padding: 140px 36px; text-align: center; color: white; background: radial-gradient(circle at 50% 25%, #1c3d61, #090d13 60%); }.plan-cta h2 { margin: 0 0 42px; font-size: 104px; line-height: .9; }.plan-footer { padding: 44px max(36px, calc((100vw - 1320px) / 2)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; color: #aeb6c1; background: #090c11; font-size: 12px; }.plan-footer p { margin: 0; }.plan-footer nav { display: flex; gap: 17px; }.plan-footer a { color: inherit; text-decoration: none; }
@keyframes revenue-breathe { 0%,100% { transform: scale(.92) rotate(-6deg); opacity: .65; } 50% { transform: scale(1.06) rotate(7deg); opacity: .96; } } @keyframes revenue-spin { to { transform: rotate(360deg); } }
@media (max-width: 1060px) { .plan-header nav { display: none; }.plan-hero { grid-template-columns: 1fr; }.plan-hero h1 { font-size: 90px; }.revenue-instrument { min-height: 560px; }.benefit-ledger, .integration-grid { grid-template-columns: 1fr 1fr; }.benefit-ledger article:nth-child(2), .integration-grid article:nth-child(2) { border-right: 0; }.benefit-ledger article:nth-child(-n+2), .integration-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.economics-shell, .first-move__grid { grid-template-columns: 1fr; }.governance-grid { grid-template-columns: repeat(3, 1fr); }.review-list { grid-template-columns: 1fr; }.review-progress { position: static; }.pricing-notes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { :root { --plan-page: calc(100vw - 28px); }.plan-header { top: 10px; width: calc(100vw - 20px); min-height: 58px; padding-left: 14px; }.plan-header .brand { width: 106px; }.plan-header__cta { min-height: 40px; padding-inline: 12px; }.plan-hero { min-height: 0; padding: 130px 0 72px; gap: 44px; }.plan-hero h1 { font-size: 68px; }.plan-hero__lead { font-size: 19px; }.plan-hero__actions .button { width: 100%; }.plan-status { grid-template-columns: 1fr; }.revenue-instrument { min-height: 470px; border-radius: 28px; }.revenue-orbit--one { width: 300px; height: 300px; }.revenue-orbit--two { width: 390px; height: 390px; }.revenue-core { width: 220px; min-height: 220px; padding: 36px 24px; }.revenue-core strong { font-size: 18px; }.revenue-signal { min-width: 0; max-width: 220px; padding: 13px 15px; }.revenue-signal--top { top: 25px; right: 18px; }.revenue-signal--bottom { bottom: 25px; left: 18px; }.plan-section { padding: 82px 0; }.plan-heading h2, .review-list .plan-heading h2 { font-size: 48px; }.plan-heading > p:not(.plan-kicker) { font-size: 17px; }.first-move__grid { gap: 42px; }.first-move__statement { font-size: 30px; }.benefit-ledger, .integration-grid, .tier-grid, .launch-folds, .governance-grid { grid-template-columns: 1fr; }.benefit-ledger article, .integration-grid article { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--line); }.benefit-ledger article:last-child, .integration-grid article:last-child { border-bottom: 0; }.integration-proof { grid-template-columns: 1fr; gap: 12px; }.economics { padding-inline: 14px; }.economics-controls, .economics-results { padding: 24px 18px; }.economics-results dl { grid-template-columns: 1fr; }.economics-results__primary strong { font-size: 54px; overflow-wrap: anywhere; }.benchmark-table { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }.benchmark-table table, .benchmark-table tbody, .benchmark-table tr, .benchmark-table th, .benchmark-table td { width: 100%; min-width: 0; display: block; }.benchmark-table thead { display: none; }.benchmark-table tbody { display: grid; gap: 10px; }.benchmark-table tr { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-small); }.benchmark-table th, .benchmark-table td { padding: 0; border: 0; }.benchmark-table tbody th { margin-bottom: 12px; font-size: 21px; }.benchmark-table tbody td:first-of-type { color: var(--ink); font-weight: 700; }.benchmark-table tbody td + td { margin-top: 10px; }.tier-grid__featured { transform: none; }.pricing-notes { grid-template-columns: 1fr; }.launch { padding-inline: 14px; }.launch-folds li { min-height: 260px; }.governance-grid a { min-height: 230px; }.plan-cta { padding: 100px 18px; }.plan-cta h2 { font-size: 58px; }.plan-footer { grid-template-columns: 1fr; text-align: center; }.plan-footer .brand { margin: auto; }.plan-footer nav { justify-content: center; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .revenue-instrument::before, .revenue-orbit--two { animation: none; } }
@media (prefers-reduced-transparency: reduce) { .plan-header, .revenue-signal, .revenue-core { backdrop-filter: none; background: white; color: var(--ink); } }