/* ═══ ATLAS v7 — base + motion primitives (theme tokens live in theme.css) ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus,currentColor);outline-offset:3px;border-radius:4px}

/* ── reveal primitives (driven by motion.js) ──
   Hidden initial states are gated behind html.js (stamped by theme7.js pre-paint):
   if JS never runs, every reveal element is simply visible. */
.js [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.js [data-reveal].in{opacity:1;transform:none}
/* Failsafe (armed by theme7.js, cancelled by motion.js): if the motion scripts
   never arrive, show everything rather than an empty page. */
.js.nomotion [data-reveal]{opacity:1;transform:none;transition:none}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="scale"]{transform:scale(.94) translateY(14px)}
.js [data-reveal="scale"].in{transform:none}
[data-reveal="words"]{opacity:1;transform:none}          /* container stays; words move */
.js [data-reveal="words"] .rw{display:inline-block;opacity:0;transform:translateY(.55em) rotate(1.2deg);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js [data-reveal="words"].in .rw{opacity:1;transform:none}

/* skip link */
.skip{position:absolute;left:16px;top:-48px;z-index:100;background:var(--accent);
  color:var(--on-accent);padding:10px 18px;border-radius:0 0 10px 10px;
  font-size:14px;font-weight:600;text-decoration:none;transition:top .2s ease}
.skip:focus-visible{top:0}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal] .rw{opacity:1!important;transform:none!important;transition:none!important}
}

/* theme swap: kill all transitions for the flip frame */
html.theme-swap *,html.theme-swap *::before,html.theme-swap *::after{
  transition:none!important;animation-play-state:paused!important}

/* ── cross-document view transitions (progressive enhancement) ──
   Same-origin navigations crossfade + drift instead of hard-cutting.
   Browsers without support simply ignore all of this. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .16s ease both}
::view-transition-new(root){animation:vt-in .3s cubic-bezier(.16,1,.3,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
/* theme toggle uses a same-document transition: JS drives a circular reveal,
   so the cross-document animations must stand down for that frame */
.theme-vt::view-transition-old(root){animation:none}
.theme-vt::view-transition-new(root){animation:none}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* visually hidden but announced by screen readers — for labels the design carries
   with a placeholder instead */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── the pairing block: why the two Blueprints are sold together (index, §05) ── */
.pairing{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,3vw,30px);
  align-items:center;margin:clamp(22px,4vw,34px) 0;max-width:760px}
.pair-col{border:1px solid var(--line);border-radius:14px;padding:clamp(16px,2.6vw,22px);
  background:var(--paper)}
.pair-col p:last-child{margin:8px 0 0;color:var(--soft);font-size:clamp(.94rem,1.5vw,1.02rem);
  line-height:1.55}
.pair-join{font:700 clamp(1.4rem,3vw,2rem)/1 var(--sg);color:var(--accent);opacity:.55}
.pair-why{margin-top:clamp(18px,3vw,26px)}
@media (max-width:640px){
  .pairing{grid-template-columns:1fr}
  .pair-join{justify-self:center}
}
/* All-Access card, centred under the Set (owner request) */
.access-card.ac-centre{margin-left:auto;margin-right:auto;justify-content:center;
  text-align:center;max-width:640px}
.access-card.ac-centre .ac-cta{margin-top:10px}
@media (min-width:721px){
  .access-card.ac-centre{flex-direction:column;align-items:center;gap:12px}
}

/* limited-time price chip beside a price. Uses --mono (there is no --jbm token;
   the wrong var made it fall back to the default face and look broken). */
.c-lt{display:inline-block;margin-left:9px;vertical-align:0.32em;white-space:nowrap;
  font-family:var(--mono);font-size:.58rem;font-weight:500;line-height:1;
  letter-spacing:.11em;color:var(--accent);
  border:1px solid currentColor;border-radius:999px;padding:5px 9px;opacity:.92}
@media (max-width:420px){
  .c-lt{margin-left:0;margin-top:8px;vertical-align:baseline}
}
/* single-card grid for the standalone Trading section */
.cards.cards-one{grid-template-columns:minmax(0,var(--card-max,420px));justify-content:center}
.tguide .r-alt{max-width:640px;margin-inline:auto;text-align:center}