/* ===========================================================================
   Acquisition and availability panel
   ---------------------------------------------------------------------------
   Sits directly under the hero on every product page. Answers availability,
   price and every route in before a buyer scrolls, so the evidence,
   architecture, security and procurement content below it can stay long
   without the page reading as a wall with the commercial answer at the bottom.

   Three columns on desktop, one on phones. The columns are actions, status and
   price, in that reading order, because the order the columns are declared in
   is the order a screen reader and a phone will read them, and "what can I do"
   has to come before "what does it cost".

   Every interactive target here is at least 44px tall. The buttons set it with
   min-height rather than padding arithmetic, so a long label that wraps to two
   lines grows the target instead of overflowing it.

   No animation beyond a 2px hover lift borrowed from .si-btn-primary. No
   canvas, no particles, no gradient motion. The panel is the most-read element
   on the page and it does not move while it is being read.
   ======================================================================== */

.si-acquire {
  /* The brand link blue, --si-accent #0078D4, measures 4.18:1 on this panel's
     off-white and so misses AA for the 15px links below. This darker blue was
     already in the file for the reviewed-state badge, for the same reason, so
     the panel now names it once and both uses point here. 7.04:1.

     2026-08-26: the same 4.18 turned up in five more places once the whole site
     was measured rather than this panel, so #14568f was promoted to
     --si-azure-text in style.css and this now points at it. The value is
     unchanged. The alias stays because the three usages below read better
     naming the role than the token, and deleting it would be a rename, not a
     fix. */
  --si-acquire-link: var(--si-azure-text, #14568f);
  background: var(--si-off-white);
  padding: 56px 24px 64px;
  position: relative;
  z-index: 2;
}

.si-acquire-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* --- Header row ---------------------------------------------------------- */

.si-acquire-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 12px;
}

.si-acquire-title {
  font-family: var(--si-font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.2;
  color: var(--si-text-strong);
  margin: 0;
}

/* State chip. Colour is never the only signal: the chip always carries the
   resolved state label as text, so the three tones are emphasis and not
   meaning. A reader who cannot distinguish them loses nothing. */
.si-acquire-state {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--si-radius-pill);
  font-family: var(--si-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.si-acquire-state-open {
  background: rgba(70, 180, 145, 0.14);
  color: #1d6b55;
  border: 1px solid rgba(70, 180, 145, 0.45);
}

.si-acquire-state-reviewed {
  background: rgba(0, 120, 212, 0.10);
  color: var(--si-acquire-link);
  border: 1px solid rgba(0, 120, 212, 0.35);
}

.si-acquire-state-closed {
  background: rgba(17, 32, 50, 0.06);
  color: var(--si-text-body-dark);
  border: 1px solid rgba(17, 32, 50, 0.18);
}

.si-acquire-blurb {
  font-family: var(--si-font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--si-text-body-dark);
  margin: 0 0 28px;
  max-width: 62ch;
}

/* --- The three columns --------------------------------------------------- */

.si-acquire-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.si-acquire-col {
  background: var(--si-white);
  border: 1px solid rgba(17, 32, 50, 0.10);
  border-radius: var(--si-radius-lg);
  padding: 22px 22px 24px;
  min-width: 0;
}

.si-acquire-col-title {
  font-family: var(--si-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--si-text-subtle-dark);
  margin: 0 0 16px;
}

/* --- Actions ------------------------------------------------------------- */

.si-acquire-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--si-radius-pill);
  font-family: var(--si-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.si-acquire-btn + .si-acquire-btn {
  margin-top: 10px;
}

/* Navy on emerald, not white on emerald. White on this green measures 2.56:1,
   which fails AA for the 15px label, and it also disagreed with si-btn-primary,
   the button this one sits next to everywhere else on the site. That rule has
   used navy since it was written. Navy measures 6.42:1 here. Changed 2026-08-26
   after an axe-core sweep; the brand green itself is untouched. */
.si-acquire-btn-primary {
  background: var(--si-emerald);
  color: var(--si-navy);
  border: 1px solid var(--si-emerald);
}

.si-acquire-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(70, 180, 145, 0.32);
  color: var(--si-navy);
}

.si-acquire-btn-secondary {
  background: transparent;
  color: var(--si-text-strong);
  border: 1px solid rgba(17, 32, 50, 0.28);
}

.si-acquire-btn-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--si-text-strong);
  color: var(--si-text-strong);
}

/* The note under a button is where the payment terms land. It is not small
   print: a card-up-front trial that reads as a no-card trial is the single
   most expensive misreading available on this page, so it sits at body size
   and full contrast rather than being tucked away. */
.si-acquire-btn-note {
  font-family: var(--si-font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--si-text-body-dark);
  margin: 10px 0 0;
}

.si-acquire-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 14px;
  font-family: var(--si-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--si-acquire-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Facts --------------------------------------------------------------- */

.si-acquire-facts {
  margin: 0;
}

.si-acquire-facts dt {
  font-family: var(--si-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--si-text-subtle-dark);
  margin: 0 0 4px;
}

.si-acquire-facts dd {
  font-family: var(--si-font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--si-text-strong);
  margin: 0 0 16px;
}

.si-acquire-facts dd:last-child {
  margin-bottom: 0;
}

/* --- Price --------------------------------------------------------------- */

.si-acquire-price-value {
  font-family: var(--si-font-display);
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--si-text-strong);
  margin: 0;
}

.si-acquire-price-tier {
  font-family: var(--si-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--si-text-subtle-dark);
  margin: 6px 0 0;
}

.si-acquire-price-note {
  font-family: var(--si-font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--si-text-body-dark);
  margin: 10px 0 0;
}

/* The qualifier says "you cannot buy this today" on products that publish a
   price and have no checkout. It is bordered rather than greyed, because the
   failure being prevented is a reader treating a printed price as proof of
   purchasability and skimming past the correction. */
.si-acquire-price-qualifier {
  font-family: var(--si-font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--si-text-body-dark);
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 3px solid rgba(220, 116, 14, 0.55);
}

/* --- Routes that are not open -------------------------------------------- */

.si-acquire-closed-wrap {
  margin-top: 24px;
}

.si-acquire-closed-title {
  font-family: var(--si-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--si-text-subtle-dark);
  margin: 0 0 12px;
}

.si-acquire-closed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.si-acquire-closed-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 8px 14px;
  border: 1px dashed rgba(17, 32, 50, 0.28);
  border-radius: var(--si-radius-md);
  background: rgba(17, 32, 50, 0.03);
}

.si-acquire-closed-label {
  font-family: var(--si-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--si-text-body-dark);
}

.si-acquire-closed-status {
  font-family: var(--si-font-sans);
  font-size: 0.8125rem;
  color: var(--si-text-subtle-dark);
}

.si-acquire-detail-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 18px;
  font-family: var(--si-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--si-acquire-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Narrow viewports ----------------------------------------------------
   One column from 900px down. Tested at 320, 360, 390, 412 and 430. The
   columns keep their declared order, so a phone reads actions, then status,
   then price, which is the same order the desktop grid reads left to right.
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .si-acquire-grid {
    grid-template-columns: 1fr;
  }

  /* The gradient band between the hero and this panel. See the 480px block
     below for why it is shortened here rather than in the design system. */
  .si-transition-zone {
    height: 120px;
  }
}

@media (max-width: 480px) {
  .si-acquire {
    padding: 40px 16px 48px;
  }

  /* .si-transition-zone is a contentless navy-to-off-white gradient, declared
     at a flat 200px in si-theme.css and used by fifteen templates. On a 844px
     phone that is a quarter of a viewport spent on a gradient, and it sits in
     the one place where it costs the most: directly between the hero and this
     panel. Measured at 390x844, it was the entire reason the panel opened at
     2.16 screen-heights on Simple Atlas and 2.12 on SimpleForge, past the two
     screens the panel is supposed to stay inside. Nothing above it is
     removable; the hero carries the H1, the positioning line and the primary
     action.

     Shortened here, in a stylesheet enqueued only on product routes, rather
     than in si-theme.css, for two reasons. It keeps the change scoped to the
     pages carrying the requirement instead of restyling fifteen templates on
     one measurement. And si-theme.css is mirrored from
     shared/design-system/si-theme.css by wordpress/scripts/sync-design-system.sh,
     so editing the theme copy directly widens a drift that already exists
     there and is not currently checked by any workflow.

     48px still reads as a transition at this width. */
  .si-transition-zone {
    height: 48px;
  }

  /* --- Hero compression on phones ---------------------------------------
     Once the transition zone was cut, the hero was the entire remaining
     budget above the panel. Measured at 360x800 it ran 1143px on the
     shortest product and 1592px on Simple Atlas, against a two-screen
     ceiling of 1600px that also has to hold the 84px site nav and the
     48px gradient. So four products still opened the panel past two
     screens at that width.

     Nothing here deletes hero content. The H1, the audience line, the
     positioning paragraph, the replaced-tools list, the surface badges and
     the primary action all still render in full. Two things change.

     The H1 was rendering at 44.8px on a 360px screen. Its declared size is
     clamp(2.8rem, 6vw, 4.5rem), and 6vw is 21.6px at that width, so the
     design's own fluid intent was far smaller and the 2.8rem floor was the
     only thing holding it up. On Simple Atlas that floor cost 345px for
     seven lines of roughly ten characters each. The clamp below resumes
     scaling under 480px and lands between 30.4px at 320 and 40.8px at 480,
     meeting the original almost exactly at the breakpoint.

     The rest is vertical rhythm. Six elements carried 2 to 2.5rem of
     margin sized for a 1440px hero; on a phone that is most of a screen
     spent on gaps. They are tightened, not removed, so the hero still
     reads as separated blocks rather than a run of text.

     Scoped to product routes because that is where the two-screen
     requirement applies. The homepage hero keeps its declared type and
     rhythm: acquisition.css is not enqueued there.

     Measured after the change, worst product page of thirteen, panel
     offset in screen-heights:

       430x932   1.67 -> 1.54
       412x915   1.79 -> 1.59
       390x844   2.16 -> 1.71
       360x800   2.15 -> 1.85
       320x568   3.40 -> 2.82

     320x568 is the one width that does not reach two screens, and it is
     not reachable by tightening. Its ceiling is 1136px, of which the site
     nav takes 122 (it wraps to two rows at that width) and the gradient
     48, leaving 966px for a hero that still measures about 1411. Closing
     that would mean dropping the positioning paragraph or the replaced-
     tools list, which is the content this work exists to keep. Left as a
     known limit: the fixed action bar carries the primary CTA on screen
     at every width, so at 320 the bar rather than the panel is what puts
     an acquisition route in front of the reader.
     -------------------------------------------------------------------- */

  .si-hero h1 {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
    margin-bottom: 1rem;
  }

  .si-hero-badge {
    margin-bottom: 1.25rem;
  }

  .si-hero-for {
    margin: 0.25rem auto 1rem;
  }

  .si-hero-sub {
    margin: 0 auto 1.5rem;
  }

  .si-hero-replaces {
    margin: 1rem auto 1.25rem;
  }

  .si-surface-badges-hero {
    margin: 1rem 0 1.25rem;
  }

  .si-acquire-col {
    padding: 18px 16px 20px;
  }

  .si-acquire-closed-item {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .si-acquire-btn,
  .si-acquire-btn:hover {
    transition: none;
    transform: none;
  }
}