/* Alison Solutions page bodies (nav stays site chrome) */

@font-face {
  font-family: 'Phosphor-Thin-Sol';
  src: url('/assets/solutions/phosphor-thin.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.sol-alison {
  font-family: var(--h1b-font);
  color: var(--h1b-ink);
  background: #fff;
  --sol-ink: var(--h1b-ink);
  --sol-muted: var(--h1b-muted);
  --sol-kicker: #868382;
  /* Site container: mirrors .home-1b__inner gutters */
  --sol-gutter: 24px;
  overflow-x: clip;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .sol-alison {
    --sol-gutter: 80px;
  }
}

.sol-alison h1,
.sol-alison h2,
.sol-alison h3,
.sol-alison p {
  margin: 0;
}

.sol-alison a {
  text-decoration: none;
}

/* Figma links carry their own colour inline; leave site buttons (.h1b-btn) alone */
.sol-alison a:not([class]) {
  color: inherit;
}

/* Every list here draws its own bullet or chip, so drop the UA indent */
.sol-alison ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sol-alison img {
  max-width: 100%;
  height: auto;
}

/* Full Phosphor Thin so Solutions icons (share-network, handshake, etc.) render */
.sol-alison i.ph-thin {
  font-family: 'Phosphor-Thin-Sol', 'Phosphor-Thin', sans-serif !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.sol-alison .ph-thin.ph-arrow-right::before {
  content: '\e06c';
}
.sol-alison .ph-thin.ph-arrows-clockwise::before {
  content: '\e094';
}
.sol-alison .ph-thin.ph-bank::before {
  content: '\e0b4';
}
.sol-alison .ph-thin.ph-brackets-curly::before {
  content: '\e860';
}
.sol-alison .ph-thin.ph-briefcase::before {
  content: '\e0ee';
}
.sol-alison .ph-thin.ph-calendar-check::before {
  content: '\e712';
}
.sol-alison .ph-thin.ph-clipboard-text::before {
  content: '\e198';
}
.sol-alison .ph-thin.ph-clock::before {
  content: '\e19a';
}
.sol-alison .ph-thin.ph-coins::before {
  content: '\e78e';
}
.sol-alison .ph-thin.ph-currency-circle-dollar::before {
  content: '\e54c';
}
.sol-alison .ph-thin.ph-cursor-click::before {
  content: '\e7c8';
}
.sol-alison .ph-thin.ph-database::before {
  content: '\e1de';
}
.sol-alison .ph-thin.ph-door-open::before {
  content: '\e7e6';
}
.sol-alison .ph-thin.ph-drop::before {
  content: '\e210';
}
.sol-alison .ph-thin.ph-eye::before {
  content: '\e220';
}
.sol-alison .ph-thin.ph-gavel::before {
  content: '\ea32';
}
.sol-alison .ph-thin.ph-handshake::before {
  content: '\e582';
}
.sol-alison .ph-thin.ph-identification-card::before {
  content: '\e2c8';
}
.sol-alison .ph-thin.ph-lightning::before {
  content: '\e2de';
}
.sol-alison .ph-thin.ph-list-checks::before {
  content: '\eadc';
}
.sol-alison .ph-thin.ph-share-network::before {
  content: '\e408';
}
.sol-alison .ph-thin.ph-storefront::before {
  content: '\e470';
}
.sol-alison .ph-thin.ph-trend-down::before {
  content: '\e4ac';
}
.sol-alison .ph-thin.ph-user-check::before {
  content: '\eafa';
}
.sol-alison .ph-thin.ph-user-focus::before {
  content: '\e6fc';
}
.sol-alison .ph-thin.ph-users-three::before {
  content: '\e68e';
}
.sol-alison .ph-thin.ph-vault::before {
  content: '\e76e';
}

.sol-alison .sol-span-2 {
  grid-column: span 2;
}

/* —— Site container & rhythm ——
   The page bodies come from Figma with their own inline widths and padding.
   These rules pull them onto the same grid as Home and the Product pages:
   content column = var(--h1b-max), gutters = .home-1b__inner, 88px sections. */
.sol-alison [style*='max-width: 1280px'] {
  max-width: var(--h1b-max) !important;
}

/* The FAQ block reuses .home-1b__inner, whose own gutter would double up
   on top of the section padding */
.sol-alison .home-1b__inner {
  width: 100%;
  max-width: var(--h1b-max);
}

.sol-alison > section {
  padding-block: 88px !important;
  padding-inline: var(--sol-gutter) !important;
}

.sol-alison > section[data-screen-label='Hero'] {
  padding-block: 64px 72px !important;
}

.sol-alison > section[data-screen-label='CTA'] {
  padding-block: 96px !important;
}

/* —— Site type scale ——
   Figma tops out at 52px; the site caps section titles at 40px (.h1b-title)
   and page titles at 44px (.pp-hero__title). */

/* The Figma bodies use bare h1–h4, so without this they render at the UA's
   bold while every other page sits on .h1b-title's 600. */
.sol-alison h1,
.sol-alison h2,
.sol-alison h3,
.sol-alison h4 {
  font-weight: 600;
}

.sol-alison h1[style*='clamp(32px, 3.9vw, 52px)'] {
  font-size: clamp(1.875rem, 4vw, 2.75rem) !important;
  line-height: 1.1;
}

.sol-alison h2[style*='clamp(34px, 3.6vw, 52px)'],
.sol-alison h2[style*='clamp(30px, 3vw, 44px)'],
.sol-alison h2[style*='clamp(28px, 3vw, 40px)'] {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  line-height: 1.12;
}

/* Stage headings use .nowrap to hold the designed line breaks. The four-up
   grid can sit near its 220px min-track, so the type is capped to that
   width. Below 900px .nowrap is allowed to wrap. */
@media (min-width: 900px) {
  .sol-alison
    > section[data-screen-label='Phased path']
    h3[style*='clamp(20px, 1.7vw, 24px)'] {
    font-size: 1rem !important;
  }
}

/* Section ledes and body copy sit a step above the site's .h1b-lede (17px),
   which pushed an extra line into most columns against the Figma. The hero
   keeps its own larger sub, as on Home, and mobile keeps the 1rem set in the
   767px block below. */
@media (min-width: 768px) {
  .sol-alison
    > section:not([data-screen-label='Hero'])
    p[style*='font-size: 18px'],
  .sol-alison
    > section:not([data-screen-label='Hero'])
    p[style*='clamp(18px, 1.4vw, 22px)'],
  .sol-alison
    > section:not([data-screen-label='Hero'])
    p[style*='clamp(18px, 1.5vw, 22px)'] {
    font-size: 1.0625rem !important;
    line-height: 1.55;
  }
}

/* These stats sit in three narrow cards, so they are sized against the card
   rather than the viewport; the same figures run full width on the other
   pages and keep their original scale. */
.sol-alison
  > section[data-screen-label='Market proof']
  p[style*='clamp(40px, 4.4vw, 60px)'] {
  font-size: clamp(2.125rem, 3.6vw, 3.25rem) !important;
}

/* —— Buttons: .h1b-btn metrics —— */
.sol-alison a[style*='border-radius: 6px'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px !important;
  border-radius: 8px !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.2;
  transition: opacity 0.15s ease;
}

.sol-alison a[style*='border-radius: 6px']:hover {
  opacity: 0.92;
}

/* Same three button fills as the rest of the site */
.sol-alison a[style*='background: #a2ffc8'] {
  color: var(--h1b-accent-ink) !important;
}

.sol-alison a[style*='background: #0d0806'] {
  background: var(--h1b-ink) !important;
}

.sol-alison a[style*='border: 1px solid #ffffff4d'] {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* FAQ — same structure as Home (.h1b-faq-*) */
.sol-alison .h1b-faq .h1b-head {
  text-align: center;
  align-items: center;
}

.sol-alison .h1b-faq-item__q {
  appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.sol-alison .h1b-faq-item__q h3 {
  margin-bottom: 0;
}

.sol-alison .h1b-faq-item__a {
  margin-top: 0;
  padding-top: 16px;
}

.sol-alison .h1b-faq-more {
  margin-top: 40px;
}

.sol-alison .h1b-faq-more .h1b-btn {
  margin-top: 12px;
}

/* Compare cell labels — mobile only */
.sol-alison .sol-compare-a::before,
.sol-alison .sol-compare-b::before {
  display: none;
}

/* —— Tablet / mobile ——
   Single column below the site's tablet breakpoint */
@media (max-width: 899px) {
  .sol-alison [style*='grid-template-columns'] {
    grid-template-columns: 1fr !important;
  }

  /* Keep numbered step rows as number + copy */
  .sol-alison [style*='grid-template-columns: auto 1fr'] {
    grid-template-columns: auto 1fr !important;
  }

  .sol-alison [style*='grid-template-rows'] {
    grid-template-rows: none !important;
  }

  .sol-alison [style*='grid-column'],
  .sol-alison [style*='grid-row'],
  .sol-alison .sol-span-2 {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Sticky sidebars overlap scrolling cards on mobile */
  .sol-alison [style*='position: sticky'],
  .sol-alison [style*='position:sticky'] {
    position: static !important;
    top: auto !important;
  }

  .sol-alison .nowrap {
    white-space: normal !important;
  }

  /* Ecosystem diagram: stack cards, hide connector lines */
  .sol-alison .sol-eco-diagram {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .sol-alison .sol-eco-diagram > [aria-hidden='true'],
  .sol-alison .sol-eco-diagram > .sol-eco-line,
  .sol-alison .sol-eco-diagram > [style*='height: 1px'],
  .sol-alison .sol-eco-diagram > [style*='width: 1px'] {
    display: none !important;
  }

  /* Approach / comparison table → stacked cards */
  .sol-alison .sol-compare-wrap {
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  .sol-alison .sol-compare-wrap > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: none !important;
  }

  .sol-alison .sol-compare-head {
    display: none !important;
  }

  .sol-alison .sol-compare-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    gap: 0 !important;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(13, 8, 6, 0.08);
  }

  .sol-alison .sol-compare-point {
    padding: 16px 18px 10px !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(13, 8, 6, 0.08);
  }

  .sol-alison .sol-compare-a,
  .sol-alison .sol-compare-b {
    padding: 14px 18px !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    border-bottom: none !important;
    border-radius: 0 !important;
  }

  .sol-alison .sol-compare-a {
    background: #f7f7f7 !important;
    color: #555250 !important;
  }

  .sol-alison .sol-compare-b {
    background: #fff !important;
    border-top: 3px solid #a2ffc8 !important;
  }

  .sol-alison .sol-compare-a::before,
  .sol-alison .sol-compare-b::before {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .sol-alison .sol-compare-a::before {
    content: 'Traditional';
    color: #b6b4b4;
  }

  .sol-alison .sol-compare-b::before {
    content: 'Tokeniser enabled';
    color: #323b70;
  }
}

@media (max-width: 767px) {
  /* Section rhythm: .h1b-section mobile */
  .sol-alison > section {
    padding-block: 56px !important;
  }

  .sol-alison > section[data-screen-label='Hero'] {
    padding-block: 40px 48px !important;
  }

  .sol-alison > section[data-screen-label='CTA'] {
    padding-block: 64px !important;
  }

  /* Section heads read left on mobile, like Home */
  .sol-alison [style*='text-align: center'] {
    text-align: left !important;
    align-items: flex-start !important;
  }

  .sol-alison h1[style*='clamp(32px, 3.9vw, 52px)'],
  .sol-alison h1[style*='clamp(30px, 3.2vw, 44px)'] {
    font-size: 2rem !important;
  }

  .sol-alison h2[style*='clamp(34px, 3.6vw, 52px)'],
  .sol-alison h2[style*='clamp(30px, 3vw, 44px)'],
  .sol-alison h2[style*='clamp(28px, 3vw, 40px)'] {
    font-size: 1.5rem !important;
  }

  .sol-alison h3[style*='clamp(26px, 2.4vw, 36px)'] {
    font-size: 1.25rem !important;
  }

  .sol-alison h3[style*='clamp(22px, 1.9vw, 28px)'],
  .sol-alison h3[style*='clamp(20px, 1.7vw, 24px)'] {
    font-size: 1.0625rem !important;
  }

  /* Section ledes: .h1b-lede mobile */
  .sol-alison p[style*='font-size: 18px'],
  .sol-alison p[style*='clamp(18px, 1.5vw, 22px)'],
  .sol-alison p[style*='clamp(18px, 1.4vw, 22px)'] {
    font-size: 1rem !important;
  }

  /* Primary actions go full width, like Home and Product mobile */
  .sol-alison a[style*='border-radius: 6px'] {
    width: 100%;
    padding: 14px 22px !important;
  }

  .sol-alison [style*='flex-wrap: wrap'] > a[style*='border-radius: 6px'] {
    flex: 1 1 100%;
  }

  /* CTA band: centred over a readable shade, like .h1b-cta on mobile */
  .sol-alison > section[data-screen-label='CTA'] {
    text-align: center;
  }

  .sol-alison > section[data-screen-label='CTA'] p[style*='max-width'] {
    max-width: none !important;
  }

  .sol-alison > section[data-screen-label='CTA'] > div[style*='inset: 0'] {
    background: linear-gradient(
      180deg,
      rgba(52, 55, 64, 0.45) 0%,
      rgba(52, 55, 64, 0.82) 55%,
      rgba(52, 55, 64, 0.94) 100%
    ) !important;
  }

  /* Mirror Home FAQ accordion exactly (home-1b.css @767) */
  .sol-alison .h1b-faq .h1b-head {
    text-align: left;
    align-items: flex-start;
    margin-bottom: 28px;
  }

  .sol-alison .h1b-faq .h1b-title {
    font-size: 1.5rem !important;
  }

  .sol-alison .h1b-faq .h1b-lede {
    display: block;
    font-size: 1rem !important;
    max-width: none;
  }

  .sol-alison .h1b-faq-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-top: 8px;
  }

  .sol-alison .h1b-faq-item {
    text-align: left;
    border-bottom: 1px solid var(--h1b-line, #e2ded7);
  }

  .sol-alison .h1b-faq-item__q {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100%;
    padding: 14px 0 !important;
    text-align: left !important;
    cursor: pointer;
  }

  .sol-alison .h1b-faq-item__q .ph-thin,
  .sol-alison .h1b-faq-item__q i.ph-thin {
    display: none !important;
  }

  .sol-alison .h1b-faq-item__q h3 {
    margin: 0 !important;
    flex: 1;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .sol-alison .h1b-faq-item__toggle {
    display: block !important;
    color: #a8a29a;
    font-size: 1.125rem;
    line-height: 1;
    flex: none;
  }

  .sol-alison .h1b-faq-item.is-open .h1b-faq-item__toggle {
    transform: rotate(45deg);
  }

  .sol-alison .h1b-faq-item__a {
    display: none;
    padding: 8px 0 14px;
    text-align: left;
  }

  .sol-alison .h1b-faq-item.is-open .h1b-faq-item__a {
    display: block;
  }

  .sol-alison .h1b-faq-item__a p {
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
    color: var(--h1b-muted, #5b5751) !important;
  }

  .sol-alison .h1b-faq-more {
    text-align: left;
    margin-top: 28px;
  }

  /* Long card lists → horizontal peek, same pattern as .h1b-peek on Home:
     stays inside the page gutter, no negative margins. */
  .sol-alison .sol-mobile-peek,
  .sol-alison .sol-capability-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    -webkit-overflow-scrolling: touch;
    margin-inline: 0 !important;
    padding: 4px 0 12px !important;
    grid-template-columns: none !important;
  }

  .sol-alison .sol-mobile-peek > *,
  .sol-alison .sol-capability-track > * {
    flex: 0 0 84% !important;
    width: 84% !important;
    min-width: 84% !important;
    max-width: 84% !important;
    scroll-snap-align: start;
    box-sizing: border-box;
  }

  .sol-alison .sol-capability-track > * {
    background: #fff;
    border-radius: 8px;
    padding: 20px 18px !important;
    border-top: none !important;
  }

  .sol-alison .sol-capability-track [style*='grid-template-columns: auto 1fr'] {
    gap: 14px !important;
  }

  /* Pill/chip rows stack rather than wrap into ragged lines */
  .sol-alison [style*='flex-wrap'] {
    row-gap: 10px;
  }

  .sol-alison ul[style*='flex-wrap'] {
    flex-direction: column;
    align-items: stretch;
  }

  .sol-alison ul[style*='flex-wrap'] > li {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Equal-height cards: share rows so headings, mid-rules and footers line up.
   Text stays top-aligned inside each shared row. */
@media (min-width: 900px) {
  .sol-alison .sol-eq-cards {
    display: grid !important;
    align-items: stretch;
    min-width: 0;
  }

  .sol-alison .sol-eq-cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 24px;
    row-gap: 24px;
  }

  .sol-alison .sol-eq-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 24px;
    row-gap: 20px;
  }

  .sol-alison .sol-eq-cards--flush {
    row-gap: 0;
  }

  .sol-alison .sol-eq-cards--changes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 20px;
    row-gap: 24px;
  }

  .sol-alison .sol-eq-card {
    display: grid !important;
    grid-template-rows: subgrid !important;
    grid-row: span var(--sol-eq-span, 1) !important;
    align-items: stretch;
    min-width: 0;
    height: auto;
  }

  .sol-alison .sol-eq-span-2 {
    --sol-eq-span: 2;
  }
  .sol-alison .sol-eq-span-3 {
    --sol-eq-span: 3;
  }
  .sol-alison .sol-eq-span-4 {
    --sol-eq-span: 4;
  }
  .sol-alison .sol-eq-span-5 {
    --sol-eq-span: 5;
  }
  .sol-alison .sol-eq-span-6 {
    --sol-eq-span: 6;
  }

  .sol-alison .sol-eq-card > * {
    min-width: 0;
  }
}

@media (min-width: 1100px) {
  .sol-alison .sol-eq-cards--changes {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.sol-alison .sol-slate-card {
  background: #343740 !important;
}

.sol-alison .sol-eco-logo {
  height: 64px !important;
  width: auto;
  display: block;
}

.sol-alison .sol-compare-row--last,
.sol-alison .sol-compare-row--last .sol-compare-a,
.sol-alison .sol-compare-row--last .sol-compare-b {
  border-bottom: none !important;
}

@supports not (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .sol-alison .sol-eq-card {
      display: flex !important;
      flex-direction: column !important;
      grid-row: auto !important;
      height: 100%;
      align-items: flex-start !important;
    }

    .sol-alison .sol-eq-card > :last-child {
      margin-top: auto;
      width: 100%;
    }
  }
}