/*
  SchemeReady: the marketing pages' product pictures and the Compliance Tools
  layouts (index, compliance-tools, for-consultants, pricing). Builds on tokens.css and site.css;
  load after pages.css.

  A product moment (.pm) is a screen or a file from Compliance Tools, drawn in
  HTML for the made-up firm "Example Traffic Services Ltd (fictional)". Every
  word in it is in the markup, so it reads the same with no script, no CSS
  animation and under reduced motion. assets/showcase.js adds .is-armed and
  then .is-playing when a moment scrolls into view; the steps arrive once and
  the picture rests. The starting state lives inside the keyframes (site.css
  section 9, rule 2), so if nothing plays, everything 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 editing it needs no rebuild.
*/

/* ------------------------------------------------------------
   The announcement line in the home page's navy top section
   ------------------------------------------------------------ */
.hero-pill {
  display: inline-flex; align-items: center; gap: .6rem; max-width: 100%;
  margin: 0 0 1.1rem; padding: .3rem .9rem .3rem .3rem;
  border: 1px solid var(--ds-sr-nav-quiet-border); border-radius: 1.4rem;
  color: var(--ds-sr-on-hero); font-size: var(--sr-fs-sm); font-weight: 600; line-height: 1.35;
  text-decoration: none; transition: background-color .15s ease, border-color .15s ease;
}
.hero .hero-pill:not(.btn), .page-head .hero-pill:not(.btn) { color: var(--ds-sr-on-hero); }
.hero-pill:hover { background: color-mix(in srgb, var(--ds-sr-on-hero) 10%, transparent); border-color: var(--ds-sr-accent); text-decoration: none; }
.hero-pill-tag {
  display: inline-block; padding: .2rem .6rem; border-radius: var(--sr-radius-pill);
  background: var(--ds-sr-accent); color: var(--ds-sr-on-accent);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.hero-pill-tag, .hero-pill-go { flex: 0 0 auto; }
.hero-pill-text { min-width: 0; }
.hero-pill-go { color: var(--ds-sr-accent); }

/* ------------------------------------------------------------
   Product moments
   ------------------------------------------------------------ */
.pm { margin: 0; min-width: 0; }
.pm-window {
  background: var(--sr-surface); color: var(--sr-text);
  border: 1px solid var(--sr-line); border-radius: var(--sr-radius);
  box-shadow: var(--sr-shadow-lg); overflow: hidden;
  font-size: var(--sr-fs-sm); line-height: 1.45; text-align: left;
}
.pm-window p, .pm-window ul, .pm-window ol { margin: 0; }
/* Inside a navy section or page header, ".section-navy p" and its kin would
   win over a single class, so every coloured part of a moment is written
   with .pm-window in front. */
.pm-window p, .pm-window li { color: inherit; }
.pm-bar {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem 1rem; background: var(--sr-bg-soft); border-bottom: 1px solid var(--sr-line);
}
.pm-window .pm-bar-title { font-weight: 700; color: var(--sr-heading); }
.pm-window .pm-bar-note { margin-left: auto; color: var(--sr-muted); font-size: .78rem; }
.pm-body { display: grid; gap: .9rem; padding: 1rem; }
.pm-window .pm-label { font-size: .78rem; font-weight: 700; color: var(--sr-heading); margin-bottom: .35rem; }
.pm-chips { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; }
.pm-window .pm-chips li {
  margin: 0; padding: .25rem .7rem; border-radius: var(--sr-radius-pill);
  border: 1px solid var(--sr-line-strong); font-size: .78rem; color: var(--sr-text);
}
.pm-window .pm-chips li.is-on { background: var(--ds-sr-primary); border-color: var(--ds-sr-primary); color: var(--sr-bg); font-weight: 600; }
.pm-steps { list-style: none; padding: 0; display: grid; gap: .3rem; }
.pm-steps li, .pm-ticks li { position: relative; padding-left: 1.55rem; margin: 0; }
.pm-window .pm-steps li { color: var(--sr-muted); }
.pm-steps li::before, .pm-ticks li::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: var(--sr-amber-tint);
}
.pm-steps li::after, .pm-ticks li::after {
  content: ""; position: absolute; left: 0; top: .1em; width: 1.1rem; height: 1.1rem;
  background: var(--sr-amber-text);
  -webkit-mask: var(--tick-mark) center / 100% no-repeat; mask: var(--tick-mark) center / 100% no-repeat;
}
.pm-ticks { list-style: none; padding: 0; display: grid; gap: .35rem; }

/* A file: the firm's own paper, with its logo at the top. */
.pm-sheet {
  background: var(--sr-surface); border: 1px solid var(--sr-line); border-radius: var(--sr-radius-sm);
  box-shadow: var(--sr-shadow); padding: .9rem 1rem 0; display: grid; gap: .6rem; overflow: hidden;
}
.pm-sheet-head { display: flex; align-items: center; gap: .65rem; padding-bottom: .6rem; border-bottom: 2px solid var(--sr-line); }
.pm-logo {
  flex: 0 0 auto; position: relative; width: 2.4rem; height: 2.4rem; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--ds-sr-surface-brand); color: var(--ds-sr-on-brand);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
}
/* A road marking under the initials: the made-up firm's mark. */
.pm-logo::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 18%; height: 3px; border-radius: 2px; background: var(--ds-sr-accent); }
.pm-window .pm-firm { font-size: .74rem; color: var(--sr-muted); }
.pm-window .pm-doc-title { font-weight: 800; color: var(--sr-heading); font-size: .98rem; line-height: 1.3; }
.pm-window .pm-ref { margin-left: auto; text-align: right; font-size: .7rem; color: var(--sr-muted); white-space: nowrap; }
.pm-window .pm-h { font-weight: 700; color: var(--sr-heading); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.pm-sheet ul { padding-left: 1.1rem; display: grid; gap: .25rem; }
.pm-quote { padding: .55rem .75rem; border-left: 3px solid var(--sr-amber); background: var(--sr-bg-soft); border-radius: 0 6px 6px 0; }
.pm-window .pm-foot {
  margin: .1rem -1rem 0; padding: .5rem 1rem; border-top: 1px solid var(--sr-line);
  background: var(--sr-bg-soft); font-size: .72rem; color: var(--sr-muted);
}
/* A file's foot can carry two lines, the safety line over the draft line. */
.pm-window .pm-foot span { display: block; }
.pm-window .pm-foot span + span { margin-top: .25rem; }
.pm-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Pictures of buttons, not buttons: nothing here can be pressed. */
.pm-btn {
  display: inline-block; padding: .35rem .85rem; border-radius: var(--sr-radius-pill);
  border: 1.5px solid var(--sr-heading); color: var(--sr-heading); font-size: .76rem; font-weight: 700;
}
.pm-btn.is-main { background: var(--ds-sr-accent); border-color: var(--ds-sr-accent); color: var(--ds-sr-on-accent); }
.pm-badge {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: var(--sr-radius-pill);
  background: var(--ds-success-bg); color: var(--ds-success-fg); border: 1px solid var(--ds-success-border);
  font-size: .74rem; font-weight: 700;
}
.pm-tag {
  display: inline-block; padding: .1rem .5rem; border-radius: 4px; font-size: .72rem; font-weight: 700;
  background: var(--ds-warning-bg); color: var(--ds-warning-fg); border: 1px solid var(--ds-warning-border);
}

/* The three things to do with a finding, numbered. */
.pm-todo { list-style: none; padding: 0; display: grid; gap: .5rem; counter-reset: pm-todo; }
.pm-todo li { counter-increment: pm-todo; position: relative; margin: 0; padding: .55rem .7rem .55rem 2.6rem; border: 1px solid var(--sr-line); border-radius: var(--sr-radius-sm); background: var(--sr-surface); }
.pm-todo li::before {
  content: counter(pm-todo); position: absolute; left: .65rem; top: .55rem; width: 1.45rem; height: 1.45rem;
  border-radius: 50%; background: var(--ds-sr-primary); color: var(--sr-bg);
  display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 800;
}
.pm-window .pm-todo strong { color: var(--sr-heading); }

/* The document control table on a drafted document. */
.pm .table-wrap { margin: 0; border: 0; background: none; border-radius: 0; }
.pm .table-wrap table.pm-control { min-width: 0; }
.pm-control { width: 100%; border-collapse: collapse; font-size: .72rem; margin: 0; table-layout: fixed; }
.pm-control th, .pm-control td { border: 1px solid var(--sr-line); padding: .3rem .45rem; text-align: left; vertical-align: top; }
.pm-control th { background: var(--sr-bg-soft); color: var(--sr-heading); font-weight: 700; width: 38%; }
/* Lines of body text too small to read, drawn as bars. */
.pm-lines { display: grid; gap: .35rem; padding: .1rem 0; }
.pm-lines span { display: block; height: .45rem; border-radius: 4px; background: var(--sr-line); }
.pm-lines span:nth-child(2n) { width: 92%; }
.pm-lines span:nth-child(3n) { width: 78%; }
.pm-changed { border: 1px dashed var(--sr-line-strong); border-radius: var(--sr-radius-sm); padding: .55rem .7rem; display: grid; gap: .3rem; }

.pm figcaption { margin-top: .75rem; font-size: var(--sr-fs-sm); color: var(--sr-muted); }
.section-navy .pm figcaption, .page-head .pm figcaption { color: var(--ds-sr-on-hero-muted); }

/* ------------------------------------------------------------
   The arrival, once, when a moment is in view
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pm-rise { from { opacity: 0; transform: translateY(.55rem); } }
  @keyframes pm-pop { from { opacity: 0; transform: scale(.88); } }

  /* The shorthand resets the delay, so each step's delay below is written
     with the same weight and comes after it. */
  .pm.is-armed [data-pm-step] { animation: pm-rise 480ms var(--ds-motion-ease) both; animation-play-state: paused; }
  .pm.is-armed [data-pm-step].pm-pop { animation-name: pm-pop; }
  .pm.is-playing [data-pm-step] { animation-play-state: running; }

  .pm.is-armed [data-pm-step="1"] { animation-delay: 150ms; }
  .pm.is-armed [data-pm-step="2"] { animation-delay: 650ms; }
  .pm.is-armed [data-pm-step="3"] { animation-delay: 1150ms; }
  .pm.is-armed [data-pm-step="4"] { animation-delay: 1450ms; }
  .pm.is-armed [data-pm-step="5"] { animation-delay: 1750ms; }
  .pm.is-armed [data-pm-step="6"] { animation-delay: 2050ms; }
  .pm.is-armed [data-pm-step="7"] { animation-delay: 2350ms; }
  .pm.is-armed [data-pm-step="8"] { animation-delay: 2650ms; }
}
@media print {
  .pm [data-pm-step] { animation: none !important; }
}

/* ------------------------------------------------------------
   The tools, grouped by when they're used
   ------------------------------------------------------------ */
.tool-groups { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .tool-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool-group {
  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.5rem); min-width: 0;
}
/* A group across the whole grid (Before your visit on for-consultants.html),
   its tools side by side where there's room. */
@media (min-width: 720px) { .tool-group-wide { grid-column: 1 / -1; } }
@media (min-width: 960px) { .tool-group-wide .tool-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.75rem; } }
.tool-group-title {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem;
  font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sr-amber-text);
}
.tool-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.tool-list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .1rem .85rem; align-content: start; margin: 0; }
.tool-list h3, .tool-list h4 { margin: .15rem 0 .25rem; font-size: var(--sr-fs-h4); }
.tool-list p { margin: 0; color: var(--sr-text); }
.tool-ico {
  grid-row: span 2; width: 2.5rem; height: 2.5rem; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-sr-brand-tint); color: var(--ds-sr-primary);
}
.tool-ico svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* The compact list on the home page: names only, two columns where they fit. */
.tool-list-compact { gap: .6rem; }
.tool-list-compact li { grid-template-columns: 2.1rem minmax(0, 1fr); align-items: center; }
.tool-list-compact .tool-ico { grid-row: auto; width: 2.1rem; height: 2.1rem; border-radius: 8px; }
.tool-list-compact .tool-ico svg { width: 1.15rem; height: 1.15rem; }
.tool-list-compact strong { color: var(--sr-heading); }

/* ------------------------------------------------------------
   The Compliance Tools band on the home page, and the page's own sections
   ------------------------------------------------------------ */
.tools-split { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .tools-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.tools-split > * { min-width: 0; }
.tools-split .eyebrow + h1, .tools-split .eyebrow + h2 { margin-top: 0; }
.tools-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.tools-price { font-size: var(--sr-fs-sm); color: var(--sr-muted); margin-top: 1rem; }
.section-navy .tools-price { color: var(--ds-sr-on-hero-muted); }
.section-navy .tool-list-compact strong { color: var(--ds-sr-on-hero); }
.section-navy .tool-list-compact .tool-ico { background: color-mix(in srgb, var(--ds-sr-on-hero) 12%, transparent); color: var(--ds-sr-accent); }
.section-navy .tool-list-compact li { color: var(--ds-sr-on-hero-muted); }
.section-navy .btn-secondary { background: transparent; color: var(--ds-sr-on-hero); border-color: var(--ds-sr-on-hero-muted); }
.section-navy .btn-secondary:hover { background: color-mix(in srgb, var(--ds-sr-on-hero) 12%, transparent); color: var(--ds-sr-on-hero); }
.tools-columns { display: grid; gap: .6rem 1.5rem; margin-top: 1.25rem; }
@media (min-width: 520px) { .tools-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The checks before a visit: three cards, each saying which product has it. */
.check-card .card-icon { background: var(--ds-sr-brand-tint); color: var(--ds-sr-primary); }
.check-card .card-icon svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.with-line {
  display: inline-block; margin-top: .9rem; padding: .2rem .65rem; border-radius: var(--sr-radius-pill);
  background: var(--sr-amber-tint); color: var(--sr-amber-text); font-size: .78rem; font-weight: 700;
}

/* The expert hour as an add-on line under the pricing cards. */
.addon-line {
  margin-top: 1.5rem; padding: 1rem 1.25rem; display: grid; gap: .35rem;
  background: var(--sr-surface); border: 1px solid var(--sr-line); border-left: 5px solid var(--sr-amber);
  border-radius: var(--sr-radius-sm); box-shadow: var(--sr-shadow);
}
.addon-line p { margin: 0; }
.addon-line .addon-title { color: var(--sr-heading); font-size: 1.05rem; }
.addon-line .addon-text { color: var(--sr-muted); font-size: var(--sr-fs-sm); }

/* Two moments side by side on a wide screen, each with its words beside it. */
.moment-row { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.moment-row h3 { margin-top: 0; }
@media (min-width: 900px) {
  .moment-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .moment-row > div:not(.pm) { padding-top: 2.5rem; }
  .moment-row.reverse > :first-child { order: 2; }
}
.moment-row + .moment-row { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.moment-row > * { min-width: 0; }

/* Phones: the moments keep their words a readable size and their files
   their room. */
@media (max-width: 480px) {
  .pm-body { padding: .85rem; }
  .pm-sheet { padding: .8rem .85rem 0; }
  .pm-window .pm-foot { margin: .1rem -.85rem 0; padding: .5rem .85rem; }
  .pm-window .pm-ref { display: none; }
  .tool-list li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .1rem .7rem; }
  .tool-ico { width: 2.25rem; height: 2.25rem; }
}
@media (forced-colors: active) {
  .pm-window .pm-chips li.is-on, .hero-pill-tag, .pm-btn.is-main { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}