/* ===================================================================
   Atlas Insights — shared shell. Tokens, type, buttons, header, footer.
   Page-specific layout lives in each page's own <style>.
   =================================================================== */
@font-face{
  font-family:'Kudryashev Display Sans';
  src:url('fonts/KudryashevDisplay-Sans.woff2') format('woff2'),
      url('fonts/KudryashevDisplay-Sans.woff') format('woff');
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  /* Ground + ink */
  --canvas:#E2E8E8;
  --ink:#081F4C;              /* Night Sky */
  --signature:#1C39BB;        /* Persian Blue */

  /* Accents. The vivid three are fills and bars only, never text on light. */
  --turquoise:#0ABABA;
  --pink:#DC347E;
  --saffron:#F5B301;
  /* Darkened derivatives, the only accents cleared to carry text. */
  --turquoise-deep:#067272;   /* 5.74 on white */
  --pink-deep:#B02561;        /* 6.40 on white */

  --muted:rgba(8,31,76,0.64);
  --rule:rgba(8,31,76,0.18);
  --rule-strong:rgba(8,31,76,0.30);

  --display:'Kudryashev Display Sans',Georgia,serif;
  --system:'Inter',system-ui,-apple-system,sans-serif;

  --track-eyebrow:0.22em;
  --track-label:0.16em;
  --ease:0.18s ease;

  --max:1120px;
  --pad-x:clamp(20px,4vw,56px);
  --nav-h:70px;
}

*{box-sizing:border-box;margin:0;padding:0}
img,svg,iframe{display:block;max-width:100%}
html{scroll-behavior:smooth}
body{
  font-family:var(--system);background:#fff;color:var(--ink);
  line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad-x)}
/* balance stops a heading orphaning its last word on its own line. */
h1,h2,h3{font-weight:400;letter-spacing:-0.015em;line-height:1.08;text-wrap:balance}
a{color:inherit}

.eyebrow{font-size:11px;font-weight:600;letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--muted)}
.label{font-size:10.5px;font-weight:600;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--muted)}
.num{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-0.02em}

/* ---- buttons: one system, turquoise primary ---- */
.btn{
  display:inline-block;padding:14px 28px;font-family:inherit;font-size:14px;
  font-weight:600;letter-spacing:0.01em;text-decoration:none;cursor:pointer;
  border:1px solid transparent;border-radius:0;
  transition:background var(--ease),color var(--ease),border-color var(--ease);
}
/* Turquoise carries a Night Sky label at 6.67. White on turquoise is 2.40 and
   must never be used, which is why hover darkens to Turquoise Deep first. */
/* The fill is Turquoise as asked, but turquoise on white is only 2.40, under the
   3:1 WCAG needs to make a control's boundary identifiable. The deeper border
   (5.74) defines the edge without darkening the button itself. */
.btn--solid{background:var(--turquoise);color:var(--ink);border-color:var(--turquoise-deep)}
.btn--solid:hover{background:var(--turquoise-deep);border-color:var(--turquoise-deep);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--turquoise);border-color:var(--turquoise-deep);color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---- header ---- */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,0.94);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
/* Rasterised deliberately: the mark's rings are 2.5 units in a 680 viewBox, so
   as SVG at this size they compute to ~0.1px and browsers drop them entirely. */
.brand img{width:34px;height:34px}
.brand span{font-family:var(--display);font-size:21px;letter-spacing:0.005em;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-link{font-size:13.5px;font-weight:500;text-decoration:none;color:var(--muted);
  transition:color var(--ease)}
.nav-link:hover{color:var(--ink)}
.nav .btn{padding:10px 20px;font-size:13px}
@media(max-width:720px){.nav-link{display:none}}

/* ---- footer ---- */
footer{padding:28px 0;border-top:1px solid var(--rule);font-size:12.5px;color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between;align-items:center}
.foot-links{display:flex;gap:20px}
/* Padded so the policy links clear the 44px tap-target guideline on a phone. */
.foot-links a{display:inline-block;padding:12px 0;color:var(--muted);text-decoration:none;
  transition:color var(--ease)}
.foot-links a:hover{color:var(--ink)}