:root {
  color-scheme: light;
  --paper: #f4f7f5;
  --white: #ffffff;
  --ink: #161a18;
  --muted: #66716b;
  --faint: #8b948f;
  --line: #dce3df;
  --line-strong: #c7d0cb;
  --green: #148a5a;
  --green-light: #3dcf8e;
  --green-soft: #e7f7ef;
  --blue: #356ae6;
  --coral: #e7654f;
  --dark: #151917;
  --container: 1180px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-size: 15px; line-height: 1.55; }
body, button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: 0; }
.landing-container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }

.landing-header { height: 68px; position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; padding: 0 max(24px, calc((100vw - var(--container)) / 2)); color: #fff; border-bottom: 1px solid rgba(255,255,255,.14); background: rgba(21,25,23,.94); backdrop-filter: blur(12px); }
.landing-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.landing-brand img { border: 1px solid #343b37; border-radius: 7px; }
.landing-brand strong, .landing-brand small { display: block; }
.landing-brand strong { font-size: 14px; line-height: 1.1; }
.landing-brand small { color: #8f9a94; font-size: 9px; margin-top: 3px; }
.desktop-nav { display: flex; align-items: center; gap: 28px; margin: 0 auto; }
.desktop-nav a { color: #aeb8b2; font-size: 12px; }
.desktop-nav a:hover { color: #fff; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-login { font-size: 11px; color: #dbe2de; }
.landing-menu-button { display: none; width: 38px; height: 38px; border: 1px solid #3c4540; background: transparent; color: #fff; border-radius: 6px; place-items: center; cursor: pointer; }
.mobile-nav { display: none; }

.landing-button { min-height: 44px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; border: 1px solid transparent; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.landing-button.compact { min-height: 36px; padding: 0 12px; font-size: 10px; }
.landing-button.dark { background: var(--dark); color: #fff; border-color: var(--dark); }
.landing-header .landing-button.dark { color: var(--dark); background: var(--green-light); border-color: var(--green-light); }
.landing-button.dark:hover { background: #2a302d; }
.landing-header .landing-button.dark:hover { background: #70dda9; }
.landing-button.light { background: #fff; color: var(--dark); border-color: #fff; }
.landing-button.light:hover { background: #edf3ef; }
.landing-button.ghost-light { color: #fff; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.28); }
.landing-button.ghost-light:hover { background: rgba(255,255,255,.1); }
.landing-button.outline { background: #fff; color: var(--dark); border-color: var(--line-strong); }
.landing-button.outline:hover { background: var(--paper); }
.full-width { width: 100%; }

.landing-hero { min-height: calc(100svh - 42px); height: 820px; max-height: 920px; position: relative; display: flex; align-items: center; overflow: hidden; color: #fff; background: var(--dark); }
.hero-backdrop { position: absolute; inset: 0; background-image: url("/assets/dashboard-preview.png"); background-size: cover; background-position: 64% center; opacity: .25; transform: scale(1.035); }
.landing-hero:after { content: ""; position: absolute; inset: 0; background: rgba(13,16,14,.67); }
.hero-content { position: relative; z-index: 1; padding-top: 72px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hero-copy { max-width: 690px; }
.landing-kicker { display: inline-flex; align-items: center; gap: 8px; color: #c9d3cd; font-size: 10px; font-weight: 700; text-transform: uppercase; margin-bottom: 24px; }
.landing-kicker i { width: 7px; height: 7px; background: var(--green-light); border-radius: 50%; box-shadow: 0 0 0 4px rgba(61,207,142,.12); }
.landing-hero h1 { font-size: 76px; line-height: .98; margin-bottom: 24px; font-weight: 750; }
.hero-copy > p { max-width: 650px; color: #cbd4cf; font-size: 18px; line-height: 1.65; margin-bottom: 30px; }
.hero-copy > p strong { color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: #aeb8b2; font-size: 10px; }
.hero-proof span { display: inline-flex; align-items: center; gap: 6px; }
.hero-proof svg { width: 13px; height: 13px; color: var(--green-light); }
.hero-status { flex: 0 0 210px; display: grid; grid-template-columns: 10px 1fr; column-gap: 9px; padding: 14px 16px; border-left: 1px solid rgba(255,255,255,.35); margin-bottom: 6px; }
.hero-status .live-dot { grid-row: span 2; margin-top: 4px; }
.hero-status strong, .hero-status small { display: block; }
.hero-status strong { font-size: 11px; }
.hero-status small { color: #9da8a2; font-size: 9px; margin-top: 2px; }
.live-dot { width: 8px; height: 8px; background: var(--green-light); border-radius: 50%; box-shadow: 0 0 0 4px rgba(61,207,142,.12); }

.signal-bar { background: #fff; border-bottom: 1px solid var(--line); }
.signal-grid { min-height: 104px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.signal-grid > div { padding: 27px 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.signal-grid > div:last-child { border-right: 1px solid var(--line); }
.signal-grid strong, .signal-grid span { display: block; }
.signal-grid strong { font-size: 12px; }
.signal-grid span { color: var(--muted); font-size: 9px; margin-top: 4px; line-height: 1.45; }

.landing-section { padding: 108px 0; scroll-margin-top: 66px; }
.section-heading { max-width: 620px; margin-bottom: 46px; }
.section-heading.centered { text-align: center; margin-left: auto; margin-right: auto; }
.section-index { display: block; color: var(--green); font-size: 10px; font-weight: 800; margin-bottom: 12px; }
.section-heading h2, .developer-copy h2, .final-cta h2 { font-size: 42px; line-height: 1.12; margin-bottom: 14px; }
.section-heading p { color: var(--muted); margin-bottom: 0; font-size: 14px; }
.split-heading { max-width: none; display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 80px; }
.split-heading h2 { margin-bottom: 0; }

.product-section { background: var(--paper); }
.product-preview { display: block; position: relative; aspect-ratio: 16 / 9; max-height: 710px; overflow: hidden; border: 1px solid #bfc9c3; background: #e8eeea; box-shadow: 0 22px 60px rgba(20,26,22,.12); }
.product-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.product-preview > span { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--dark); color: #fff; border-radius: 6px; font-size: 10px; font-weight: 700; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-top: 0; background: #fff; }
.value-grid article { min-height: 240px; padding: 34px 30px; position: relative; border-left: 1px solid var(--line); }
.value-grid article:first-child { border-left: 0; }
.value-grid article > svg { width: 22px; height: 22px; color: var(--green); margin-bottom: 34px; }
.value-number { position: absolute; right: 18px; top: 18px; color: #b3bdb7; font-size: 9px; font-weight: 700; }
.value-grid h3 { font-size: 16px; margin-bottom: 9px; }
.value-grid p { color: var(--muted); font-size: 11px; margin-bottom: 0; }

.comparison-section { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.comparison-layout { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); }
.calculator-controls, .comparison-result { min-height: 475px; padding: 38px; }
.calculator-controls { background: var(--paper); }
.comparison-result { color: #fff; background: var(--dark); display: flex; flex-direction: column; }
.control-label, .result-label { display: block; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.result-label { color: #9ba69f; }
.plan-selector { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; margin-bottom: 34px; }
.plan-selector button { height: 42px; border: 0; border-left: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; }
.plan-selector button:first-child { border-left: 0; }
.plan-selector button.active { background: var(--dark); color: #fff; }
.usage-control { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; }
.usage-control strong { color: var(--ink); font-size: 13px; }
input[type="range"] { width: 100%; height: 6px; margin: 18px 0 8px; appearance: none; background: #d9e0dc; border-radius: 999px; accent-color: var(--green); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--green); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--green); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--green); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--green); cursor: pointer; }
.range-labels { display: flex; justify-content: space-between; color: var(--faint); font-size: 8px; margin-bottom: 34px; }
.quota-summary { margin: 0; border-top: 1px solid var(--line); }
.quota-summary > div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); }
.quota-summary dt { color: var(--muted); font-size: 10px; }
.quota-summary dd { margin: 0; font-size: 11px; font-weight: 700; }
.comparison-result > strong { font-size: 46px; line-height: 1; margin-bottom: 11px; }
.saving-badge { align-self: flex-start; padding: 5px 8px; border-radius: 999px; color: #9be3be; background: rgba(61,207,142,.12); border: 1px solid rgba(61,207,142,.25); font-size: 10px; font-weight: 700; }
.price-bars { margin: auto 0 28px; display: grid; gap: 22px; }
.price-bars > div { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.price-bars span b, .price-bars span em { display: block; }
.price-bars span b { font-size: 11px; }
.price-bars span em { color: #86918b; font-size: 8px; font-style: normal; margin-top: 2px; }
.price-bars > div > strong { font-size: 12px; }
.price-bars progress { grid-column: 1 / -1; width: 100%; height: 6px; appearance: none; border: 0; background: #313733; border-radius: 999px; overflow: hidden; }
.price-bars progress::-webkit-progress-bar { background: #313733; }
.price-bars progress::-webkit-progress-value { background: var(--green-light); }
.price-bars progress::-moz-progress-bar { background: var(--green-light); }
.price-bars > div:last-child progress::-webkit-progress-value { background: var(--coral); }
.price-bars > div:last-child progress::-moz-progress-bar { background: var(--coral); }
.comparison-method { display: grid; grid-template-columns: 20px 1fr auto; align-items: start; gap: 11px; margin-top: 16px; color: var(--muted); }
.comparison-method > svg { color: var(--green); width: 16px; height: 16px; margin-top: 2px; }
.comparison-method p { font-size: 9px; margin-bottom: 0; }
.comparison-method a { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: 9px; font-weight: 700; white-space: nowrap; }
.comparison-method a svg { width: 12px; height: 12px; }

.pricing-section { background: var(--paper); }
.landing-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 14px; }
.landing-plan { min-height: 550px; padding: 28px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); position: relative; }
.landing-plan.featured { border-color: #68b68f; box-shadow: 0 14px 36px rgba(18,78,53,.09); }
.plan-ribbon { position: absolute; top: 16px; right: 16px; padding: 4px 8px; border-radius: 999px; color: #0d6c47; background: var(--green-soft); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.plan-top span, .plan-top small { display: block; }
.plan-top span { font-size: 17px; font-weight: 750; }
.plan-top small { color: var(--muted); font-size: 10px; margin-top: 4px; }
.landing-price { display: flex; align-items: baseline; gap: 6px; margin: 25px 0 7px; }
.landing-price strong { font-size: 31px; }
.landing-price span { color: var(--faint); font-size: 10px; }
.plan-saving { color: var(--green); font-size: 9px; font-weight: 700; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.landing-plan ul { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 13px; flex: 1; }
.landing-plan li { display: flex; gap: 8px; align-items: center; color: #4d5752; font-size: 11px; }
.landing-plan li svg { width: 14px; height: 14px; color: var(--green); }
.pricing-footnote { margin: 16px auto 0; color: var(--faint); font-size: 9px; text-align: center; }

.developer-section { background: var(--dark); color: #fff; overflow: hidden; }
.developer-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; align-items: center; }
.light-index { color: var(--green-light); }
.developer-copy p { color: #9eaaa3; max-width: 490px; font-size: 13px; }
.developer-copy ul { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.developer-copy li { display: flex; gap: 7px; color: #bdc7c1; font-size: 10px; }
.developer-copy li svg { width: 14px; height: 14px; color: var(--green-light); }
.developer-code { border: 1px solid #3a423d; background: #0f1210; box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.code-window-head { height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid #303632; }
.code-window-head > span { width: 7px; height: 7px; border-radius: 50%; background: #5e6862; }
.code-window-head > span:nth-child(1) { background: var(--coral); }
.code-window-head > span:nth-child(2) { background: #e6b650; }
.code-window-head > span:nth-child(3) { background: var(--green-light); }
.code-window-head small { margin-left: auto; color: #69736d; font-family: monospace; font-size: 9px; }
.developer-code pre { min-height: 330px; margin: 0; padding: 34px; overflow: auto; color: #c9d2cd; font-size: 12px; line-height: 1.8; }
.developer-code b { color: #7da5ff; font-weight: 500; }
.developer-code i { color: #77dbaa; font-style: normal; }
.code-status { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-top: 1px solid #303632; color: #819087; font-size: 9px; }
.code-status .live-dot { width: 6px; height: 6px; }

.operations-section { background: #fff; }
.operations-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.operations-grid article { min-height: 180px; padding: 30px; display: flex; gap: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.operations-grid article > svg { width: 22px; height: 22px; color: var(--green); }
.operations-grid strong { display: block; font-size: 13px; margin-bottom: 7px; }
.operations-grid p { color: var(--muted); font-size: 10px; margin-bottom: 0; }

.faq-section { background: var(--paper); border-top: 1px solid var(--line); }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; }
.faq-layout .section-heading { margin-bottom: 0; }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-list details { border-bottom: 1px solid var(--line-strong); }
.faq-list summary { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 18px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 700; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { width: 15px; height: 15px; color: var(--muted); transition: transform .18s ease; }
.faq-list details[open] summary svg { transform: rotate(90deg); }
.faq-list details p { color: var(--muted); font-size: 11px; padding: 0 34px 20px 0; margin-bottom: 0; }

.final-cta { padding: 105px 0; background: #1a211d; color: #fff; text-align: center; border-top: 1px solid #343c37; }
.final-cta-inner { max-width: 760px; }
.final-cta .landing-kicker { margin-bottom: 18px; }
.final-cta h2 { font-size: 46px; }
.final-cta p { color: #aab5ae; max-width: 620px; margin: 0 auto 28px; }
.centered-actions { justify-content: center; }

.landing-footer { padding: 58px 0 24px; background: #101311; color: #fff; }
.footer-main { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 50px; padding-bottom: 48px; }
.footer-main > div:not(.footer-brand) { display: grid; align-content: start; gap: 10px; }
.footer-main > div > strong { font-size: 10px; text-transform: uppercase; color: #d9e0dc; margin-bottom: 6px; }
.footer-main a { color: #78837d; font-size: 10px; }
.footer-main a:hover { color: #fff; }
.footer-brand > img { float: left; margin-right: 10px; }
.footer-brand > div strong, .footer-brand > div span { display: block; }
.footer-brand > div strong { font-size: 14px; }
.footer-brand > div span { color: #6f7a74; font-size: 9px; }
.footer-brand p { clear: both; max-width: 300px; padding-top: 16px; color: #78837d; font-size: 10px; }
.footer-legal { min-height: 50px; padding-top: 18px; border-top: 1px solid #282d2a; display: flex; justify-content: space-between; gap: 20px; color: #626c66; font-size: 8px; }

.access-dialog { width: min(460px, calc(100vw - 32px)); padding: 30px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); box-shadow: 0 28px 90px rgba(13,18,15,.28); }
.access-dialog::backdrop { background: rgba(13,17,15,.62); backdrop-filter: blur(3px); }
.dialog-close { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); border: 0; background: transparent; cursor: pointer; }
.access-number { width: 64px; height: 64px; display: grid; place-items: center; background: var(--dark); color: #fff; border-radius: 8px; font-size: 24px; font-weight: 750; margin-bottom: 20px; }
.access-dialog h2 { font-size: 24px; margin-bottom: 9px; }
.access-dialog > p { color: var(--muted); font-size: 11px; margin-bottom: 20px; }
.dialog-points { display: grid; gap: 9px; margin-bottom: 22px; }
.dialog-points span { display: flex; gap: 7px; align-items: center; font-size: 10px; color: #4d5752; }
.dialog-points svg { width: 14px; height: 14px; color: var(--green); }

@media (max-width: 980px) {
  .desktop-nav, .header-login { display: none; }
  .header-actions { margin-left: auto; }
  .landing-menu-button { display: grid; }
  .mobile-nav { position: absolute; top: 68px; left: 0; right: 0; padding: 18px 24px 24px; display: none; gap: 15px; background: rgba(21,25,23,.98); border-bottom: 1px solid #343b37; }
  .mobile-nav.open { display: grid; }
  .mobile-nav a { color: #ccd5d0; font-size: 12px; }
  .landing-hero h1 { font-size: 62px; }
  .signal-grid { grid-template-columns: 1fr 1fr; }
  .signal-grid > div { border-bottom: 1px solid var(--line); }
  .value-grid { grid-template-columns: 1fr; }
  .value-grid article { min-height: 190px; border-left: 0; border-top: 1px solid var(--line); }
  .value-grid article:first-child { border-top: 0; }
  .comparison-layout, .developer-layout, .faq-layout { grid-template-columns: 1fr; }
  .split-heading { grid-template-columns: 1fr; gap: 14px; }
  .calculator-controls, .comparison-result { min-height: 430px; }
  .landing-plan-grid { grid-template-columns: 1fr; }
  .landing-plan { min-height: 0; }
  .developer-layout { gap: 52px; }
  .faq-layout { gap: 42px; }
  .footer-main { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer-main > div:last-child { grid-column: 2; }
}

@media (max-width: 660px) {
  .landing-container { width: min(100% - 28px, var(--container)); }
  .landing-header { height: 60px; padding: 0 14px; }
  .landing-brand small { display: none; }
  .landing-header .landing-button.compact { display: none; }
  .mobile-nav { top: 60px; }
  .landing-hero { height: 720px; min-height: 680px; max-height: none; align-items: flex-end; }
  .hero-backdrop { background-position: 58% center; opacity: .2; }
  .hero-content { padding: 105px 0 54px; align-items: flex-start; flex-direction: column; justify-content: flex-end; }
  .landing-hero h1 { font-size: 46px; }
  .hero-copy > p { font-size: 15px; line-height: 1.55; }
  .hero-actions { flex-direction: column; }
  .hero-actions .landing-button { width: 100%; }
  .hero-proof { display: grid; gap: 9px; }
  .hero-status { display: none; }
  .signal-grid { grid-template-columns: 1fr; }
  .signal-grid > div { min-height: 84px; padding: 20px 16px; border-right: 1px solid var(--line); }
  .landing-section { padding: 76px 0; }
  .section-heading { margin-bottom: 32px; }
  .section-heading h2, .developer-copy h2, .final-cta h2 { font-size: 31px; }
  .product-preview { aspect-ratio: 4 / 3; }
  .product-preview img { object-position: top left; }
  .product-preview > span { right: 8px; bottom: 8px; }
  .value-grid article { padding: 26px 22px; }
  .calculator-controls, .comparison-result { min-height: 410px; padding: 24px 20px; }
  .plan-selector button { font-size: 10px; }
  .comparison-result > strong { font-size: 37px; }
  .comparison-method { grid-template-columns: 18px 1fr; }
  .comparison-method a { grid-column: 2; }
  .landing-plan { padding: 23px 20px; }
  .developer-copy ul { grid-template-columns: 1fr; }
  .developer-code pre { min-height: 300px; padding: 22px 16px; font-size: 9px; }
  .operations-grid { grid-template-columns: 1fr; }
  .operations-grid article { min-height: 150px; padding: 24px 20px; }
  .final-cta { padding: 78px 0; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 34px 22px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-main > div:last-child { grid-column: auto; }
  .footer-legal { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}