/*
  Buyer routes, guides, the partner route block and the homepage guides strip.

  Enqueued from functions.php on the routes that render this furniture and on
  the front page, never site-wide. Everything here is scoped under a class only
  those templates emit (.si-route-*, .si-guide-*, .si-guides-*, .si-home-guides),
  so this file cannot restyle another page, and deleting it takes these pages'
  own furniture with it and nothing else.

  Tokens come from si-theme.css and the accessible text tokens declared at the
  top of style.css. Two rules govern colour here, and both are inherited from
  the contrast pass of 2026-08-26 rather than decided again:

    dark surface, green text   uses --si-emerald
    light surface, green text  uses --si-emerald-text
    light surface, link text   uses --si-azure-text

  No @font-face, no url(), no image, no animation. Hover and focus transitions
  are the only motion, and the reduced-motion block at the foot removes them.
  Every grid floor is wrapped in min(<px>, 100%), which is what stops a column
  from being wider than a 320px phone. See tests/e2e/grid-floors-mobile.spec.ts.
*/

/* ---------- shared: the hero on a route or a guide ---------- */

/*
  The site hero is sized for a homepage. On a route the one action has to sit
  in the first screen of a phone, so the hero is shorter, the serif h1 steps
  down at phone widths, and the sub-copy is allowed one more line than the
  homepage gives it. acquisition.css does the same compression on product pages
  for the same reason and is not enqueued here, so the phone rules are repeated
  rather than borrowed.
*/
.si-route-hero,
.si-guide-hero {
  min-height: 0;
  padding: 132px 0 64px;
}

.si-route-hero-content,
.si-guide-hero-content {
  max-width: 860px;
}

.si-route-h1,
.si-guide-h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
}

.si-route-lede,
.si-guide-answer {
  max-width: 44em;
  margin-bottom: 2rem;
}

/* The direct answer under a guide's question is body copy doing a heading's
   job, so it is one step larger than the site's hero sub-copy and left in
   plain weight. */
.si-guide-answer {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.6;
}

.si-guide-for {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
  max-width: 46em;
  margin: 0 auto;
}

.si-guide-for-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--si-emerald);
  margin-right: .4rem;
}

.si-route-ctas {
  align-items: center;
}

/*
  The quieter link beside the one button. A text link and not a second button,
  because the page has one action. Given a 44px box so it is a target and not
  a sliver, with the extra height taken above the text so the baseline lines
  up with the button label.
*/
.si-route-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-family: var(--si-font-sans), system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--si-text-light);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(192, 204, 221, .45);
}

.si-route-secondary:hover,
.si-route-secondary:focus-visible {
  color: #fff;
  text-decoration-color: var(--si-emerald);
}

/* The same link on a light surface, under a guide's action. */
.si-route-secondary-light {
  color: var(--si-azure-text);
  text-decoration-color: rgba(20, 86, 143, .4);
}

.si-route-secondary-light:hover,
.si-route-secondary-light:focus-visible {
  color: var(--si-prussian);
  text-decoration-color: var(--si-prussian);
}

/* The trial terms beside a trial button. Never lighter than body copy on the
   surface it sits on, because it is the part that has to be true. */
.si-route-action-note {
  flex: 1 1 100%;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--si-text-light);
  max-width: 36em;
  margin: 0;
}

.si-light-section .si-route-action-note {
  color: var(--si-text-body-dark);
}

/* A shorter dark-to-light transition than the homepage's 200px, so the
   audience block lands inside the second phone screen. */
.si-route-transition {
  height: 96px;
}

/* ---------- who it is for, what an evaluation produces ---------- */

.si-route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

.si-route-panel {
  background: #fff;
  border: 1px solid rgba(17, 32, 50, .08);
  border-radius: var(--si-radius-lg);
  padding: 1.75rem 1.75rem 1.5rem;
}

.si-route-panel-h {
  font-family: var(--si-font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--si-prussian);
  margin: 0 0 1rem;
}

.si-route-list,
.si-route-outcome {
  margin: 0;
  padding: 0 0 0 1.35rem;
  display: grid;
  gap: .7rem;
}

.si-route-list li,
.si-route-outcome li {
  font-size: .98rem;
  line-height: 1.6;
  color: var(--si-text-body-dark);
}

.si-route-list li::marker {
  color: var(--si-emerald-text);
}

.si-route-outcome li::marker {
  font-family: var(--si-font-display);
  font-weight: 600;
  color: var(--si-emerald-text);
}

.si-route-not-for {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(17, 32, 50, .08);
  font-size: .93rem;
  line-height: 1.55;
  color: var(--si-text-subtle-aa);
}

/* ---------- the compact product list ---------- */

.si-route-products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: .75rem;
}

.si-route-product-link {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  min-height: 44px;
  border: 1px solid rgba(24, 44, 67, .12);
  border-radius: 9px;
  background: #fbfcfd;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease;
}

.si-route-product-link:hover,
.si-route-product-link:focus-visible {
  border-color: var(--si-emerald-text);
  background: #fff;
}

.si-route-product-link:focus-visible {
  outline: 2px solid var(--si-emerald-text);
  outline-offset: 3px;
}

.si-route-product-name {
  font-family: var(--si-font-display), var(--si-font-sans), system-ui, sans-serif;
  font-size: 16px;
  color: var(--si-prussian);
}

.si-route-product-tagline {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--si-text-body-dark);
}

/* The access label is derived, never typed, and styled quietly for the same
   reason the breadth band styles its own quietly: it is the answer to "can I
   get this today", not a badge of progress. */
.si-route-product-state {
  font-family: var(--si-font-mono), ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--si-text-subtle-aa);
  margin-top: 2px;
}

/* ---------- guide links: on routes, on guides, on the homepage ---------- */

.si-route-guides {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: .9rem;
}

.si-route-guide-link {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid rgba(24, 44, 67, .12);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}

.si-route-guide-link:hover,
.si-route-guide-link:focus-visible {
  border-color: var(--si-emerald-text);
  transform: translateY(-1px);
}

.si-route-guide-link:focus-visible {
  outline: 2px solid var(--si-emerald-text);
  outline-offset: 3px;
}

.si-route-guide-name {
  font-family: var(--si-font-display), var(--si-font-sans), system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--si-prussian);
}

.si-route-guide-summary {
  font-size: 14px;
  line-height: 1.5;
  color: var(--si-text-body-dark);
}

/* ---------- the guides hub ---------- */

.si-guides-grid {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem;
}

.si-guides-card-link {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  height: 100%;
  padding: 1.75rem 1.6rem 1.5rem;
  background: #fff;
  border: 1px solid rgba(17, 32, 50, .08);
  border-radius: var(--si-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.si-guides-card-link:hover,
.si-guides-card-link:focus-visible {
  border-color: rgba(42, 111, 89, .5);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(17, 32, 50, .08);
}

.si-guides-card-link:focus-visible {
  outline: 2px solid var(--si-emerald-text);
  outline-offset: 3px;
}

.si-guides-card-h {
  font-family: var(--si-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--si-prussian);
  margin: 0;
}

.si-guides-card-summary {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--si-text-body-dark);
  margin: 0;
}

.si-guides-card-for {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--si-text-subtle-aa);
  margin: 0;
}

.si-guides-card-more {
  margin-top: auto;
  padding-top: .5rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--si-emerald-text);
}

/* ---------- a guide page ---------- */

.si-guide-inner {
  max-width: 820px;
}

/* The site's section title is sized for one heading per section. A guide has
   six, so they are stepped down and keep the family and the colour, the same
   way the methodology page steps its headings down. */
.si-guide-h2 {
  font-family: var(--si-font-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--si-navy);
  margin: 3rem 0 1rem;
}

.si-guide-h2:first-child {
  margin-top: 0;
}

.si-guide-intro {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--si-text-body-dark);
  max-width: 40em;
  margin: 0 0 1.25rem;
}

/* The method: an ordered list whose numbers are the visual spine. The
   counter is drawn with a pseudo-element rather than a marker so it can be
   sized and coloured without changing the list semantics a screen reader
   announces. */
.si-guide-steps {
  list-style: none;
  counter-reset: si-guide-step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.si-guide-step {
  counter-increment: si-guide-step;
  position: relative;
  padding: 1.25rem 1.5rem 1.25rem 4.1rem;
  background: #fff;
  border: 1px solid rgba(17, 32, 50, .08);
  border-radius: 12px;
}

.si-guide-step::before {
  content: counter(si-guide-step);
  position: absolute;
  left: 1.25rem;
  top: 1.15rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--si-font-display);
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
  background: var(--si-emerald-text);
  pointer-events: none;
}

.si-guide-step-h {
  font-family: var(--si-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--si-prussian);
  margin: 0 0 .45rem;
}

.si-guide-step p {
  font-size: .98rem;
  line-height: 1.65;
  color: var(--si-text-body-dark);
  margin: 0;
}

.si-guide-checklist,
.si-guide-questions {
  margin: 0;
  padding: 0 0 0 1.5rem;
  display: grid;
  gap: .6rem;
}

.si-guide-checklist li,
.si-guide-questions li {
  font-size: .98rem;
  line-height: 1.6;
  color: var(--si-text-body-dark);
}

.si-guide-checklist {
  list-style: square;
}

.si-guide-checklist li::marker {
  color: var(--si-emerald-text);
}

.si-guide-questions li::marker {
  font-family: var(--si-font-display);
  font-weight: 600;
  color: var(--si-emerald-text);
}

/*
  The disclosure. The orange token, which on this site marks the point where
  a person decides, is used here for the same reason: this is where the reader
  decides how much of the page to believe. White panel, so the ink is decided
  once and clears AA on it.
*/
.si-guide-evidence {
  margin: 3rem 0 0;
  padding: 1.35rem 1.5rem;
  background: #fff;
  border: 1px solid rgba(24, 44, 67, .1);
  border-left: 4px solid var(--si-orange);
  border-radius: 8px;
  max-width: 44em;
}

.si-guide-evidence .si-guide-evidence-h {
  font-family: var(--si-font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--si-amber-text);
  margin: 0 0 .7rem;
}

.si-guide-evidence p {
  font-size: .98rem;
  line-height: 1.65;
  color: var(--si-prussian);
  margin: 0 0 .75rem;
}

.si-guide-evidence p:last-child {
  margin-bottom: 0;
}

.si-guide-action {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(17, 32, 50, .08);
}

.si-guide-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.si-guide-back {
  margin: 2.5rem 0 0;
}

/* ---------- the partner route block ---------- */

.si-partner-route .si-section-inner {
  padding-top: 3.5rem;
}

.si-partner-route-products-h {
  margin: 2.5rem 0 1rem;
  max-width: 42em;
}

.si-partner-route-action {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

/* ---------- the homepage guides strip ---------- */

.si-home-guides .si-section-desc {
  margin-bottom: 2rem;
}

.si-home-guides-more {
  margin: 1.5rem 0 0;
}

/* ---------- phones ---------- */

@media (max-width: 640px) {
  .si-route-hero,
  .si-guide-hero {
    padding: 108px 0 44px;
  }

  .si-route-h1,
  .si-guide-h1 {
    font-size: clamp(1.75rem, 8vw, 2.3rem);
    margin-bottom: 1rem;
  }

  .si-route-lede,
  .si-guide-answer {
    margin-bottom: 1.5rem;
  }

  .si-route-ctas {
    flex-direction: column;
  }

  .si-route-ctas .si-route-action {
    width: 100%;
    text-align: center;
  }

  .si-route-panel {
    padding: 1.35rem 1.25rem 1.25rem;
  }

  .si-guide-step {
    padding: 1.1rem 1.1rem 1.1rem 3.6rem;
  }

  .si-guide-step::before {
    left: 1rem;
    top: 1rem;
    width: 1.75rem;
    height: 1.75rem;
    font-size: .85rem;
  }

  .si-guide-action-row .si-route-action {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .si-route-product-link,
  .si-route-guide-link,
  .si-guides-card-link {
    transition: none;
  }

  .si-route-guide-link:hover,
  .si-route-guide-link:focus-visible,
  .si-guides-card-link:hover,
  .si-guides-card-link:focus-visible {
    transform: none;
  }
}