/* =====================================================================
   Round four, second pass (30 September 2026).
   ===================================================================== */

/* ---------------------------------------------------------------- the window's app header
   The browser bar showed addresses that do not exist. Each panel now opens on an app header: the Suite, the tool and
   the sample item, and a chip that tells the truth: the passport is a live platform (a real link), the other five
   show a sample of the report the team delivers. */
.m .sw-chrome { display: none; }
.m .sw-panel { grid-template-rows: auto minmax(0, 1fr); }
.m .sw-appbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; min-height: 54px; padding: 0 16px 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .08); }
.m .sa-brand { display: inline-flex; align-items: center; gap: 10px; font: 600 13.5px/1 var(--f-display); letter-spacing: .01em; color: #fff; white-space: nowrap; }
.m .sa-brand img { width: 20px; height: 20px; }
.m .sa-crumb { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .04em; color: #8FB0D8; white-space: nowrap; }
.m .sa-crumb span::before { content: '/'; margin-right: 10px; color: rgba(143, 176, 216, .5); }
.m .sa-crumb span:last-child { color: #DCE7F6; }
.m .sa-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .16); font: 500 11px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase;
  color: #BBD8F7; text-decoration: none; white-space: nowrap; }
.m .sa-chip--live { color: #8FE0B6; border-color: rgba(111, 211, 162, .35); background: rgba(111, 211, 162, .08); transition: background-color .15s; }
.m .sa-chip--live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #6FD3A2; }
.m .sa-chip--live:hover { background: rgba(111, 211, 162, .16); }
.js-motion .sw-panel .sw-appbar > * { opacity: 0; transition: opacity .35s ease; }
.js-motion .sw-panel.is-on .sw-appbar > * { opacity: 1; }

/* ---------------------------------------------------------------- from problem to proof: a scroll story
   The hero turns on its own; this section moves only as the reader scrolls. The picture of the problem stays pinned
   while the six steps pass beside it, and each step's proof card settles onto the picture. */
.m .story-band { background: #FBFBFD; padding-top: 128px; }
.m .story-band .band-head { margin-bottom: 40px; }
.m .story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.m .story-visual { position: sticky; top: 112px; height: min(660px, calc(100vh - 150px)); min-height: 460px; overflow: hidden;
  border-radius: 28px; background: #0B1F3A; isolation: isolate;
  box-shadow: 0 1px 2px rgba(0, 20, 50, .05), 0 40px 80px -40px rgba(0, 20, 50, .45); }
.m .sv-frame { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; }
.m .sv-frame.is-on { opacity: 1; z-index: 1; }
.m .sv-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06);
  transition: transform 1.6s var(--ease); }
.m .sv-frame.is-on > img { transform: none; }
.m .sv-frame .ai-tag { top: 18px; right: 18px; bottom: auto; }
.m .sv-fig { position: absolute; left: 0; right: 0; bottom: 0; padding: 180px 36px 34px; color: #fff;
  background: linear-gradient(180deg, rgba(0, 22, 52, 0), rgba(0, 22, 52, .9) 58%); }
.m .sv-big { display: block; margin-bottom: 10px; font: 600 96px/.92 var(--f-display); letter-spacing: -0.03em; color: #fff; }
.m .sv-fact { display: block; max-width: 24em; font-size: 17px; line-height: 1.45; color: #DCE7F6; }
.m .sv-line { display: block; max-width: 17em; font: 500 28px/1.2 var(--f-display); color: #fff; }
.m .sv-fig .cs-src { margin-top: 12px; }
.m .sv-proof { position: absolute; left: 28px; top: 28px; display: grid; grid-template-columns: 40px auto; column-gap: 12px; align-items: center;
  padding: 14px 18px 14px 14px; border-radius: 16px; background: #fff; color: #081A33;
  box-shadow: 0 24px 50px -18px rgba(0, 10, 30, .6); opacity: 0; transform: translateY(-14px) scale(.96);
  transition: opacity .4s ease .35s, transform .7s var(--ease) .35s; }
.m .sv-frame.is-on .sv-proof { opacity: 1; transform: none; }
.m .sv-ico { grid-row: span 2; width: 36px; height: 36px; color: #006CC0; }
.m .sv-pk { display: flex; gap: 8px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: #62728A; }
.m .sv-pk b { color: #003B7A; font-weight: 600; }
.m .sv-pn { margin-top: 5px; font: 600 16px/1.2 var(--f-display); }
.m .sv-count { position: absolute; z-index: 3; right: 22px; bottom: 30px; font: 500 12px/1 var(--f-mono); letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.m .sv-count b { color: #fff; }
.m .story-steps-wrap { position: relative; padding-left: 40px; }
.m .story-rail { position: absolute; left: 5px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: #DDE4EE; overflow: hidden; }
.m .story-rail i { position: absolute; inset: 0; background: #003B7A; transform-origin: 50% 0; transform: scaleY(var(--p, .08));
  transition: transform .6s var(--ease); }
.m .story-steps { list-style: none; margin: 0; padding: 0; }
.m .ss-step { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 22px; min-height: min(78vh, 640px); padding-block: 48px; }
.m .ss-step::before { content: ''; position: absolute; left: -40px; top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%;
  box-sizing: border-box; border: 2px solid #C9D6E6; background: #FBFBFD; transition: border-color .3s, background-color .3s, transform .3s var(--ease); }
.m .ss-step.is-on::before { border-color: #003B7A; background: #003B7A; transform: scale(1.2); box-shadow: 0 0 0 5px #E4EDF8; }
.m .ss-k { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.m .ss-n { color: #003B7A; font-weight: 600; }
.m .ss-media { display: none; }
.m .ss-problem { margin: 0; font: 500 32px/1.2 var(--f-display); letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; }
.m .ss-proof { padding: 20px 0 0; border-top: 1px dashed #C9D6E6; }
.m .ss-pk { display: block; margin-bottom: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: #003B7A; }
.m .ss-proof p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink); }
.m .ss-step .mini-tool { margin-top: 6px; }
.js-motion .ss-step > * { transition: opacity .45s ease; }
.js-motion .ss-step:not(.is-on) > * { opacity: .3; }

@media (max-width: 1100px) { .r2.m .sa-crumb span:first-child { display: none; } }
@media (max-width: 900px) {
  .r2.m .story { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .r2.m .story-visual { display: none; }
  .r2.m .ss-step { min-height: 0; padding-block: 36px; }
  .js-motion .ss-step:not(.is-on) > * { opacity: 1; }
  .r2.m .ss-media { display: block; position: relative; margin: 0; aspect-ratio: 4 / 3.4; overflow: hidden; border-radius: 22px; background: #0B1F3A; }
  .r2.m .ss-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .r2.m .ss-media .ai-tag { top: 14px; right: 14px; bottom: auto; }
  .r2.m .ss-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 110px 22px 20px; color: #fff;
    background: linear-gradient(180deg, rgba(0, 22, 52, 0), rgba(0, 22, 52, .9) 58%); }
  .r2.m .ss-media .sv-big { font-size: 60px; }
  .r2.m .ss-media .sv-fact { font-size: 15px; }
  .r2.m .ss-media .sv-line { font-size: 21px; }
  .r2.m .ss-problem { font-size: 24px; }
  .r2.m .story-steps-wrap { padding-left: 28px; }
  .r2.m .ss-step::before { left: -28px; top: 44px; }
}
@media (max-width: 600px) {
  .r2.m .sa-crumb, .r2.m .sa-more { display: none; }
  .r2.m .sw-appbar { padding: 0 12px 0 16px; min-height: 48px; }
  .r2.m .ss-problem { font-size: 21px; }
  .r2.m .ss-proof p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .m .sv-frame, .m .sv-frame > img, .m .sv-proof, .m .story-rail i, .m .ss-step::before { transition: none; }
}
.m .sw-abbr2 { padding: 6px 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,.2); font: 600 11.5px/1 var(--f-mono); letter-spacing: .06em; color: #fff; }
.m .sw-note { margin: 18px auto 0; max-width: 760px; text-align: center; font-size: 14px; line-height: 1.5; color: #62728A; }
.m .ss-prob { display: grid; gap: 10px; }
.m .ss-pk--prob { margin: 0; color: var(--muted); }
.m .ss-k { font-weight: 600; color: #003B7A; }
/* an expected act is not a deadline: grey, the "proposed" colour, never amber */
.m .ms-expected .ms-phase { background: #ECEEF1; color: #4E5359; }
.m .ms-expected::before { background: #4E5359; }
.m .cta-note { margin: 12px 0 0; max-width: 34em; color: var(--body); }
.m .cta-row .actions { align-items: center; gap: 22px; flex-wrap: wrap; }

/* Suite: the standard and who checks it, as two labelled rows */
.m .ts-meta { margin: 0 0 32px; padding-top: 18px; border-top: 1px solid #E3E8EF; display: grid; gap: 12px; }
.m .ts-meta div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
.m .ts-meta dt { font: 500 11.5px/1.6 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.m .ts-meta dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.m .ts-sample { position: absolute; z-index: 3; left: 18px; top: 18px; padding: 8px 12px; border-radius: 99px; background: rgba(0, 22, 52, .55);
  border: 1px solid rgba(255, 255, 255, .2); font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
@media (max-width: 600px) { .r2.m .ts-meta div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
/* Services: no numbers in the index or the rows */
.m .svc-index a { grid-template-columns: minmax(0, 1fr) auto; }
.m .sr-head { grid-template-columns: minmax(0, 1fr); }
.m .sr-ico { justify-self: start; }
/* the tool nav: below 1480px only the tool in view spells out its name */
@media (max-width: 1480px) {
  .r2.m .suite-nav .sn-name { display: none; }
  .r2.m .suite-nav a { padding-right: 6px; }
  .r2.m .suite-nav a.is-on .sn-name { display: inline; }
  .r2.m .suite-nav a.is-on { padding-right: 16px; }
}

/* ---------------------------------------------------------------- the phone: the live demo passport's public view */
.m .pp-hero img { height: 118px; object-position: 50% 38%; }
.m .pp-cat { margin: 12px 0 2px; font: 500 9px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #6A7383; }
.m .pp .pp-name { margin: 2px 0 2px; font-size: 18px; line-height: 1.15; }
.m .pp-brand { font-size: 11.5px; color: #6A7383; }
.m .pp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px; background: #0E1B2E; }
.m .pp-facts dt { font: 500 8.5px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: #8FA3BF; }
.m .pp-facts dd { margin: 4px 0 0; font: 600 12px/1.2 var(--f-body); color: #fff; }
.m .pp-comp { margin-top: 12px; display: grid; gap: 8px; }
.m .pp-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; font: 500 11px/1.2 var(--f-mono); color: #0B1320; }
.m .pp-bar em { margin-left: 4px; padding: 2px 5px; border-radius: 4px; background: #E6F2EA; color: #1F6B3F; font: 600 8.5px/1 var(--f-body); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.m .pp-bar b { font-weight: 500; color: #6A7383; }
.m .pp-bar i { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #0B1320 calc(var(--w) * 100%), #E8ECF1 0); }
.m a.qr-card { text-decoration: none; color: inherit; transition: transform .2s var(--ease); }
.m a.qr-card:hover { transform: translateY(-3px); }