/* ════════════════════════════════════════════════════════════════
   ATUMIND ROI — SHARED LIGHT DESIGN TOKENS
   Peel teal #2EC4B6 brand · cool-neutral light surface
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* brand — peel teal */
  --peel: #2EC4B6;
  --peel-700: #0B7A70;   /* accessible text / links on white */
  --peel-600: #129E92;
  --peel-500: #1FB3A6;
  --peel-300: #8FE0D7;
  --peel-tint: #E4F6F4;
  --peel-tint-2: #F1FAF9;
  --peel-ink: #06403A;

  /* neutral surface (cool, faint teal cast) */
  --bg: #F3F7F6;
  --bg-2: #ECF2F1;
  --surface: #FFFFFF;
  --surface-2: #FAFCFC;
  --ink: #0F1C1E;
  --ink-2: #46585B;
  --ink-3: #7C8E90;
  --ink-4: #A9B8B9;
  --line: #E2EAE9;
  --line-2: #EEF3F2;

  /* semantic */
  --pos: #0E9E72;
  --pos-tint: #E3F6EF;
  --warn: #C9821B;
  --warn-tint: #FBF1DD;
  --neg: #D4503F;
  --neg-tint: #FBE9E6;

  /* type */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* shape */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(15,28,30,.04), 0 1px 3px rgba(15,28,30,.05);
  --shadow: 0 4px 16px -4px rgba(15,28,30,.08), 0 2px 6px -2px rgba(15,28,30,.05);
  --shadow-lg: 0 18px 48px -12px rgba(15,28,30,.16), 0 6px 18px -6px rgba(15,28,30,.08);
  --shadow-peel: 0 10px 30px -8px rgba(46,196,182,.45);

  /* chart categorical palette — teal-anchored, harmonious */
  --c1: #1FB3A6; --c2: #2B6E8C; --c3: #3FA37A; --c4: #8367C7;
  --c5: #D89A2B; --c6: #D4503F; --c7: #4F9BD9; --c8: #C76B9E;
}

* , *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
::selection { background: var(--peel-300); color: var(--peel-ink); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #CBD8D7; border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--peel-500); }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ───────── brand mark (shared) ───────── */
.atu-mark { display: inline-flex; align-items: center; gap: .56rem; font-family: var(--display); user-select: none; }
.atu-glyph { width: 30px; height: 30px; border-radius: 9px; background: var(--peel); position: relative; flex-shrink: 0; box-shadow: 0 3px 10px -2px rgba(46,196,182,.55); }
.atu-glyph::before { content: ''; position: absolute; inset: 0; border-radius: 9px; background:
  radial-gradient(circle at 30% 28%, rgba(255,255,255,.55), transparent 42%); }
.atu-glyph::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; transform: translate(-50%,-50%); border-radius: 50%; border: 3px solid #fff; border-right-color: transparent; transform-origin: center; transform: translate(-50%,-50%) rotate(-45deg); }
.atu-word { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.atu-word sup { color: var(--peel-600); font-size: .7em; top: -.5em; }
.atu-kicker { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); font-family: var(--sans); font-weight: 600; }

/* ───────── embed mode (in iframe on atumind.be) ─────────
   The host site nav provides branding, so hide the calculator's branding and
   stop the header from being a separate strip. The header is pinned top-right
   (fixed, transparent) so its action buttons — Reset, and later Copy/Download —
   sit on the step-bar row, right-aligned, and stay visible on scroll.
   No DOM is moved (the app re-renders the stepper), so this stays robust. */
.is-embedded .atu-mark { display: none; }
/* Drop viewport-height floors so the calc is its true content height — lets the
   host size the iframe to fit (no empty space, no feedback loop on resize). */
.is-embedded .shell { position: relative; min-height: 0; }
.is-embedded .landing { min-height: 0; }
.is-embedded .hdr {
  position: absolute; top: 0; right: 0; left: auto; width: auto;
  background: transparent; border-bottom: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 60;
}
.is-embedded .hdr-in { max-width: none; justify-content: flex-end; }
/* Non-sticky in embed: the host page scrolls as one, so the calc's bars must
   not stick (a sticky bar inside the iframe slides under the host site nav). */
.is-embedded .stepper { position: static; }