/* /pulse, ported from the reference build's page-pulse.css (atlas-website/site/css/page-pulse.css).
   Loaded after site.base.css and site.system.css, as in the reference. Scoped to .atlas-page; the body class
   .page-pulse is the root's .atlas-pulse. Breakpoints: 900 px is 991 px; the reference's 560, 600 and 1000 px
   steps stay. The demo's rules are left out: the demo is native markup in the Demo slot, styled from the page
   head (site-settings/pulse/head.html). */

/* The Demo slot's wrapper is a plain block between the sections. */
::slotted(*) { display: block; }

/* /pulse — round 3 layout (2026-09-29) */

/* Hero map: one screen high at most, labels on the map, a key you can read */
.atlas-page .map-plate { max-width: 560px; margin-left: auto; }
.atlas-page .map-frame { position: relative; padding: 0; overflow: hidden; }
.atlas-page .map-frame img { display: block; width: 100%; height: auto; }
.atlas-page .map-note { position: absolute; transform: translateY(-100%); background: var(--paper); border: 1px solid var(--ink-20);
            padding: 7px 10px 8px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
            color: var(--ink-64); box-shadow: 0 1px 0 rgba(26,22,18,.05); }
.atlas-page .map-note b { display: block; font: 500 15px/1.25 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); margin-top: 3px; }
.atlas-page .map-frame .scalebar { position: absolute; left: 16px; bottom: 14px; }
.atlas-page .map-frame .north { position: absolute; right: 14px; bottom: 12px; }
.atlas-page .map-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font: 500 10.5px/1.3 var(--mono);
           letter-spacing: .08em; text-transform: uppercase; color: var(--ink-64); }
.atlas-page .map-key i { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px; }
.atlas-page .map-key .k-new { background: #8C6A3D; }
.atlas-page .map-key .k-pre { background: #C9C2B5; }
.atlas-page .map-key .k-blk { border: 1.5px dashed var(--ink); background: transparent; }

/* The proof strip: the numbers carry the argument */
.atlas-page.atlas-pulse .proof-strip h2 { max-width: 20ch; margin-bottom: 30px; }
.atlas-page.atlas-pulse .proof-strip .val { font-size: 40px; }

/* Why teams choose Pulse: one ink strip, four statements */
.atlas-page .value-bar { background: var(--ink); color: var(--paper); padding: 44px 0; }
.atlas-page .value-bar ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.atlas-page .value-bar li { padding: 0 26px; border-left: 1px solid var(--paper-22); font-size: 14.5px; line-height: 1.55; color: var(--paper-74); }
.atlas-page .value-bar li:first-child { padding-left: 0; border-left: 0; }
.atlas-page .value-bar b { display: block; font: 400 22px/1.2 var(--serif); color: var(--paper); margin-bottom: 8px; }

/* Where Pulse has been used: four cases on a hairline grid (light version of /foresight's) */
.atlas-page .case-grid.light { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink-14); border: 1px solid var(--ink-14); margin-top: 36px; }
.atlas-page .case-grid.light .case { background: var(--paper); padding: 32px 34px 28px; display: flex; flex-direction: column; }
.atlas-page .case-grid.light .who { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ochre-text); margin: 0 0 14px; }
.atlas-page .case-grid.light h3 { font: 400 26px/1.2 var(--serif); color: var(--ink); margin: 0 0 12px; }
.atlas-page .case-grid.light p { font-size: 15.5px; line-height: 1.6; color: var(--ink-70); margin: 0; }
.atlas-page .case-grid.light .more { margin-top: auto; padding-top: 16px; font-size: 14px; }
.atlas-page .case-grid.light .more a { color: var(--ink); }

/* How we check it: three checks in one strip */
.atlas-page .check-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 30px; border-top: 1px solid var(--ink-20); }
.atlas-page .check-strip > div { padding: 22px 28px 4px 0; }
.atlas-page .check-strip > div + div { padding-left: 28px; border-left: 1px solid var(--ink-14); }
.atlas-page .check-strip .k { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-text); margin: 0 0 10px; }
.atlas-page .check-strip p { font-size: 15px; line-height: 1.6; color: var(--ink-70); margin: 0; }
.atlas-page .check-strip a { color: var(--ink); }

@media (max-width: 991px) {
  .atlas-page .map-plate { max-width: none; margin: 28px 0 0; }
  .atlas-page .value-bar ul { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .atlas-page .value-bar li { padding: 0 18px; }
  .atlas-page .value-bar li:nth-child(3) { padding-left: 0; border-left: 0; }
  .atlas-page .case-grid.light { grid-template-columns: 1fr; }
  .atlas-page .case-grid.light .case { padding: 24px 20px; }
  .atlas-page .case-grid.light h3 { font-size: 22px; }
  .atlas-page .check-strip { grid-template-columns: 1fr; }
  .atlas-page .check-strip > div, .atlas-page .check-strip > div + div { padding: 18px 0 16px; border-left: 0; border-top: 1px solid var(--ink-14); }
}
@media (max-width: 560px) {
  .atlas-page .value-bar ul { grid-template-columns: 1fr; }
  .atlas-page .value-bar li, .atlas-page .value-bar li:nth-child(3) { padding: 0 0 18px; border-left: 0; border-bottom: 1px solid var(--paper-22); }
  .atlas-page .value-bar li:last-child { border-bottom: 0; padding-bottom: 0; }
  .atlas-page .map-note b { font-size: 13px; }
}

/* ═══ Round 3 panel fixes ═══ */
/* Hero: the figure, its key and caption fit one screen beside the headline (visual F6) */
.atlas-page.atlas-pulse .page-hero { padding-top: 72px; }
.atlas-page.atlas-pulse .page-hero .split { align-items: start; }
.atlas-page.atlas-pulse .map-plate { max-width: 480px; justify-self: end; }

/* Two numbers, not three */
.atlas-page .lvg.two { grid-template-columns: 1fr 1fr; }

/* Proof cards led by the customer's logo and one fact */
.atlas-page .case-grid.light .case-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.atlas-page .case-grid.light .logo-img { display: block; width: 110px; height: 30px; background-color: var(--ink); opacity: .86;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: left center; mask-position: left center; }
.atlas-page .case-grid.light .logo-img.is-heavy { height: 22px; }
.atlas-page .case-grid.light .fact { margin: 0; font: 500 15px/1.2 var(--mono); color: var(--ochre-text); text-align: right; }

/* How we check Pulse: the scope line as fine print */
.atlas-page .pl-checks .fine { margin: 18px 0 0; font-size: 13px; color: var(--ink-64); }

/* How Pulse is sold: three cards, a row of add-on chips, four spec tiles */
.atlas-page .sold2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-14); border: 1px solid var(--ink-14); margin-top: 32px; }
.atlas-page .sold2 .pk { background: var(--paper); padding: 24px 26px; }
.atlas-page .sold2 .k, .atlas-page .addons .k { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-text); margin: 0 0 12px; }
.atlas-page .sold2 h3 { font: 400 21px/1.25 var(--serif); margin: 0 0 8px; color: var(--ink); }
.atlas-page .sold2 p { font-size: 15px; line-height: 1.55; color: var(--ink-70); margin: 0; }
.atlas-page .addons { margin-top: 26px; }
.atlas-page .addons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.atlas-page .addons li { font-size: 14px; color: var(--ink); background: var(--paper-alt); border: 1px solid var(--ink-14); padding: 7px 12px; }
.atlas-page .spec-tiles { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink-20); }
.atlas-page .spec-tiles li { padding: 18px 20px 0 0; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-64); }
.atlas-page .spec-tiles li + li { padding-left: 20px; border-left: 1px solid var(--ink-14); }
.atlas-page .spec-tiles b { display: block; font: 400 22px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 4px; }
.atlas-page .spec-line { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-64); max-width: 80ch; }

/* Phones: the packages, spec tiles and numbers stack (the demo's phone rules are in the page head) */
@media (max-width: 991px) {
  .atlas-page .sold2 { grid-template-columns: 1fr; }
  .atlas-page .spec-tiles { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .atlas-page .spec-tiles li:nth-child(3) { padding-left: 0; border-left: 0; }
  .atlas-page .lvg.two { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .atlas-page .case-grid.light .case-top { flex-direction: column; align-items: flex-start; }
  .atlas-page .case-grid.light .fact { text-align: left; }
}
.atlas-page .spec-line a { color: var(--ink); white-space: nowrap; }

/* ═══ Round 4 (Abe's notes, 2026-09-29) ═══ */
/* Hero: the 2020 Census label reads as the map's headline */
.atlas-page.atlas-pulse .map-note { background: var(--ink); border: 0; color: var(--ochre-light); box-shadow: 0 2px 8px rgba(26,22,18,.25); }
.atlas-page.atlas-pulse .map-note b { color: var(--paper); }
.atlas-page.atlas-pulse .map-key .k-blk { border: 2px dashed var(--ink); background: rgba(26,22,18,.09); }

/* ═══ Round 5 (Abe's notes, 2026-09-29) ═══ */
/* Why it matters: four buyers, each with the best data they have today and what Pulse adds */
.atlas-page.atlas-pulse .proof-strip h2 { max-width: 28ch; margin-bottom: 14px; }
.atlas-page.atlas-pulse .proof-strip .lede { max-width: 62ch; margin: 0 0 30px; }
.atlas-page .personas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
            border-top: 1px solid var(--ink-20); }
.atlas-page .personas li { padding: 22px 24px 8px; border-left: 1px solid var(--ink-14); display: flex; flex-direction: column; }
.atlas-page .personas li:first-child { padding-left: 0; border-left: 0; }
.atlas-page .personas .who { font: 400 22px/1.2 var(--serif); color: var(--ink); margin: 0 0 16px; }
.atlas-page .personas .today, .atlas-page .personas .with { font-size: 15px; line-height: 1.55; margin: 0; }
.atlas-page .personas .today { color: var(--ink-64); }
.atlas-page .personas .with { color: var(--ink); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink-14); }
.atlas-page .personas span { display: block; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.atlas-page .personas .today span { color: var(--ink-64); }
.atlas-page .personas .with span { color: var(--ochre-text); }
.atlas-page.atlas-pulse .proof-strip .srcline { font: 500 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--ink-64); margin: 22px 0 0; }
.atlas-page.atlas-pulse .proof-strip .srcline a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) {
  .atlas-page .personas { grid-template-columns: 1fr 1fr; }
  .atlas-page .personas li:nth-child(3) { padding-left: 0; border-left: 0; }
  .atlas-page .personas li:nth-child(n+3) { border-top: 1px solid var(--ink-14); margin-top: 8px; }
}
@media (max-width: 600px) {
  .atlas-page .personas { grid-template-columns: 1fr; }
  .atlas-page .personas li, .atlas-page .personas li:nth-child(3) { padding: 18px 0 10px; border-left: 0; }
  .atlas-page .personas li + li { border-top: 1px solid var(--ink-14); margin-top: 0; }
}

/* Why teams choose Pulse: the strip says what it is */
.atlas-page .value-bar .vb-h { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ochre-light);
                   margin: 0 0 22px; }
/* The four buyers' rows line up across columns */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1001px) {
    .atlas-page .personas { grid-template-rows: auto auto auto; }
    .atlas-page .personas li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .atlas-page .personas .with { align-self: start; }
  }
}

/* ═══ Round 6 launch review (visual QA) ═══ */
/* Links that differ from their text only by color get an underline (WCAG 1.4.1) */
.atlas-page .check-strip a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Why teams choose Pulse: the four bodies start level even when a heading wraps */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 992px) {
    .atlas-page .value-bar ul { grid-template-rows: auto auto; }
    .atlas-page .value-bar li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  }
}

/* ═══ Round 6 decisions (Abe) ═══ */
/* Proof logos sized optically: the thin Econet and World Bank wordmarks read at the weight of the others */
.atlas-page .case-grid.light .logo-img[aria-label="Econet"] { width: 125px; height: 22px; }
.atlas-page .case-grid.light .logo-img[aria-label="The World Bank"] { width: 140px; height: 36px; }
.atlas-page .case-grid.light .case-top { min-height: 36px; align-items: center; }