/* Ordered content sections: prose, figures, plans, calculators. */

.bc-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--bc-cream);
}
.bc-section--tinted {
  background: #fffaf1;
}
.bc-section + .bc-section {
  padding-top: 0;
}
.bc-section--tinted + .bc-section,
.bc-section + .bc-section--tinted {
  padding-top: clamp(4rem, 8vw, 7rem);
}

/* Prose block, optionally split with a supporting image. */
.bc-prose {
  max-width: 68ch;
}
/* 65/35 split. The copy column owns the row height (heading + body); the
   figure stretches across it so the illustration runs from the heading down to
   the last line of copy. */
.bc-prose--split {
  display: grid;
  grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
  max-width: none;
}
.bc-prose--split .bc-prose__main {
  min-width: 0;
}
.bc-prose--split .bc-section-heading {
  margin-bottom: 1.75rem;
}
.bc-prose__body p {
  max-width: 62ch;
  color: var(--bc-muted);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
}
.bc-prose__figure {
  margin: 0;
}
/* Height is capped so a very tall illustration cannot run to over a thousand
   pixels; landscape images are unaffected and still size by width. In the
   split layout it is capped tighter still, so the picture sits alongside the
   copy instead of hanging far below it. */
.bc-prose__figure img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 28rem;
  height: auto;
  margin-inline: auto;
  border-radius: var(--bc-radius);
}

/* The image is taken out of flow so it cannot drive the row height — the copy
   column does. It then fills that height exactly, top to bottom. */
.bc-prose--split .bc-prose__figure {
  position: relative;
  margin-top: 2rem;
}
.bc-prose--split .bc-prose__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.bc-checklist {
  display: grid;
  gap: 0.8rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}
.bc-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-weight: 650;
}
.bc-checklist li::before {
  content: "✓";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  color: #fff;
  background: var(--bc-leaf);
  font-size: 0.8rem;
}

.bc-bullets {
  display: grid;
  gap: 0.75rem;
  margin: 1.6rem 0 0;
  padding-left: 1.2rem;
  color: var(--bc-muted);
  line-height: 1.6;
}
.bc-bullets li::marker {
  color: var(--bc-red);
}

/* Standalone figure (org chart, diagrams). */
.bc-figure {
  margin: 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  background: var(--bc-white);
  box-shadow: 0 14px 40px rgba(86, 32, 41, 0.06);
}
.bc-figure img {
  display: block;
  width: 100%;
  max-width: 62rem;
  height: auto;
  margin-inline: auto;
}
.bc-figure figcaption {
  margin-top: 1.2rem;
  color: var(--bc-muted);
  font-size: 0.86rem;
  text-align: center;
}

/* Pros/cons groups inside the comparison cards. */
.bc-vs__group + .bc-vs__group {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--bc-line);
}
.bc-vs__group h4 {
  margin: 0 0 0.7rem;
  font-family: var(--bc-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bc-vs__group--pro h4 {
  color: var(--bc-leaf);
}
.bc-vs__group--con h4 {
  color: var(--bc-red-dark);
}

/* App logo used in place of a glyph on BaliCASH comparison cards. */
.bc-vs__icon--logo {
  padding: 0;
  background: none !important;
  overflow: hidden;
  border-radius: 0.6rem;
}
.bc-vs__icon--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hero artwork that is not a tall guide portrait. */
/* The frame hugs its image instead of stretching to the grid column, which
   would leave wide empty margins either side of a portrait-shaped picture. */
.bc-hero-art {
  display: grid;
  place-items: center;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-lg);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.85), rgba(234, 220, 196, 0.5));
  box-shadow: var(--bc-shadow);
}
/* Height is capped as well as width so a tall portrait does not tower over the
   copy column beside it. */
.bc-hero-art img {
  width: auto;
  max-width: 100%;
  max-height: 24rem;
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(62, 39, 38, 0.14));
}
.bc-hero-art--bare {
  width: min(100%, 30rem);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.bc-hero-art--bare img {
  width: 100%;
  max-width: 100%;
  max-height: none;
  filter: drop-shadow(0 22px 34px rgba(62, 39, 38, 0.22));
}

/* Hero with a photographic backdrop (agent page). */
.bc-page-hero--backdrop {
  isolation: isolate;
  background: var(--bc-cream);
}
.bc-page-hero--backdrop::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: var(--bc-hero-backdrop);
  background-size: cover;
  background-position: center;
}
/* Scrim is lightest over the artwork and strongest under the copy column, so
   the photo stays visible while the text keeps its contrast. */
.bc-page-hero--backdrop::before {
  z-index: -1;
  opacity: 1;
  background-image: none;
  background: linear-gradient(100deg, rgba(251, 246, 237, 0.3) 0%, rgba(251, 246, 237, 0.55) 42%, rgba(251, 246, 237, 0.9) 72%, rgba(251, 246, 237, 0.95) 100%);
  mask-image: none;
}

/* Reversed hero: artwork first, copy second (agent page). */
.bc-page-hero--reversed .bc-page-hero__grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
.bc-page-hero--reversed .bc-page-hero__copy {
  order: 2;
}
.bc-page-hero--reversed .bc-hero-art,
.bc-page-hero--reversed .bc-guide-card {
  order: 1;
}

@media (max-width: 820px) {
  .bc-page-hero--reversed .bc-page-hero__copy {
    order: 1;
  }
  .bc-page-hero--reversed .bc-hero-art {
    order: 2;
  }
}

/* Hero partner logo slot. */
.bc-hero-partner {
  display: inline-flex;
  align-items: center;
  margin-top: 1.75rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-sm);
  background: rgba(255, 255, 255, 0.7);
}
.bc-hero-partner img {
  width: auto;
  max-width: 9rem;
  max-height: 2.2rem;
  object-fit: contain;
}

/* Subscription plans — every card the same height so the row stays symmetrical. */
.bc-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}
.bc-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  background: var(--bc-white);
  box-shadow: 0 14px 40px rgba(86, 32, 41, 0.06);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.bc-plan__foot {
  display: grid;
  gap: 0.8rem;
  margin-top: auto;
}
.bc-plan__flag--hidden {
  visibility: hidden;
}
.bc-plan:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 31, 44, 0.28);
  box-shadow: var(--bc-shadow);
}
.bc-plan--featured {
  border-color: transparent;
  background: linear-gradient(165deg, #fffaf0, #f3e3c7);
  box-shadow: var(--bc-shadow);
}
.bc-plan__flag {
  position: absolute;
  top: -0.75rem;
  right: 1.25rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  color: #fff;
  background: var(--bc-red);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.bc-plan h3 {
  margin: 0 0 0.9rem;
  color: var(--bc-wine);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}
.bc-plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0;
  color: var(--bc-red-dark);
}
.bc-plan__price strong {
  font: 700 clamp(2rem, 3.4vw, 2.7rem)/1 var(--bc-display);
}
.bc-plan__price span {
  font-size: 0.8rem;
  font-weight: 600;
}
.bc-plan__note {
  margin: 0.45rem 0 0;
  color: var(--bc-muted);
  font-size: 0.78rem;
}
.bc-plan__features {
  display: grid;
  gap: 0.55rem;
  margin: 1.4rem 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}
.bc-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.bc-plan__features li::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--bc-leaf);
  font-weight: 700;
}
.bc-plan .bc-button {
  width: 100%;
}
.bc-plan__footnote {
  margin: 0;
  min-height: 2.2em;
  color: var(--bc-muted);
  font-size: 0.72rem;
}

/* Earnings calculators — equal height, slider driven. */
.bc-calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}
.bc-calc {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  background: var(--bc-white);
  box-shadow: 0 14px 40px rgba(86, 32, 41, 0.06);
}
.bc-calc h3 {
  margin: 0 0 0.5rem;
  color: var(--bc-wine);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
}
.bc-calc__blurb {
  margin: 0 0 1.6rem;
  color: var(--bc-muted);
  font-size: 0.82rem;
}

.bc-field {
  margin-bottom: 1.5rem;
}
.bc-field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.bc-field label span {
  color: var(--bc-muted);
  font-size: 0.8rem;
  font-weight: 600;
}
.bc-field output {
  color: var(--bc-red-dark);
  font: 700 1rem var(--bc-body);
  white-space: nowrap;
}
.bc-field__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  color: var(--bc-muted);
  font-size: 0.66rem;
}

/* Range slider, styled consistently across engines. */
.bc-calc input[type="range"] {
  --bc-slider-fill: 50%;
  width: 100%;
  height: 1.6rem;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.bc-calc input[type="range"]::-webkit-slider-runnable-track {
  height: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--bc-red) var(--bc-slider-fill), var(--bc-sand) var(--bc-slider-fill));
}
.bc-calc input[type="range"]::-moz-range-track {
  height: 0.45rem;
  border-radius: 999px;
  background: var(--bc-sand);
}
.bc-calc input[type="range"]::-moz-range-progress {
  height: 0.45rem;
  border-radius: 999px;
  background: var(--bc-red);
}
.bc-calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: -0.45rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--bc-red);
  box-shadow: 0 3px 10px rgba(201, 31, 44, 0.35);
}
.bc-calc input[type="range"]::-moz-range-thumb {
  width: 1.35rem;
  height: 1.35rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--bc-red);
  box-shadow: 0 3px 10px rgba(201, 31, 44, 0.35);
}
.bc-calc input[type="range"]:focus-visible {
  outline: 3px solid #e7a82d;
  outline-offset: 4px;
}

.bc-calc__meta {
  margin: 0 0 1.2rem;
  color: var(--bc-muted);
  font-size: 0.82rem;
}
.bc-calc__meta strong {
  color: var(--bc-red-dark);
}
.bc-calc__results {
  display: grid;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--bc-line);
}
.bc-calc__results div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.bc-calc__results span {
  color: var(--bc-muted);
  font-size: 0.82rem;
}
.bc-calc__results strong {
  color: var(--bc-red-dark);
  font: 700 clamp(1.15rem, 2vw, 1.6rem)/1.1 var(--bc-display);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .bc-prose--split {
    grid-template-columns: 1fr;
  }
  .bc-prose__figure {
    order: -1;
    max-width: 22rem;
    margin-inline: auto;
  }
}

/* ---------------------------------------------------------------------------
   Full-screen heroes (desktop only)
   Every hero fills exactly one viewport minus the app bar and sticky header,
   so the fold lands in the same place on every page and every screen size.
   Content is centred within that space; a hero taller than the viewport is
   still allowed to grow rather than being clipped. Mobile is left alone — the
   stacked layout there already reads well and a forced 100vh would squeeze it.
--------------------------------------------------------------------------- */
@media (min-width: 821px) {
  .bc-hero,
  .bc-page-hero {
    display: grid;
    align-content: center;
    min-height: calc(100vh - var(--bc-chrome));
  }
  /* Padding no longer sets the height, so trim it back and let the centring do
     the work — otherwise short heroes get double the intended breathing room. */
  .bc-hero { padding-block: clamp(1.75rem, 4vh, 4.5rem); }
  .bc-page-hero { padding-block: clamp(1.75rem, 4vh, 4.5rem); }
  .bc-page-hero--compact { padding-block: clamp(1.5rem, 3vh, 3.5rem); }
}

/* Short desktop screens (roughly 1366x768 laptops): the hero copy alone is
   taller than the space left by the chrome, so step the display type and the
   hero artwork down rather than letting the fold drift past the viewport. */
@media (min-width: 821px) and (max-height: 780px) {
  .bc-hero__content h1 { font-size: clamp(2.2rem, 4.2vw, 3.3rem); }
  .bc-hero__lead { font-size: 1rem; }
  .bc-hero__visual { min-height: min(38rem, 50vh); }
  .bc-hero__postcard { height: min(34rem, 45vh); }
  .bc-page-hero__copy h1 { font-size: clamp(2rem, 3.2vw, 2.9rem); }
}