/* The homepage rules of the reference build's site system (atlas-website/site/css/_system.css),
   in their original order. Loaded after Homepage.css, as _system.css loads after the page's
   own \3c style>. Nav, footer and other pages' rules are left out. */

/* ── 2 · Focus ────────────────────────────────────────────────── */
.atlas-home :focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
.atlas-home .solutions :focus-visible,
.atlas-home .aperture :focus-visible { outline-color: var(--ochre-light); }

/* ── Quiet text and small ochre text, sitewide (A-01, A-02) ─────── */
.atlas-home .fig-caption, .atlas-home .perspective-card .head, .atlas-home .perspectives-head a, .atlas-home .area-row .code { color: var(--ink-64); }
.atlas-home .perspective-card .head .kicker { color: var(--ochre-text); }
.atlas-home .stage-tracker .stage { color: var(--ink-64); }

/* ── 5 · Figure system: numbered plates ─────────────────────────── */
.atlas-home .plate { margin: 0; min-width: 0; }
.atlas-home .plate-frame { position: relative; border: 1px solid var(--ink-14); background: var(--paper-alt); overflow: hidden; }
.atlas-home .plate-frame img { display: block; width: 100%; height: auto; }
.atlas-home .plate-cap { margin-top: 14px; }
.atlas-home .plate-cap .t { font: italic 400 16px/1.45 var(--serif); color: var(--ink); }
.atlas-home .plate-cap .t .n { font: normal 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--ochre-text); margin-right: 10px; }
.atlas-home .plate-cap .src { font: 400 13px/1.55 var(--sans); color: var(--ink-70); margin: 6px 0 0; }
.atlas-home .plate-cap .src a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.atlas-home .maplab { position: absolute; transform: translate(-50%, -50%); font: 500 11px/1.2 var(--mono); letter-spacing: .06em;
          color: var(--ink); white-space: nowrap; text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper); }
.atlas-home .scalebar { position: absolute; left: 14px; bottom: 12px; font: 500 11px/1 var(--mono); color: var(--ink); }
.atlas-home .scalebar .bar { display: flex; height: 5px; margin-bottom: 6px; border: 1px solid var(--ink); }
.atlas-home .scalebar .bar i { display: block; height: 100%; }
.atlas-home .scalebar .bar i:nth-child(odd) { background: var(--ink); }
.atlas-home .scalebar .ticks { display: flex; justify-content: space-between; }
.atlas-home .plate-chart { display: block; width: 100%; height: auto; overflow: visible; }
.atlas-home .plate-chart text { font-family: var(--mono); font-size: 11px; fill: var(--ink-64); }
.atlas-home .plate-chart .ttl { font-family: var(--sans); font-size: 12px; fill: var(--ink-70); }
.atlas-home .plate-chart .axis { stroke: var(--ink); stroke-opacity: .55; stroke-width: .75; }
.atlas-home .plate-chart .grid { stroke: var(--ink); stroke-opacity: .10; stroke-dasharray: 1 3; }
.atlas-home .plate-chart .ref { stroke: var(--ink); stroke-opacity: .5; stroke-width: .75; stroke-dasharray: 4 3; }

/* ── Homepage: mobile beats for the stakes sequence (A8) and the illustrative tag ── */
.atlas-home .stakes-tag { position: absolute; right: 14px; top: 12px; z-index: 5; font: 500 10px/1 var(--mono); letter-spacing: .14em;
              color: var(--ink-64); background: rgba(244,239,229,.86); padding: 6px 8px; }
.atlas-home .stakes-mobile { display: none; }
@media (max-width: 991px) {
  .atlas-home .stakes .stakes-grid { display: none; }
  .atlas-home .stakes-mobile { display: block; padding: 56px var(--pad-x) 8px; }
  .atlas-home .stakes-mobile .beat { padding: 0 0 48px; margin-bottom: 44px; border-bottom: 1px solid var(--ink-14); }
  .atlas-home .stakes-mobile .beat:last-child { border-bottom: 0; margin-bottom: 0; }
  .atlas-home .stakes-mobile .k { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--ochre-text); }
  .atlas-home .stakes-mobile h2 { font: 400 30px/1.14 var(--serif); letter-spacing: -.01em; margin: 12px 0 0; }
  .atlas-home .stakes-mobile p.sub { font-size: 16px; line-height: 1.6; color: var(--ink-70); margin: 12px 0 20px; }
  .atlas-home .stakes-mobile .stage { position: relative; }
  .atlas-home .stakes-mobile .stage img { display: block; width: 100%; height: auto; opacity: .45; }
  .atlas-home .stakes-mobile .stage .num { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%;
                               background: var(--ink); color: var(--paper); font: 500 11px/22px var(--mono); text-align: center; }
  .atlas-home .stakes-mobile ol { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--ink-14); }
  .atlas-home .stakes-mobile li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--ink-08); }
  .atlas-home .stakes-mobile li b { font: 500 11px/1.5 var(--mono); color: var(--ochre-text); }
  .atlas-home .stakes-mobile li span { font-size: 14.5px; line-height: 1.45; }
  .atlas-home .stakes-mobile li em { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; font-style: normal; color: var(--ink-64);
                         text-transform: uppercase; margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-home .net-edge-stress { animation: none !important; }
}
.atlas-home .net-edge-stress { animation-iteration-count: 3; }

/* Chart marks (figure system) */
.atlas-home .plate-chart .l-subj { stroke: var(--ochre); }
.atlas-home .plate-chart .l-ctx { stroke: var(--ink); stroke-opacity: .55; }
.atlas-home .plate-chart .lab-subj { fill: var(--ochre-text); font-weight: 500; }
.atlas-home .plate-chart .lab-ctx { fill: var(--ink-64); }

/* ── Homepage additions (launch pass) ───────────────────────────── */
.atlas-home .hero-cta, .atlas-home .hero-cta-secondary { font-family: var(--sans); text-transform: none; letter-spacing: 0.2px; }
.atlas-home .hero-cta { font-size: 14px; text-decoration: none; display: inline-block; }
.atlas-home .hero-cta-secondary { font-size: 14px; }
.atlas-home .hero-standfirst { font-family: var(--serif); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-70);
                   max-width: 58ch; margin-top: 26px; }
.atlas-home .platform-h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.3vw, 44px); line-height: 1.14;
               letter-spacing: -0.012em; margin: 18px 0 0; max-width: 26ch; }
.atlas-home .platform-lead { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--ink-70); max-width: 60ch; margin: 18px 0 0; }
.atlas-home .product-ctas { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.atlas-home .product-cta { text-decoration: none; }
.atlas-home .product-cta span { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.atlas-home .solutions-more { margin-top: 36px; font-size: 14px; }
.atlas-home .solutions-more a { color: var(--paper); border-bottom: 1px solid var(--paper-55); padding-bottom: 2px; }
.atlas-home .callout-link { display: inline-block; margin-top: 10px; font-family: var(--sans); font-size: 13.5px; color: var(--ink);
                border-bottom: 1px solid var(--ink-30); }
.atlas-home .leadership .lead { font-size: 26px; }
.atlas-home .leadership-proof { font-size: 15px; line-height: 1.62; color: var(--ink-70); margin: 30px 0 0; max-width: 62ch;
                    padding-top: 18px; border-top: 1px solid var(--ink-14); }
.atlas-home .leadership-links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.atlas-home .close-cta { text-decoration: none; display: inline-block; }
.atlas-home .perspective-card .head:empty { display: none; }
@media (max-width: 991px) { .atlas-home .leadership .lead { font-size: 22px; } }

/* ── /pulse additions: map furniture ────────────────────────────── */
.atlas-home .scalebar { background: rgba(235,228,212,.88); padding: 6px 8px; }

/* ── Round-2 fixes ──────────────────────────────────────────────── */
/* Phone variants of every chart (V-03): authored at 340 px so 11 px text renders at ~11 px */
.atlas-home .fig-mob { display: none; }
@media (max-width: 600px) {
  .atlas-home .fig-desk { display: none !important; }
  .atlas-home .fig-mob { display: block; }
}
.atlas-home .plate-kicker { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-text); margin: 0 0 10px; }

/* Homepage round 2: remaining contrast (A-01, A-02, N-07), 992-1200 px step (R-02, N-09), engine list on phones */
.atlas-home .areas-heading, .atlas-home .perspective-card .by { color: var(--ink-64); }
.atlas-home .product-byline, .atlas-home .pill-marker .pill .value { color: var(--ochre-text); }
@media (min-width: 992px) and (max-width: 1200px) {
  .atlas-home .stakes-grid { grid-template-columns: 40% 60%; }
  .atlas-home .stakes-title-col { padding: 72px 32px 56px 40px; }
  .atlas-home .stakes-scene-headline { font-size: 34px; }
  .atlas-home .zone-label { width: 200px; }
  .atlas-home .verticals-grid { grid-template-columns: repeat(3, 1fr); }
  .atlas-home .verticals-grid .card { border-bottom: 1px solid var(--paper-22); }
}
.atlas-home .aperture-list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--paper-22); counter-reset: ap; }
.atlas-home .aperture-list li { padding: 14px 0 14px 34px; border-bottom: 1px solid var(--paper-10); color: var(--paper-74); font-size: 15px;
                    line-height: 1.5; position: relative; }
.atlas-home .aperture-list li::before { counter-increment: ap; content: "0" counter(ap); position: absolute; left: 0; top: 16px;
                            font: 500 11px/1 var(--mono); color: var(--ochre-light); }
.atlas-home .aperture-list b { display: block; font: 400 19px/1.3 var(--serif); color: var(--paper); margin-bottom: 4px; }
@media (max-width: 600px) { .atlas-home .aperture-list.fig-mob { display: block; } }

/* ═══ Round 3 (2026-09-29) ═══ */

/* Forecast range: the shaded band around a forecast line */
.atlas-home .plate-chart .band { fill: var(--ochre); fill-opacity: .16; stroke: none; }
.atlas-home .plate-compact .plate-cap .src { font-size: 12.5px; }

/* Product names read as names */
.atlas-home .pname { font-style: italic; color: var(--ochre-text); }
.atlas-home .nowrap { white-space: nowrap; }

/* Homepage logos: eight marks, two even rows of four */
@media (min-width: 992px) {
  .atlas-home .logo-grid { grid-template-columns: repeat(4, 1fr); max-width: 1040px; margin-left: auto; margin-right: auto; }
}
/* Customer callouts: the link sits on its own line, with the same spacing in every callout */
.atlas-home .callout p .callout-link { display: block; margin-top: 10px; }

/* Headings balance their lines; paragraphs avoid one-word last lines */
.atlas-home h1, .atlas-home h2, .atlas-home h3 { text-wrap: balance; }
.atlas-home p { text-wrap: pretty; }

/* Before/after map: the 2017 layer sits over the 2024 layer, clipped at --pos; a range input drives it */
.atlas-home .ba { position: relative; padding: 0; overflow: hidden; touch-action: pan-y; }
.atlas-home .ba picture, .atlas-home .ba img { display: block; width: 100%; height: auto; }
.atlas-home .ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.atlas-home .ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.atlas-home .ba-handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px;
                    border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); display: grid; place-items: center;
                    font: 500 15px/1 var(--sans); color: var(--ink); }
.atlas-home .ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.atlas-home .ba-range:focus-visible + .ba-handle, .atlas-home .ba:focus-within .ba-handle::after { outline: 2px solid var(--ochre); outline-offset: 2px; }
.atlas-home .ba .maplab { pointer-events: none; }
.atlas-home .maplab.road { font: 500 10px/1 var(--mono); letter-spacing: .04em; color: var(--ink-64); background: rgba(244,239,229,.85); padding: 2px 4px; transform: translate(-50%, -50%); white-space: nowrap; }
.atlas-home .maplab.place { font: italic 400 14px/1.2 var(--serif); color: var(--ink); background: rgba(244,239,229,.8); padding: 2px 6px; transform: translate(-50%, -50%); white-space: nowrap; }
.atlas-home .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-home .map-key i { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px; }
.atlas-home .map-key .k-new { background: #8C6A3D; } .atlas-home .map-key .k-pre { background: #C9C2B5; }

/* ═══ Round 3 panel fixes (2026-09-29) ═══ */

/* Forecast range you can see */
.atlas-home .plate-chart .band { fill-opacity: .35; }
@media (max-width: 600px) { .atlas-home .plate-frame[style] { padding: 14px 8px 6px !important; } }

/* The registered mark reads as a mark, not a tick */
.atlas-home .reg { font-family: var(--sans); font-size: .6em; vertical-align: .55em; }

/* Before/after map: a full-height grab strip (touch and iOS), a scale bar */
.atlas-home .ba-range { -webkit-appearance: none; appearance: none; background: transparent; }
.atlas-home .ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 600px; background: transparent; border: 0; }
.atlas-home .ba-range::-moz-range-thumb { width: 44px; height: 600px; border: 0; background: transparent; }
.atlas-home .ba .scalebar { position: absolute; left: 14px; bottom: 12px; }
@media (max-width: 600px) { .atlas-home .ba .maplab.road { display: none; } }

/* Customer callouts: the link sits at the foot of each callout, at the same height in all three */
.atlas-home .callout { display: flex; flex-direction: column; }
.atlas-home .callout p .callout-link { display: inline-block; width: max-content; margin-top: 12px; }

/* Logos: heavy wordmarks lighter, the stacked FCDO mark bigger; logos shrink on narrow phones */
.atlas-home .logo-cell .logo-img.is-heavy { height: 22px; }
.atlas-home .logo-cell .logo-img.is-stacked { width: 150px; height: 44px; }
@media (max-width: 991px) { .atlas-home .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .atlas-home .logo-cell { min-height: 72px; padding: 14px 10px; } }

/* Phones: comfortable tap targets and legible functional text (conversion 14, 15, 16). The hit area grows through an
   overlay, not padding, so each link keeps its box: its margin above and its border-bottom underline stay put. */
@media (max-width: 991px) {
  .atlas-home :is(.product-cta, .callout-link, .leadership-cta, .solutions-more a, .perspectives-head a, .foot a.read, .hero-cta-secondary) {
    display: inline-block; position: relative; }
  .atlas-home :is(.product-cta, .callout-link, .leadership-cta, .solutions-more a, .perspectives-head a, .foot a.read, .hero-cta-secondary)::after {
    content: ""; position: absolute; inset: -11px 0; }
}
@media (max-width: 600px) {
  .atlas-home .map-key { font-size: 12px; }
  .atlas-home .maplab.road { font-size: 11px; }
}

/* ═══ Round 4 (Abe's notes, 2026-09-29) ═══ */

/* Homepage stakes: the stage labels sit directly under the illustration as a rail that fills as you scroll */
.atlas-home .stakes-stage-inner { flex-direction: column; }
.atlas-home .stage-tracker.stage-rail { position: relative; inset: auto; bottom: auto; left: auto; right: auto; width: 100%;
                            padding: 0 32px; margin-top: 36px; gap: 20px; align-items: stretch; pointer-events: auto; }
.atlas-home .stage-rail .stage { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
                     background: none; border: 0; padding: 0 0 4px; cursor: pointer; text-align: left;
                     font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-64); }
.atlas-home .stage-rail .stage .lab { display: inline-flex; align-items: baseline; gap: 8px; }
.atlas-home .stage-rail .stage .rail { display: block; width: 100%; height: 2px; background: var(--ink-14); position: relative; overflow: hidden; }
.atlas-home .stage-rail .stage .rail i { position: absolute; inset: 0; background: var(--ochre); transform-origin: left center;
                             transform: scaleX(var(--fill, 0)); transition: transform 120ms linear; }
.atlas-home .stage-rail .stage.active { color: var(--ink); }
.atlas-home .stage-rail .stage:hover { color: var(--ink); }
.atlas-home .stage-rail .stage:focus-visible { outline: 2px solid var(--ochre); outline-offset: 4px; }
/* Scene 3's action cards keep their lines at every width (they overhang the image edge by design) */
@media (min-width: 1201px) { .atlas-home .net-action { width: max-content; } }
@media (min-width: 992px) and (max-width: 1200px) { .atlas-home .net-action { max-width: 210px; padding: 10px 12px 12px; }
  .atlas-home .stage-tracker.stage-rail { margin-top: 60px; } }
/* Each scene builds as you scroll: markers, zone labels and action cards arrive in turn */
.atlas-home .stakes-scene-layer .stagger { opacity: 0; transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1); }
.atlas-home .stakes-scene-layer .stagger.built { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .atlas-home .stakes-scene-layer .stagger { opacity: 1; transition: none; }
                                          .atlas-home .stage-rail .stage .rail i { transition: none; } }

/* Homepage platform intro: the two product lines read as two lines, across the page */
.atlas-home .platform-h2 { max-width: none; font-size: clamp(30px, 3.1vw, 44px); }
.atlas-home .platform-lead { max-width: 64ch; }

/* Before/after map: the years ride on the divide, the knob is easy to find, and the key sits under the map */
.atlas-home .ba-handle::after { content: "\2039\00a0\203A"; width: 44px; height: 44px; background: var(--ink); color: var(--paper);
                    border: 2px solid var(--paper); box-shadow: 0 1px 6px rgba(26,22,18,.35); font: 500 18px/1 var(--sans); }
.atlas-home .ba:not(.touched) .ba-handle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
                    margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid var(--ochre); animation: ba-pulse 1.8s ease-out infinite; }
@keyframes ba-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .atlas-home .ba .ba-handle::before { animation: none; display: none; } }
.atlas-home .ba-yr { position: absolute; top: 12px; font: 500 11px/1 var(--mono); letter-spacing: .1em; background: var(--ink); color: var(--paper);
         padding: 6px 8px; white-space: nowrap; }
.atlas-home .ba-yr.l { right: 8px; } .atlas-home .ba-yr.r { left: 8px; }
.atlas-home .ba-key { align-items: center; }
.atlas-home .ba-key .ba-hint { margin-left: auto; color: var(--ink); text-transform: none; letter-spacing: .02em; font: 500 13px/1.3 var(--sans); }
@media (max-width: 600px) { .atlas-home .ba-key .ba-hint { margin-left: 0; flex-basis: 100%; } }

/* Customer callouts: the link on its own line, so the text keeps even line spacing */
.atlas-home .callout p .callout-link { display: block; width: max-content; margin-top: 12px; }
@media (max-width: 600px) { .atlas-home .ba .scalebar .ticks span:first-child { visibility: hidden; } }

/* ═══ Round 6 launch review (visual QA) ═══ */
/* Homepage stakes: the eyebrow sits below the sticky header in every pinned frame */
.atlas-home .stakes-section-eyebrow { top: 104px; }
/* Small ochre numerals meet AA: the text token, full opacity (weight and the rail fill still mark the active stage) */
.atlas-home .stage-rail .stage .num { color: var(--ochre-text); opacity: 1; }

/* ═══ Port: the Perspectives slot ═══
   The posts are a Collection List of Post Cards (Text style) in the Perspectives slot, outside the shadow root. The
   grid keeps its top and bottom rules here and hands the rest down as custom properties, which
   shared/postList.slotted.ts lays out on .w-dyn-items: three columns, the 1 px gaps, and ink-20 showing through them
   as the hairlines (site.base.css .perspectives-grid). */
.atlas-home .perspectives-grid {
  display: block;
  background: none;
  --atlas-posts-cols: 1fr 1fr 1fr;
  --atlas-posts-gap: 1px;
  --atlas-posts-fill: var(--ink-20);
}
@media (max-width: 991px) { .atlas-home .perspectives-grid { --atlas-posts-cols: 1fr; } }