:root {
  --black: #050505;
  --white: #fffaf5;
  --cream: #fff8f5;
  --cyan: #00e5cc;
  --blue: #55aaff;
  --violet: #9b59ff;
  --grad: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet));
  --font-d: "Barlow Condensed", Impact, sans-serif;
  --font-b: "DM Sans", Arial, sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

html { scroll-behavior: smooth; }

body.revenue-calculator-page {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--black);
  font-family: var(--font-b);
}

.revenue-calculator-page *,
.revenue-calculator-page *::before,
.revenue-calculator-page *::after { box-sizing: border-box; }

.revenue-calculator-page a { color: inherit; text-decoration: none; }
.revenue-calculator-page button,
.revenue-calculator-page input,
.revenue-calculator-page select { font: inherit; }
.revenue-calculator-page .urgency-link { display: inline-flex; align-items: center; min-height: 44px; }

/* One clear desktop shell: left navigation, centered mark, right actions. */
.revenue-calculator-page #nav { background: rgba(255, 248, 245, .97); border-bottom-color: rgba(5, 5, 5, .14); }
.revenue-calculator-page #nav .nav-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr);
  gap: 24px;
  height: 104px;
  padding: 0 32px;
}
.revenue-calculator-page #nav .nav-links { gap: clamp(14px, 1.55vw, 28px); min-width: 0; }
.revenue-calculator-page #nav .nav-links a,
.revenue-calculator-page #nav .nav-dropdown-trigger { font-size: clamp(13px, 1.05vw, 16px); white-space: nowrap; }
.revenue-calculator-page #nav .nav-logo {
  position: static !important;
  transform: none !important;
  justify-self: center;
}
.revenue-calculator-page #nav .nav-logo img {
  width: 220px;
  height: auto;
  max-height: 88px;
  padding: 8px 0;
  object-fit: contain;
}
.revenue-calculator-page #nav .nav-actions { justify-self: end; min-width: 0; }
.revenue-calculator-page #nav .nav-actions .btn { min-height: 48px; padding: 12px 18px; font-size: 13px; }

.primary-btn,
.secondary-btn,
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font-family: var(--font-d);
  font-weight: 800;
  font-style: italic;
  letter-spacing: .09em;
  line-height: 1.05;
  text-transform: uppercase;
}
.primary-btn {
  padding: 16px 30px;
  border: 2px solid var(--black);
  background: var(--grad);
  color: var(--black);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.primary-btn:hover,
.primary-btn:focus-visible { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--black); }
.text-link { padding: 12px 2px; gap: 10px; border-bottom: 2px solid var(--black); }
.text-link:hover,
.text-link:focus-visible { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; border-color: var(--violet); }

.eyebrow {
  margin: 0;
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3em;
  line-height: 1.2;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Homepage-style, image-free editorial hero. */
.revenue-calculator-page .hero {
  min-height: min(960px, 100vh);
  padding: 230px 0 90px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--black);
  background:
    radial-gradient(circle at 2% 18%, rgba(0, 229, 204, .34), transparent 25%),
    radial-gradient(circle at 98% 78%, rgba(155, 89, 255, .24), transparent 31%),
    var(--cream);
  border-bottom: 2px solid var(--black);
}
.revenue-calculator-page .hero-grid {
  width: min(calc(100% - 64px), 1280px);
  margin: 0 auto;
  display: block;
  padding: 0;
}
.revenue-calculator-page .hero-copy { max-width: 1160px; overflow: visible; }
.revenue-calculator-page .hero .eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.revenue-calculator-page .hero .eyebrow::before { content: ""; width: 48px; height: 2px; flex: 0 0 auto; background: var(--cyan); }
.revenue-calculator-page .hero h1 {
  max-width: 1160px !important;
  margin: 0 !important;
  padding: 0 .16em .06em 0 !important;
  transform: none !important;
  overflow: visible;
  font-family: var(--font-d) !important;
  font-size: clamp(72px, 9.2vw, 142px) !important;
  font-weight: 800 !important;
  font-style: italic !important;
  letter-spacing: -.025em !important;
  line-height: .84 !important;
  text-transform: uppercase !important;
}
.revenue-calculator-page .hero h1 .accent {
  display: inline-block;
  padding-right: .12em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lede { max-width: 720px; margin: 30px 0 0; color: #353535; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 32px; }
.proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(5, 5, 5, .22);
}
.proof-strip > span { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-d); font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.proof-strip i { width: 9px; height: 9px; background: var(--cyan); }

/* The tool becomes the approved dark walkthrough band. */
#calculator {
  scroll-margin-top: 160px;
  width: 100%;
  padding: 110px max(32px, calc((100vw - 1280px) / 2)) 120px;
  background: #09090b;
  color: var(--white);
}
#calculator .section-head { max-width: 820px; margin: 0 0 48px; }
#calculator .section-head .eyebrow { margin-bottom: 18px; }
#calculator .section-head h2 {
  margin: 0;
  max-width: 760px;
  font-family: var(--font-d);
  font-size: clamp(50px, 6.6vw, 92px);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.015em;
  line-height: .9;
  text-transform: uppercase;
}
#calculator .section-head > p:last-child { max-width: 650px; margin: 24px 0 0; color: rgba(255,255,255,.66); font-size: 18px; line-height: 1.65; }

.calculator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
  align-items: start;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 14px 14px 0 var(--cyan);
  background: #0e0e12;
}
.calc-form { min-width: 0; counter-reset: calcQuestion; }
.tool-header { min-height: 104px; display: flex; align-items: center; padding: 25px 28px; border-bottom: 1px solid rgba(255,255,255,.18); }
.tool-header h3 { margin: 0; font-family: var(--font-d); font-size: 29px; font-weight: 800; font-style: italic; letter-spacing: .05em; line-height: 1; text-transform: uppercase; }
.tool-header p { margin: 9px 0 0; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.45; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field {
  position: relative;
  min-height: 218px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-content: start;
  gap: 18px;
  padding: 30px 26px 26px 68px;
  border-right: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
  counter-increment: calcQuestion;
}
.field::before {
  content: counter(calcQuestion, decimal-leading-zero);
  position: absolute;
  top: 29px;
  left: 24px;
  color: var(--cyan);
  font-family: var(--font-d);
  font-size: 20px;
  font-weight: 800;
  font-style: italic;
}
.field > span { font-family: var(--font-d); font-size: 21px; font-weight: 800; font-style: italic; line-height: 1.05; text-transform: uppercase; }
.field input {
  width: 100%;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 0;
  outline: 0;
  background: #050505;
  color: var(--white);
  font-family: var(--font-d);
  font-size: 24px;
  font-weight: 800;
}
.field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0,229,204,.2); }
.field small { grid-column: 1 / -1; color: rgba(255,255,255,.54); font-size: 12px; line-height: 1.55; }
.answer-format { display: block; margin-bottom: 4px; color: var(--white); font-family: var(--font-d); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

.calculator-depth { border: 0; }
.calculator-depth summary {
  min-height: 98px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
  list-style: none;
  border-bottom: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(105deg, rgba(0,229,204,.14), rgba(85,170,255,.08) 48%, rgba(155,89,255,.16));
  cursor: pointer;
}
.calculator-depth summary::-webkit-details-marker { display: none; }
.calculator-depth summary b { display: block; font-family: var(--font-d); font-size: 24px; font-weight: 800; font-style: italic; letter-spacing: .04em; text-transform: uppercase; }
.calculator-depth summary small { display: block; margin-top: 6px; color: rgba(255,255,255,.6); font-size: 12px; }
.calculator-depth summary i { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border: 2px solid var(--cyan); color: var(--white); font-family: var(--font-d); font-size: 31px; font-style: normal; transition: transform .2s var(--ease), background .2s; }
.calculator-depth[open] summary i { transform: rotate(45deg); background: var(--cyan); color: var(--black); }
.calculator-depth:not([open]) > .advanced-field-grid { display: none; }

.calc-results {
  position: sticky;
  top: 168px;
  min-width: 0;
  border-left: 1px solid rgba(255,255,255,.22);
  background: #050505;
}
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.result-box { min-height: 135px; padding: 21px; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.result-box span { display: block; min-height: 32px; margin-bottom: 10px; color: rgba(255,255,255,.53); font-family: var(--font-d); font-size: 12px; font-weight: 800; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
.result-box strong { display: block; font-family: var(--font-d); font-size: clamp(29px, 3.4vw, 49px); font-weight: 800; font-style: italic; line-height: .92; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.result-box.total { grid-column: 1 / -1; min-height: 145px; border-left: 4px solid var(--cyan); background: rgba(0,229,204,.06); }
.result-box.total strong { font-size: clamp(42px, 5vw, 66px); }

.lead-gate {
  scroll-margin-top: 170px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.4fr);
  gap: 46px;
  margin-top: 72px;
  padding: 44px;
  border: 2px solid var(--cyan);
  background: #050505;
  box-shadow: 14px 14px 0 var(--violet);
}
.lead-copy .eyebrow { margin-bottom: 16px; }
.lead-copy strong { display: block; font-family: var(--font-d); font-size: clamp(36px, 4.2vw, 58px); font-weight: 800; font-style: italic; line-height: .9; text-transform: uppercase; }
.lead-copy > span { display: block; margin-top: 20px; color: rgba(255,255,255,.64); font-size: 15px; line-height: 1.6; }
.lead-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lead-fields label > span { display: block; margin-bottom: 7px; color: rgba(255,255,255,.74); font-family: var(--font-d); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lead-fields input,
.lead-fields select { width: 100%; min-height: 52px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.32); border-radius: 0; outline: 0; background: #111116; color: var(--white); }
.lead-fields input:focus,
.lead-fields select:focus { border-color: var(--cyan); }
.lead-fields .primary-btn { width: 100%; align-self: end; }
.gate-status { grid-column: 2; margin: 0; color: var(--cyan); font-size: 13px; }
.calculator-report { margin-top: 46px; padding: 32px; border: 1px solid rgba(255,255,255,.2); background: #111116; color: var(--white); }

.revenue-calculator-page footer { padding: 72px 0 34px; background: var(--black); color: var(--white); }
.revenue-calculator-page footer .wrap { width: min(calc(100% - 64px), 1280px); margin: 0 auto; }
.revenue-calculator-page footer .footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.revenue-calculator-page footer .footer-logo img { max-height: 80px; width: auto; }
.revenue-calculator-page footer .footer-tagline { max-width: 360px; color: rgba(255,255,255,.66); line-height: 1.65; }
.revenue-calculator-page footer h5 { margin: 0 0 18px; font-family: var(--font-d); font-size: 20px; text-transform: uppercase; }
.revenue-calculator-page footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.revenue-calculator-page footer a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; color: rgba(255,255,255,.66); }
.revenue-calculator-page footer a:hover { color: var(--cyan); }
.revenue-calculator-page footer .footer-bottom { margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); text-align: center; }

@media (max-width: 1180px) {
  .revenue-calculator-page #nav .nav-inner { display: flex; height: 96px; justify-content: flex-end; }
  .revenue-calculator-page #nav .nav-links,
  .revenue-calculator-page #nav .nav-actions { display: none; }
  .revenue-calculator-page #nav .nav-logo { position: absolute !important; left: 50%; transform: translateX(-50%) !important; }
  .revenue-calculator-page #nav .nav-logo img { width: 210px; max-height: 82px; }
  .revenue-calculator-page #nav .nav-hamburger { display: flex; }
  .calculator-grid { grid-template-columns: 1fr; }
  .calc-results { position: static; border-top: 1px solid rgba(255,255,255,.22); border-left: 0; }
  .field { min-height: 195px; }
}

@media (max-width: 800px) {
  .revenue-calculator-page .hero { min-height: auto; padding: 200px 0 78px; }
  .revenue-calculator-page .hero-grid { width: min(calc(100% - 64px), 704px); }
  .revenue-calculator-page .hero h1 { font-size: clamp(62px, 13.5vw, 102px) !important; line-height: .88 !important; }
  #calculator { padding: 88px 32px 100px; }
  .field-grid { grid-template-columns: 1fr; }
  .field { min-height: 0; border-right: 0; }
  .lead-gate { grid-template-columns: 1fr; gap: 34px; padding: 34px; }
  .gate-status { grid-column: 1; }
  .revenue-calculator-page footer .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .urgency-inner { height: 44px; gap: 8px; padding: 0 10px; }
  .urgency-copy { max-width: 250px; font-size: 10px; letter-spacing: .045em; line-height: 1.1; }
  .urgency-link { font-size: 10px; }
  .revenue-calculator-page #nav { top: 44px; }
  .revenue-calculator-page #nav .nav-inner { height: 86px; padding: 0 20px; }
  .revenue-calculator-page #nav .nav-logo img { width: 190px; max-height: 76px; }
  .revenue-calculator-page #nav .nav-mobile .lang-btn { min-width: 44px; min-height: 44px; }
  .revenue-calculator-page #nav .mobile-start-links a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .revenue-calculator-page .hero { padding: 172px 0 64px; }
  .revenue-calculator-page .hero-grid { width: calc(100% - 64px); }
  .revenue-calculator-page .hero .eyebrow { gap: 10px; font-size: 11px; letter-spacing: .2em; }
  .revenue-calculator-page .hero .eyebrow::before { width: 28px; }
  .revenue-calculator-page .hero h1 { font-size: clamp(50px, 14.6vw, 68px) !important; line-height: .89 !important; }
  .hero-lede { margin-top: 24px; font-size: 16px; line-height: 1.55; }
  .hero-actions { align-items: stretch; gap: 14px; margin-top: 28px; }
  .hero-actions .primary-btn,
  .hero-actions .text-link { width: 100%; text-align: center; }
  .proof-strip { display: grid; gap: 12px; margin-top: 26px; padding-top: 20px; }
  #calculator { padding: 72px 32px 86px; }
  #calculator .section-head { margin-bottom: 36px; }
  #calculator .section-head h2 { font-size: clamp(46px, 13.5vw, 62px); }
  #calculator .section-head > p:last-child { font-size: 16px; }
  .calculator-grid { box-shadow: 8px 8px 0 var(--cyan); }
  .tool-header { min-height: 0; padding: 22px 20px; }
  .field { grid-template-columns: 1fr 90px; gap: 14px; padding: 24px 20px 22px 54px; }
  .field::before { top: 23px; left: 18px; font-size: 17px; }
  .field > span { font-size: 18px; }
  .field input { min-height: 50px; font-size: 21px; }
  .calculator-depth summary { min-height: 90px; padding: 18px 20px; }
  .calculator-depth summary b { font-size: 20px; }
  .calculator-depth summary small { font-size: 11px; line-height: 1.4; }
  .calculator-depth summary i { width: 42px; height: 42px; flex-basis: 42px; }
  .result-box { min-height: 120px; padding: 17px 14px; }
  .result-box span { min-height: 42px; font-size: 11px; }
  .result-box strong { font-size: 31px; }
  .result-box.total strong { font-size: 43px; }
  .lead-gate { margin-top: 54px; padding: 28px 22px; box-shadow: 8px 8px 0 var(--violet); }
  .lead-fields { grid-template-columns: 1fr; }
  .lead-copy strong { font-size: 40px; }
  .revenue-calculator-page footer .wrap { width: calc(100% - 64px); }
  .revenue-calculator-page footer .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .revenue-calculator-page footer .footer-tagline { margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}