/* Copied unchanged from the live homepage at 2b1aa0d. */
/* WORLD:START, the suite page runs world A's light palette, unchanged */
body.world-a {
  --nav-bg: var(--white); --nav-fg: var(--dg); --nav-rule: var(--gray1);
  --hero-bg: var(--white); --hero-fg: var(--dg); --hero-h1: var(--dg); --hero-muted: var(--gray2);
  /* The hero collage's field keeps its gradient and its two blurred blobs and loses its
     outline. site.css draws that outline as a 1210 by 672 rounded rectangle, which stands
     taller than the cards floating on it, so its foot hung in open space below them and read
     as a stray line above the client logos. That rule already reads this token with a
     fallback, so the border is turned off here, where version A cannot see it. */
  --field-border: transparent;
  --feat-bg: var(--dg); --feat-fg: var(--white); --feat-h: var(--green); --feat-muted: var(--w80);
  --feat-card-bg: var(--w08); --feat-card-border: var(--w15); --feat-card-fg: var(--white); --feat-card-muted: var(--w80);
  --stage-bg: var(--w08); --stage-border: var(--w15);
  --use-bg: var(--white); --use-visual-bg: var(--lg);
  --why-bg: var(--white); --why-card-border: transparent;
  --panel-bg: linear-gradient(180deg, var(--lg) 0%, var(--white) 100%); --panel-border: var(--lg2);
  --proof-bg: var(--sage); --tile-bg: var(--white); --tile-quote-bg: var(--dg);
  --cta-bg: var(--white); --cta-fg: var(--dg); --cta-h: var(--dg); --cta-muted: var(--gray2); --cta-border: var(--dg); --cta-rule: var(--gray1);
  --footer-bg: var(--white); --footer-fg: var(--dg); --footer-muted: var(--gray2); --footer-rule: var(--gray1);
  --tabs-bg: var(--lg); --tabs-fg: var(--dg); --tabs-hover: var(--w60); --tabs-active-bg: var(--dg); --tabs-active-fg: var(--white);
  /* This page carries seven sections version A does not have, so their ground is assigned
     here too, in document order, the same way the tokens above assign version A's. Read down
     this list and you read the page's rhythm: white, white, cream, white, dark green,
     white, sage, cream, white, sage (--proof-bg above),
     white, white. Sections 1 and 5 and 10 take their ground from the tokens already set
     above, so only the rest are named here. */
  --strip-bg: var(--cream); --desk-bg: var(--white);
  --answers-bg: var(--white); --journey-bg: var(--sage);
  --rings-bg: var(--cream);
  --costs-bg: var(--white);
  --more-bg: var(--white); --quote-bg: var(--white);
  /* the icon plate inside the dark agents cards, the one mark the --feat tokens do not cover */
  --feat-mark-bg: var(--w15); --feat-mark-fg: var(--white);
}
/* The lockup stands on the header ground with nothing behind it. Its wordmark is black
   now, so the dark green chip the old white one needed has gone with it, along with the
   padding and the radius that drew it. 40px is the height that chip used to fill and the
   height of the quote button at the other end of the bar, so the two ends still weigh the
   same; the wordmark inside it is read at nearly twice the size it was. */
.world-a .logo img { height: 40px; }
.world-a .nav .nav-links a:hover { background: var(--lg); }
.world-a .footer { border-top: 1px solid var(--gray1); }
.world-a .footer .social a:hover { background: var(--lg); }
/* The hero, carried over from version A's world block so the two pages stay a byte apart
   rather than a rewrite apart. The only edit is the ground, which reads --hero-bg instead of
   naming white twice, because on this page every section's ground is named once in the token
   list above and nowhere else. --hero-bg is white, so the hero looks exactly as it does on
   version A. site.css already carries .hero-copy's children, the tabs, the collage stage,
   the camera and every card inside it; these rules are the part that is world A's own. */
/* The hero's spacing. It ran on 48px of top padding and one flat 16px gap between all six
   children of .hero-copy, and six things of very different weight held the same distance
   apart read as a crowd rather than as a hierarchy. So the gap becomes the tightest pair's
   distance and three of the six buy their own air on top of it, which puts the block in
   three acts instead of six lines:
     the trust line, held off the headline rather than sitting on it;
     the headline and its lead, the one pair that belongs together, on the bare gap;
     the two buttons, with real air above them, and the rates line that qualifies them close
     underneath, because it belongs to the buttons and not to the lead;
     the three tabs, parted from the copy above by the largest step on the block, since they
     are a separate act and not a sixth line of it.
   Every step is a clamp against the viewport, so the block tightens on a phone instead of
   pushing a 390 screen's first view off the bottom, and at 1440 by 900 the collage still
   breaks the fold, which is the one thing this may not cost. */
.world-a .hero { background: var(--hero-bg); color: var(--dg); padding-block: clamp(40px, 3.4vw, 48px) 0; }
.world-a .hero-copy { text-align: center; max-width: 54rem; margin-inline: auto; display: grid; justify-items: center; gap: 12px; }
.world-a .hero-copy > h1 { margin-top: clamp(8px, .7vw, 10px); }
.world-a .hero-copy > .actions { margin-top: clamp(14px, 1.25vw, 18px); }
.world-a .hero-copy > .tabs { margin-top: clamp(18px, 1.6vw, 23px); }
.world-a .trust { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--gray2); }
.world-a .trust svg { width: 18px; height: 18px; color: var(--teal); flex: none; }
.world-a .hero h1 { font-size: var(--fs-h0); max-width: 15ch; isolation: isolate; }
.world-a .hero h1 mark { background: var(--lg); color: inherit; border-radius: 14px; padding: 0 .16em; box-decoration-break: clone; -webkit-box-decoration-break: clone; position: relative; z-index: -1; }
.world-a .hero .lead { font-size: var(--fs-lg); color: var(--gray2); max-width: 46ch; }
.world-a .hero .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.world-a .hero .rates-line { font-size: var(--fs-xs); color: var(--gray2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.world-a .hero .rates-line img { height: 18px; width: auto; }
.world-a .collage .glass-bolt { position: absolute; right: -14px; top: -54px; width: 108px; z-index: 3; filter: drop-shadow(0 24px 28px rgba(16, 57, 40, .32)); animation: float 8s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@media (max-width: 760px) { .world-a .collage .glass-bolt { display: none; } }
@media (prefers-reduced-motion: reduce) { .world-a .collage .glass-bolt { animation: none; } }
/* WORLD:END */