/*
  SchemeReady: the home page (index.html), rebuilt on 4 October 2026 so the
  Readiness Assessment and Compliance Tools have the same presence and every
  tool is listed. Builds on tokens.css, site.css, pages.css and showcase.css;
  load after them. Every colour is a token, so both themes follow.

  The order of the page: the navy top section (its carousel of features is
  assets/hero-carousel.css), the two products, every tool (with the firms and
  consultants switch), how it works, consultants and assessment bodies,
  prices, the standards and a closing card. One card system throughout: the
  raised surface, the subtle line, the shared radius and the medium shadow.

  Motion is opt in and never holds the words: the switch fades a line in, and
  assets/home.js lets a few grids rise into place once, only when motion is
  allowed. With no script, no CSS animation or reduced motion, every part is
  simply there. This file is not an input to the How it works moments
  (tools/build_moments.py reads site.css, pages.css and tokens.css), so a
  change here needs no rebuild.
*/

/* ------------------------------------------------------------
   Rhythm
   ------------------------------------------------------------ */
.home .section { padding-block: clamp(3.25rem, 7vw, 6rem); }
.home .section-tight { padding-block: clamp(2rem, 4vw, 3rem); }

/* A section's opening: an amber label, the heading and a lead. The heading
   steps up from the shared h2 so each section starts with presence. */
.home-head { max-width: 46rem; margin: 0 0 clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 700px) { .home-head.is-center { margin-inline: auto; text-align: center; } }
.home-head h2 {
  margin: 0 0 .75rem;
  font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.home-head .eyebrow + h2 { margin-top: 0; }
.home-head > p:not(.eyebrow) { margin: 0; font-size: var(--ds-fs-lead); line-height: 1.55; color: var(--sr-muted); text-wrap: pretty; }
.home-head > p:not(.eyebrow) + p { margin-top: .75rem; }
.section-navy .home-head > p:not(.eyebrow) { color: var(--ds-sr-on-hero-muted); }

/* The small square that carries a product's or a tool's icon. One set of
   line icons, drawn on a 24 grid with round ends, coloured from tokens. */
.ico {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--ds-sr-brand-tint);
  color: var(--ds-sr-primary);
}
.ico svg, .home .tool-ico svg {
  width: 1.35rem; height: 1.35rem;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
/* A product's mark: navy, with the amber line, as the brand mark is drawn. */
.ico-product { width: 3.25rem; height: 3.25rem; border-radius: 14px; background: var(--ds-sr-surface-brand); color: var(--ds-sr-accent); box-shadow: inset 0 0 0 1px var(--ds-sr-surface-brand-hover); }
.ico-product svg { width: 1.7rem; height: 1.7rem; }
.ico-small { width: 2rem; height: 2rem; border-radius: 8px; }
.ico-small svg { width: 1.1rem; height: 1.1rem; }

/* ------------------------------------------------------------
   The navy top section
   ------------------------------------------------------------ */
.home .hero h1 { text-wrap: balance; }
.hero-note + .hero-note { margin-top: .4rem; }

/* ------------------------------------------------------------
   The two products, side by side on a laptop
   ------------------------------------------------------------ */
.products { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.product {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--sr-surface);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius);
  box-shadow: var(--sr-shadow), inset 0 4px 0 var(--ds-sr-accent);
  padding: clamp(1.4rem, 3vw, 2.25rem);
}
.product > * { margin: 0; min-width: 0; }
.product-top { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.product-top .eyebrow { margin: 0; }
.product h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -.015em; line-height: 1.2; margin-bottom: .6rem; }
.product-text { color: var(--sr-muted); margin-bottom: 1.25rem; }
.product .ticks { margin-bottom: 1.5rem; }
.product .ticks li { margin-bottom: .6rem; }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; margin-top: auto; }
@media (min-width: 800px) {
  .products { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A plus between the two halves: use either, or both together. */
  .products::after {
    content: "+"; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--ds-sr-accent); color: var(--ds-sr-on-accent); border: 3px solid var(--sr-bg);
    font-size: 1.5rem; font-weight: 800; line-height: 1; box-shadow: var(--ds-shadow-sm);
  }
}
/* The two halves share their rows, so the headings, the words, the lists and
   the links of both sit on the same lines whatever each one wraps to. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 800px) {
    .products { grid-template-rows: repeat(5, auto); row-gap: 0; }
    .product { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
    .product-actions { align-self: end; }
  }
}
.products-note {
  display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
  margin: clamp(1.25rem, 3vw, 1.75rem) auto 0; max-width: 46rem; text-align: center;
  color: var(--sr-muted); font-size: var(--sr-fs-sm); text-wrap: balance;
}
@media (max-width: 699px) { .products-note { text-align: left; justify-content: flex-start; } }

/* ------------------------------------------------------------
   Every tool, grouped as the app groups them
   ------------------------------------------------------------ */
.tools-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.tools-top .home-head { margin-bottom: 0; }

/* The switch between the two audiences: the home page's tabs, a pill of two
   on a laptop and two full rows on a phone. Without JavaScript it stays
   hidden and the firm's lines show. */
.audience-switch {
  display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .3rem;
  border: 1px solid var(--sr-line); border-radius: 999px; background: var(--sr-surface);
  box-shadow: var(--ds-shadow-sm);
}
.audience-switch[hidden] { display: none; }
.audience-switch-label { display: block; margin: 0 0 .5rem; font-size: var(--sr-fs-sm); font-weight: 600; color: var(--sr-muted); }
.audience-switch-label[hidden] { display: none; }
.audience-tab {
  font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.25;
  color: var(--ds-sr-primary); background: transparent;
  border: 0; border-radius: 999px; padding: .6rem 1.15rem; min-height: 44px;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.audience-tab:hover { background: var(--ds-sr-brand-tint); }
/* The open tab is the page's ink as a fill: navy with white words in light,
   pale blue with dark words in dark. */
.audience-tab[aria-selected="true"] { background: var(--ds-sr-primary); color: var(--sr-bg); }
.audience-tab:focus-visible { outline: 3px solid var(--sr-focus); outline-offset: 2px; }
@media (forced-colors: active) {
  .audience-tab[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
@media (max-width: 34rem) {
  .audience-switch-wrap { width: 100%; }
  .audience-switch { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; border-radius: var(--sr-radius); }
  .audience-switch[hidden] { display: none; }
  .audience-tab { border-radius: var(--sr-radius-sm); text-align: left; }
}

/* A product's band of groups: its mark and name, then its cards. */
.tools-band + .tools-band { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.tools-band-head { display: flex; align-items: center; gap: .85rem; margin: 0 0 1.1rem; }
.tools-band-head h3 { margin: 0; font-size: var(--ds-fs-h3); }
.tools-band-head p { margin: .1rem 0 0; color: var(--sr-muted); font-size: var(--sr-fs-sm); }

/* A group card: its name as the amber label, its tools as a list. */
.tg {
  min-width: 0;
  background: var(--sr-surface);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-radius);
  box-shadow: var(--sr-shadow);
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
}
.tg-title {
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sr-amber-text);
}
.tg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.tg-list > li { margin: 0; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .9rem; align-items: start; align-content: start; }
.tg-list .ico { grid-row: span 3; }
.tg-name { margin: .1rem 0 .2rem; font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: var(--sr-heading); }
.tg-line { margin: 0; color: var(--sr-muted); font-size: var(--sr-fs-sm); line-height: 1.55; }
.tg-tag {
  justify-self: start; margin-top: .6rem; padding: .18rem .6rem; border-radius: var(--sr-radius-pill);
  background: var(--sr-amber-tint); color: var(--sr-amber-text); font-size: .76rem; font-weight: 700; line-height: 1.4;
}
.tg-tag[hidden], .tg-line[hidden] { display: none; }

/* Before your visit: one wide card, its three checks side by side on a
   laptop with a hairline between them. */
@media (min-width: 900px) {
  .tg-wide .tg-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .tg-wide .tg-list > li { padding-inline: 1.5rem; border-left: 1px solid var(--sr-line); }
  .tg-wide .tg-list > li:first-child { padding-left: 0; border-left: 0; }
  .tg-wide .tg-list > li:last-child { padding-right: 0; }
  /* The three share their rows, so the names, the lines and the tags each
     sit on one line across the card, whichever audience is showing. */
  @supports (grid-template-rows: subgrid) {
    .tg-wide .tg-list { grid-template-rows: repeat(3, auto); }
    .tg-wide .tg-list > li { grid-row: span 3; grid-template-rows: subgrid; }
    .tg-wide .tg-tag { align-self: start; }
  }
}

/* Compliance Tools: six cards, three across on a laptop and two on a
   tablet; the cards in a row share its height. */
.tg-grid { display: grid; gap: clamp(1rem, 2vw, 1.25rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .tg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Your records: what the tools made, as the kinds of record it keeps. */
.tg-records .tg-line { margin-bottom: .85rem; }
.record-kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; grid-column: 2; }
.record-kinds li { margin: 0; padding: .2rem .65rem; border-radius: var(--sr-radius-pill); background: var(--ds-sr-brand-tint); color: var(--sr-heading); font-size: .76rem; font-weight: 600; }

/* A new line fades in when the switch changes it, and only then. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hs-line-in { from { opacity: 0; transform: translateY(.2rem); } }
  [data-audience-ready] .tg-line, [data-audience-ready] .tg-tag { animation: hs-line-in .32s var(--ds-motion-ease) both; }
}


/* The practice in the top section's carousel: the assessor's question, the
   answer as typed, and the feedback under it. Drawn from the parts
   showcase.css already has. */
.pm-window .pm-answer {
  padding: .55rem .75rem; border: 1px solid var(--sr-line-strong); border-radius: var(--sr-radius-sm);
  background: var(--sr-surface); color: var(--sr-text);
}
.pm-feedback { display: grid; gap: .55rem; padding: .75rem .85rem; border-radius: var(--sr-radius-sm); background: var(--sr-bg-soft); }
.pm-window .pm-fb-h { font-weight: 700; color: var(--sr-heading); font-size: .78rem; }
.pm-window .pm-fb-h + p { margin-top: -.35rem; }
.pm-window .pm-fb-rating { display: flex; align-items: center; gap: .5rem; }
.pm-window .pm-fb-rating .pm-label { margin: 0; }

/* ------------------------------------------------------------
   How it works, in three steps
   ------------------------------------------------------------ */
.steps-3 { list-style: none; margin: 0; padding: 0; counter-reset: hs-step; display: grid; gap: 1.75rem; }
.steps-3 > li { counter-increment: hs-step; position: relative; margin: 0; padding-left: 3.75rem; }
.steps-3 > li::before {
  content: counter(hs-step);
  position: absolute; left: 0; top: -.15rem;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-sr-accent); color: var(--ds-sr-on-accent); border: 1px solid var(--ds-sr-accent-edge);
  font-weight: 800; font-size: 1.1rem;
}
.steps-3 h3 { margin: 0 0 .45rem; font-size: var(--ds-fs-h3); }
.steps-3 h3 a { color: var(--sr-heading); text-decoration-color: var(--sr-line-strong); }
.steps-3 h3 a:hover { color: var(--sr-link); text-decoration-color: currentColor; }
.steps-3 p { margin: 0; color: var(--sr-muted); }
@media (min-width: 860px) {
  .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .steps-3 > li { padding-left: 0; padding-top: 4.25rem; }
  .steps-3 > li::before { top: 0; }
  /* A hairline from each number to the next. */
  .steps-3 > li:not(:last-child)::after {
    content: ""; position: absolute; top: 1.375rem; left: 3.75rem; right: -1.75rem;
    height: 2px; border-radius: 2px; background: var(--sr-line);
  }
}
.steps-note { margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; max-width: 62rem; color: var(--sr-muted); font-size: var(--sr-fs-sm); }
.steps-foot { margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.steps-note + .steps-foot { margin-top: 1.25rem; }

/* ------------------------------------------------------------
   Consultants and assessment bodies
   ------------------------------------------------------------ */
.bodies { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 960px) { .bodies { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.bodies-intro .home-head { margin-bottom: 1.5rem; }
.bodies-intro .hero-note { color: var(--sr-muted); margin-top: 1rem; }
.bodies-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.25rem); }
@media (min-width: 600px) { .bodies-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bodies-list > li {
  margin: 0; min-width: 0;
  background: var(--sr-surface); border: 1px solid var(--sr-line); border-radius: var(--sr-radius);
  box-shadow: var(--sr-shadow); padding: clamp(1.1rem, 2.5vw, 1.4rem);
}
.bodies-list h3 { margin: .9rem 0 .35rem; font-size: 1.05rem; }
.bodies-list p { margin: 0; color: var(--sr-muted); font-size: var(--sr-fs-sm); }
.bodies-list p + p { margin-top: .6rem; }

/* ------------------------------------------------------------
   Prices: three cards that share their rows, and the expert hour
   ------------------------------------------------------------ */
.price-row { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .price-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @supports (grid-template-rows: subgrid) {
    .price-row > .pricing-card { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; align-content: start; }
    .price-row > .pricing-card > .btn { align-self: end; }
  }
}
.price-row .pricing-features li { font-size: var(--sr-fs-sm); margin-bottom: .45rem; }
.price-row .price { margin-top: .25rem; }
.price-row .price-amount { line-height: 2.6rem; }
.prices-foot { margin-top: 1.25rem; display: grid; gap: .35rem; color: var(--sr-muted); font-size: var(--sr-fs-sm); }
.prices-foot p { margin: 0; }

/* ------------------------------------------------------------
   The standards
   ------------------------------------------------------------ */
.std-family + .std-family { margin-top: clamp(1.5rem, 3vw, 2rem); }
.std-family-title { margin: 0 0 .85rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sr-amber-text); }
.std-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .std-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .std-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.std {
  margin: 0; min-width: 0;
  background: var(--sr-surface); border: 1px solid var(--sr-line); border-radius: var(--sr-radius);
  box-shadow: var(--ds-shadow-sm); padding: 1rem 1.1rem;
  display: grid; gap: .2rem; align-content: start;
}
.std-code { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: var(--sr-heading); }
.std-what { margin: 0; color: var(--sr-muted); font-size: var(--sr-fs-sm); line-height: 1.5; }
/* On a phone each family is one card with a row per standard, so eleven
   standards don't make eleven cards. */
@media (max-width: 559px) {
  .std-grid {
    gap: 0; background: var(--sr-surface); border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius); box-shadow: var(--ds-shadow-sm);
  }
  .std {
    grid-template-columns: 6.25rem minmax(0, 1fr); column-gap: .75rem; align-items: baseline;
    background: none; border: 0; border-radius: 0; box-shadow: none; padding: .8rem 1rem;
  }
  .std + .std { border-top: 1px solid var(--sr-line); }
  .std-code { font-size: 1rem; }
}
.std-foot { margin: clamp(1.5rem, 3vw, 2rem) 0 0; display: grid; gap: .5rem; max-width: 62rem; color: var(--sr-muted); font-size: var(--sr-fs-sm); }
.std-foot p { margin: 0; }

/* ------------------------------------------------------------
   The closing card
   ------------------------------------------------------------ */
.start-card {
  position: relative; overflow: hidden;
  background: var(--ds-sr-hero); color: var(--ds-sr-on-hero-muted);
  border: 1px solid var(--ds-sr-surface-brand-hover);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--sr-shadow-lg), inset 0 4px 0 var(--ds-sr-accent);
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center;
}
.start-card h2 { margin: 0 0 .75rem; color: var(--ds-sr-on-hero); font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.5rem); letter-spacing: -.02em; }
.start-card p { max-width: 40rem; margin: 0 auto; color: var(--ds-sr-on-hero-muted); font-size: var(--ds-fs-lead); }
.start-card .hero-actions { justify-content: center; margin-top: 1.75rem; }
.start-card .btn-secondary { background: transparent; color: var(--ds-sr-on-hero); border-color: var(--ds-sr-on-hero-muted); }
.start-card .btn-secondary:hover { background: color-mix(in srgb, var(--ds-sr-on-hero) 12%, transparent); color: var(--ds-sr-on-hero); }
.start-card a:not(.btn) { color: var(--ds-sr-accent); }
.start-card :focus-visible { outline-color: var(--ds-sr-accent); }
.start-card .start-note { margin-top: 1.25rem; font-size: var(--sr-fs-sm); }

/* ------------------------------------------------------------
   A grid's cards rise into place once (assets/home.js arms them only when
   motion is allowed and the grid is below the first screen). The starting
   state lives in the keyframes, so nothing is ever left hidden.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hs-rise { from { opacity: 0; transform: translateY(.9rem); } }
  [data-rise].is-armed > * { animation: hs-rise 560ms var(--ds-motion-ease) both; animation-play-state: paused; }
  [data-rise].is-playing > * { animation-play-state: running; }
  [data-rise].is-armed > :nth-child(2) { animation-delay: 70ms; }
  [data-rise].is-armed > :nth-child(3) { animation-delay: 140ms; }
  [data-rise].is-armed > :nth-child(4) { animation-delay: 210ms; }
  [data-rise].is-armed > :nth-child(5) { animation-delay: 280ms; }
  [data-rise].is-armed > :nth-child(6) { animation-delay: 350ms; }
  [data-rise].is-armed > :nth-child(n+7) { animation-delay: 420ms; }
}

/* ------------------------------------------------------------
   Phones
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .product-top { margin-bottom: .9rem; }
  .ico-product { width: 2.9rem; height: 2.9rem; border-radius: 12px; }
  .tg-list > li { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .75rem; }
  .tg-list .ico { width: 2.25rem; height: 2.25rem; }
  .tools-band-head { align-items: flex-start; }
}

@media print {
  .audience-switch { display: none !important; }
  [data-rise] > *, .tg-line, .tg-tag { animation: none !important; }
  .start-card { background: none; color: var(--sr-text); box-shadow: none; border: 1px solid var(--sr-line); }
  .start-card h2, .start-card p { color: var(--sr-text); }
}