/* ============================================================================
   /business-journey — "Financial Insights"
   Every rule scoped with .page-business-journey.

   The live page is a bare 925px column of Duda-free custom markup (the
   "styled-table" pattern) with three calculators collapsed to max-height:0
   underneath the always-visible Core Data block. Reproduced from
   reference/spec/business-journey.desktop.json.
   ========================================================================== */

/* ------------------------------------------------------------- shell --- */
.page-business-journey .bj-inner {
  max-width: 925px;
  margin: 0 auto;
  /* Fractional on purpose. Duda's wrapper puts the h1 at y=253.6 and the last
     (collapsed) calculator at y=1307.9; these two values reproduce both, which
     lands every row of the table and every heading on the same device pixels
     as the live page. Rounding them to 15/24 shifts the whole column by half a
     pixel and re-antialiases every glyph on the page. */
  padding: 14.6px 0 24.4px;
}

/* The live header drops a shadow onto the page below it (spec: the header
   container carries `rgba(0,0,0,.25) 0 3px 11px 0`). The shared header in
   site.css has no shadow — on most pages a dark hero hides it, but this page
   starts on flat white so the missing shadow is a visible 15px band.
   Scoped here rather than fixed in site.css; see the build report. */
.page-business-journey .site-header { box-shadow: rgba(0, 0, 0, 0.25) 0 3px 11px 0; }

/* --------------------------------------------------------- headings --- */
.page-business-journey .bj-page-title {
  font-family: var(--font-rounded);
  font-size: 70px;
  font-weight: 700;
  line-height: normal;
  color: #000;
  text-align: center;
  margin: 120px 0 0.67em;
}
.page-business-journey .crystal-title {
  font-family: var(--font-rounded);
  color: #d9b230;
  text-align: center;
  line-height: normal;
}
.page-business-journey h2.crystal-title {
  font-size: 40px;
  font-weight: 700;
  margin: 0.83em 0;
}
.page-business-journey h3.crystal-title {
  font-size: 30px;
  font-weight: 400;
  margin: 1em 0;
}
.page-business-journey .subheading {
  font-family: Inter, "Inter Fallback", var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: #000;
  text-align: left;
  margin: 1.33em 0;
}

/* ----------------------------------------------------------- tables --- */
.page-business-journey .styled-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 400px;
  margin: 25px 0;
  font-family: sans-serif;
  font-size: 0.9em;          /* 14.4px */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.page-business-journey .styled-table thead tr {
  background-color: #d9b230;
  color: #fff;
  text-align: left;
}
.page-business-journey .styled-table th,
.page-business-journey .styled-table td {
  padding: 12px 15px;
}
.page-business-journey .styled-table td { text-align: left; }
.page-business-journey .styled-table tbody tr { border-bottom: 1px solid #dddddd; }
.page-business-journey .styled-table tbody tr:nth-of-type(even) { background-color: #fff; }
.page-business-journey .styled-table tbody tr:last-of-type { border-bottom: 2px solid #d9b230; }

.page-business-journey .title-row { font-size: 20px; }
.page-business-journey .para-tip { font-size: 12px; font-weight: 400; }
.page-business-journey .cell-bold { font-weight: bold; }
.page-business-journey .cell-one-results { width: 55%; text-align: left; }
.page-business-journey .row-prefix { text-align: left; }
/* Core Data only: a declared width pins the "$" gutter to its min-content size
   (38px, matching the live column) so all of the table's spare width lands in
   the value column instead of being shared with the gutter. The calculator
   tables below share the class on cells that also carry a description, so the
   rule is deliberately not applied to them. */
.page-business-journey #core-data .styled-table .row-prefix { width: 1px; }
.page-business-journey .summary-description { text-align: left; }
.page-business-journey .mountain-des,
.page-business-journey .summary-description,
.page-business-journey .expo-desc { font-size: 12px; }

/* row-level colour treatments */
/* These beat the zebra `tbody tr:nth-of-type(even)` rule above, which would
   otherwise repaint every second highlighted row white — and its text is white
   too, so the row would vanish. */
.page-business-journey .black-row { background-color: #000; color: #fff; }
.page-business-journey .styled-table tbody tr.gp-row {
  background-color: #000;
  color: #fff;
  text-align: left;
}
.page-business-journey .styled-table tbody tr.additional-client-row {
  background-color: #d9b230;
  color: #fff;
}
.page-business-journey .styled-table tbody tr#required-biz {
  background-color: #d9b230;
  color: #fff;
  font-weight: 700;
}
.page-business-journey .funnel-head { font-weight: bold; }
.page-business-journey .gold-head {
  font-family: Inter, "Inter Fallback", var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #d9b230;
  margin: 0;
}

.page-business-journey .border-top { border-top: 2px solid #000; }
.page-business-journey .border-bottom { border-bottom: 2px solid #000; }
.page-business-journey .border-left { border-left: 2px solid #000; }
.page-business-journey .border-right { border-right: 2px solid #000; }

/* ----------------------------------------------------------- inputs --- */
.page-business-journey .styled-table input {
  width: 70%;
  /* Duda's reset leaves the control a 17.33px content box. Without pinning the
     height the UA's own line-height makes every input row ~1px taller and the
     whole table drifts down the page. */
  height: 21.3281px;
  margin: 3px 0;
  padding: 1px 2px;
  border: 1px solid #d9b230;
  background-color: #eee;
  color: #000;
  font-family: inherit;
  font-size: 1.1em;          /* 15.84px */
  line-height: normal;
}
.page-business-journey .input-percent { width: 45px; }

/* ---------------------------------------------------------- buttons --- */
.page-business-journey #basicNav {
  text-align: center;
  margin-top: 40px;
}
.page-business-journey .button {
  display: inline-block;
  margin-left: 10px;
  padding: 15px 32px;
  border: none;
  border-radius: 8px;
  background-color: #000;
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
}
.page-business-journey .button.active { background-color: #d9b230; }

.page-business-journey #reset-but {
  display: inline-block;
  padding: 5px 32px;
  border: none;
  border-radius: 0;
  background-color: #d9b230;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  text-align: center;
}

.page-business-journey .bj-center { text-align: center; }
.page-business-journey .back-to-top {
  display: inline-block;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background-color: #fff;
  color: #d9b230;
  font-family: var(--font-body);
  font-size: 30px;
  line-height: normal;
  text-align: center;
}

/* ------------------------------------------- collapsible calculators ---
   Calculators 2, 3 and 4 are collapsed to zero height on load and expanded
   by the page script setting an explicit max-height — the live behaviour.
   They stay in the flow (not display:none) so their content is still
   exposed to assistive tech and to search engines, exactly as live.        */
.page-business-journey #core-data { margin-bottom: 120px; }
.page-business-journey .content,
.page-business-journey #results-div {
  max-height: 0;
  overflow: hidden;
}
.page-business-journey .content { transition: max-height 0.25s ease-out; }
/* #results-div gets NO transition on purpose. The script reveals it and then
   immediately re-measures the enclosing panel's scrollHeight; if the results
   table were still mid-animation the panel would be pinned ~340px short and
   the campaign totals would sit below the clip. */
.page-business-journey .divider {
  height: 3px;
  background-color: #000;
  margin-bottom: 100px;
}

/* =============================================================== mobile ===
   Duda serves the same 925px layout on phones and lets it scroll sideways;
   that is a defect, not a design. The rebuild keeps every row, every label and
   every figure, and makes them fit a 390px screen.                           */
@media (max-width: 767px) {
  .page-business-journey .bj-inner {
    max-width: 100%;
    padding: 10px 15px 40px;
  }
  .page-business-journey .bj-page-title {
    font-size: 34px;
    margin: 40px 0 0.67em;
  }
  .page-business-journey h2.crystal-title { font-size: 26px; }
  .page-business-journey h3.crystal-title { font-size: 24px; }
  .page-business-journey .subheading { font-size: 16px; }
  .page-business-journey .title-row { font-size: 16px; }

  .page-business-journey .styled-table {
    min-width: 0;
    font-size: 12.6px;
  }
  .page-business-journey .styled-table th,
  .page-business-journey .styled-table td {
    padding: 8px 5px;
    overflow-wrap: anywhere;
  }
  .page-business-journey .styled-table input,
  .page-business-journey .input-percent {
    width: 100%;
    min-width: 0;
    font-size: 14px;
  }
  .page-business-journey .cell-one-results { width: auto; }
  /* Core Data has three columns, so it stays a table — only the "$" gutter is
     pinned narrow so the label and the field get the room. */
  .page-business-journey #core-data .styled-table .row-prefix { width: 1px; }

  /* The three calculators run to four and five columns, which no 360px screen
     can hold as a grid. Their rows become wrapping flex rows instead: label,
     prefix and figure on the first line, the explanatory note underneath. No
     row, note or number is dropped — the table simply reads as a list. */
  .page-business-journey .content .styled-table,
  .page-business-journey .content .styled-table thead,
  .page-business-journey .content .styled-table tbody { display: block; }
  .page-business-journey .content .styled-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    padding: 6px 10px;
  }
  .page-business-journey .content .styled-table th,
  .page-business-journey .content .styled-table td {
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 2px 0;
    overflow-wrap: break-word;
  }
  /* Duda leaves a lot of structural cells empty; on a phone they would read as
     stray blank lines. */
  .page-business-journey .content .styled-table th:empty,
  .page-business-journey .content .styled-table td:empty { display: none; }
  .page-business-journey .content .mountain-des,
  .page-business-journey .content .expo-desc { order: 1; flex: 1 0 100%; }
  .page-business-journey .content .summary-description { order: 2; flex: 1 0 100%; }
  .page-business-journey .content .styled-table input { width: 100%; }
  .page-business-journey .content .styled-table .entry-field,
  .page-business-journey .content .styled-table .cell-two { flex: 1 1 90px; }
  /* Comfortable tap targets on a phone. */
  .page-business-journey .content #reset-but { padding: 8px 16px; min-height: 34px; }
  .page-business-journey .content .summary-description a {
    display: inline-block;
    padding: 9px 0;
  }

  .page-business-journey #core-data { margin-bottom: 60px; }
  .page-business-journey .divider { margin-bottom: 50px; }
  .page-business-journey #basicNav { margin-top: 24px; }
  .page-business-journey .button {
    margin: 6px 0;
    max-width: 100%;
  }
}