/* Moved out of ./product/berth-allocation.html so the CSP can drop style-src 'unsafe-inline'. */
    /* Blocks unique to this page. Everything else — type ramp, container rail,
       section padding, buttons, forms — comes from style.css. */

    /* No orange band on this hero. The headline sits on the right rail over a
       dark scrim, the way the scenario tiles further down carry their copy. */
    .p-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(270deg, rgba(16,16,16,.80) 0%, rgba(16,16,16,.46) 40%, rgba(16,16,16,0) 72%);
    }
    .p-hero__inner { z-index: 1; }
    @media (min-width: 1024px) {
      .p-hero__title { left: auto; right: 16px; text-align: right; }
    }
    /* Stacked hero: the title goes static and left, so the scrim goes flat. */
    @media (max-width: 1023px) {
      .p-hero::after { background: rgba(16, 16, 16, .55); }
    }

    /* Stakeholder panel: same chrome as .p-stake--panel. */
    .ba-panel {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 34px 35px;
      background: #fff;
    }
    /* Four questions, not four steps: no numbers and no connector, since either
       one implies a sequence these checks do not have. Boxed on the same
       border, radius and gap as the cause cards below. */
    .ba-qgrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }
    .ba-q {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      padding: 30px;
    }
    /* Held at the card step so the closing line still reads as the conclusion,
       not a fifth question. */
    .ba-q__t {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--heading);
    }

    /* Cause cards */
    .ba-cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }
    .ba-card {
      background: #fff;
      border: 1px solid var(--line);
      border-left: 3px solid var(--orange);
      border-radius: var(--radius-card);
      padding: 30px;
    }
    .ba-card h3 { margin: 0 0 10px; }
    .ba-card p { margin: 0; color: var(--gray-600); }

    .ba-verdict { margin-top: 50px; max-width: 820px; }
    .ba-verdict h3 {
      margin: 0;
      font-size: 19px;
      line-height: 1.4em;
      font-weight: 600;
      color: var(--heading);
    }

    /* Scenarios */
    .ba-scenarios {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }
    .ba-scenario {
      position: relative;
      min-height: 380px;
      border-radius: var(--radius-card);
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      padding: 28px;
      background: var(--ink-2);
      color: #fff;
    }
    .ba-scenario__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .ba-scenario::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(20,20,20,.15) 0%, rgba(20,20,20,.55) 45%, rgba(20,20,20,.92) 100%);
    }
    .ba-scenario__copy { position: relative; z-index: 1; }
    .ba-scenario__tag {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: #ffb06c;
      margin-bottom: 10px;
    }
    .ba-scenario h3 { color: #fff; margin: 0 0 10px; }
    .ba-scenario p { margin: 0; font-size: 15px; line-height: 1.6; color: #e0e0e0; }

    /* Solution band */
    .ba-solution { background: var(--orange); }
    .ba-solution .h-section--left { color: #fff; }
    body[data-page="product"] section.ba-solution .h-section--left::after { background: #fff; }
    .ba-solution__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }
    .ba-solution__card {
      background: #fff;
      border-radius: var(--radius-card);
      padding: 32px 28px;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .ba-solution__card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 40px rgba(90, 30, 0, .22);
    }
    .ba-solution__card h3 { margin: 0 0 10px; }
    .ba-solution__card p { margin: 0; color: var(--gray-600); }

    /* Before / after process columns */
    .ba-compare {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }
    .ba-process {
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      padding: 34px;
      background: #fff;
    }
    .ba-process--on { border-color: var(--orange); }
    .ba-process h3 { margin: 0 0 28px; }
    .ba-step {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 12px 0;
      font-size: 16px;
      color: var(--heading);
    }
    .ba-step__dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--gray-300);
      flex: none;
    }
    .ba-process--on .ba-step__dot { background: var(--orange); }
    .ba-process__final {
      margin: 25px 0 0;
      padding: 15px;
      border-radius: 8px;
      background: #f9f9f9;
      font-weight: 700;
      color: var(--heading);
      text-align: center;
    }
    .ba-process--on .ba-process__final { background: var(--orange); color: #fff; }

    /* Stakeholder columns, in the shared panel */
    .ba-stake {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: 24px;
      row-gap: 30px;
    }
    .ba-stake__title {
      display: block;
      font-size: 18px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--heading);
      margin-bottom: 8px;
    }
    .ba-stake p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--gray-600); }

    .ba-sub { margin: -16px 0 30px; }

    @media (max-width: 1023px) {
      .ba-scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .ba-solution__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .ba-stake { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 767px) {
      .ba-qgrid { grid-template-columns: 1fr; }
      .ba-q { padding: 24px; }
      .ba-cards,
      .ba-scenarios,
      .ba-solution__grid,
      .ba-compare,
      .ba-stake { grid-template-columns: 1fr; }
      .ba-panel { padding: 24px; }
    }