/* ==========================================================
   N.S Gestion — Tokens + base + no-scroll stage architecture
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* Palette — graphite & bourgogne (gris foncé + accent rouge vin) */
  --forest:        oklch(0.32 0.006 70);   /* graphite primary */
  --forest-light:  oklch(0.44 0.008 70);   /* medium graphite */
  --forest-dark:   oklch(0.20 0.005 70);   /* deep graphite */
  --forest-deep:   oklch(0.13 0.005 70);   /* near-black */
  --amber:         oklch(0.42 0.13 22);    /* bourgogne primary */
  --amber-deep:    oklch(0.34 0.15 18);    /* deep bourgogne */
  --amber-light:   oklch(0.78 0.06 22);    /* dusty rose (for dark bg) */
  --amber-glow:    oklch(0.52 0.16 22);    /* vibrant bourgogne */
  --rust:          oklch(0.48 0.14 25);    /* used sparingly */
  --charcoal:      oklch(0.22 0.005 60);
  --ink:           oklch(0.16 0.005 60);
  --stone:         oklch(0.48 0.005 60);
  --stone-light:   oklch(0.65 0.005 60);
  --warm-white:    oklch(0.975 0.004 70);
  --warm-gray:     oklch(0.93 0.006 70);
  --warm-gray-2:   oklch(0.88 0.008 70);
  --paper:         oklch(0.99 0.003 70);

  --font-display: 'Fraunces', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
  --font-body:    'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;

  /* Disciplined type scale */
  --t-eyebrow: 11px;
  --t-caption: 13px;
  --t-body-sm: 14px;
  --t-body:    16px;
  --t-lede:    18px;
  --t-h3:      22px;
  --t-h2:      28px;
  --t-h1:      clamp(34px, 3.4vw, 44px);
  --t-hero:    clamp(40px, 4vw, 52px);

  /* Spacing (4-pt grid, used as multiples) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 64px;

  /* Motion — premium curves */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);     /* default */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);          /* expo out — premium feel */
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:  cubic-bezier(0.32, 0.72, 0.32, 1);
  --ease-spring:cubic-bezier(0.34, 1.36, 0.64, 1);

  --shadow-soft: 0 1px 2px rgba(40,30,20,0.04), 0 4px 16px rgba(40,30,20,0.05);
  --shadow-card: 0 1px 3px rgba(40,30,20,0.05), 0 12px 28px -12px rgba(40,30,20,0.12);
  --shadow-lift: 0 2px 6px rgba(40,30,20,0.06), 0 24px 48px -20px rgba(40,30,20,0.18);
}

* { box-sizing: border-box; }

.nsg-funnel-host { height: 100vh; }

.nsg-funnel-host {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--charcoal);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  overflow: hidden; /* no global scroll */
}

button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   App shell — full viewport, no scroll
   ============================================================ */

.nsg-funnel-host {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--warm-white);
}

/* When content can fit, the stage centers; when not, it scrolls naturally. */
.nsg-funnel-host .stage {
  min-height: 100vh;
  height: auto !important;
  padding: 76px 20px 40px;
  align-items: center;
}
.nsg-funnel-host .screen {
  position: relative !important;
  height: auto !important;
  max-height: none !important;
}
.nsg-funnel-host .screen-inner,
.nsg-funnel-host .hook,
.nsg-funnel-host .proof,
.nsg-funnel-host .qscreen,
.nsg-funnel-host .result,
.nsg-funnel-host .form-screen,
.nsg-funnel-host .sent {
  max-height: none !important;
  height: auto !important;
  min-height: auto !important;
}

/* Mobile / small viewport — stack columns, align top */
@media (max-width: 900px), (max-height: 700px) {
  .nsg-funnel-host .stage { align-items: flex-start !important; }
  .nsg-funnel-host .hook,
  .nsg-funnel-host .form-screen,
  .nsg-funnel-host .sent {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   Top bar — minimal, refined
   ============================================================ */

.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding: 22px 48px;
  display: flex;
  align-items: center;
  gap: 32px;
  pointer-events: none;
}
.topbar .word {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  flex-shrink: 0;
  pointer-events: auto;
}
.topbar .word .sep { color: var(--stone-light); margin: 0 8px; font-weight: 400; }
.topbar .word .where {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  color: var(--stone);
  font-weight: 400;
  letter-spacing: 0.005em;
}
.topbar .progress {
  flex: 1;
  height: 2px;
  background: rgba(40,30,20,0.10);
  border-radius: 2px;
  overflow: hidden;
  max-width: 480px;
  position: relative;
}
.topbar .progress::before {
  /* Subtle inner highlight on the unfilled part */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(40,30,20,0.04) 50%, transparent 100%);
  pointer-events: none;
}
.topbar .progress .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--forest) 0%, var(--amber-deep) 100%);
  border-radius: 2px;
  transform-origin: left;
  transition: transform 800ms var(--ease-out);
}
.topbar .step {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  color: var(--stone);
  letter-spacing: 0.01em;
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 140px;
}
.topbar .step b { color: var(--charcoal); font-weight: 600; }

/* ============================================================
   Stage — fixed-height, content perfectly centered
   ============================================================ */

.stage {
  position: relative;
  height: 100vh;
  padding: 76px 48px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Screen transition — premium fade + slide. Keyframe never below 0.6 opacity
   so content stays visible even if the iframe animation engine stalls. */
.screen-in {
  animation: screen-in 700ms var(--ease-out);
}
@keyframes screen-in {
  0%   { opacity: 0.6; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
.screen-out {
  animation: screen-out 280ms var(--ease-in) forwards;
  pointer-events: none;
}
@keyframes screen-out {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Reveal — staggered children inside a screen
   Never below 0.6 opacity in keyframes (resilient to anim stalls)
   ============================================================ */

.reveal {
  animation: reveal-up 700ms var(--ease-out);
}
.reveal[data-d="1"] { animation-delay: 50ms; }
.reveal[data-d="2"] { animation-delay: 130ms; }
.reveal[data-d="3"] { animation-delay: 210ms; }
.reveal[data-d="4"] { animation-delay: 290ms; }
.reveal[data-d="5"] { animation-delay: 370ms; }
.reveal[data-d="6"] { animation-delay: 450ms; }
.reveal[data-d="7"] { animation-delay: 530ms; }
@keyframes reveal-up {
  0%   { opacity: 0.6; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Atoms
   ============================================================ */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.eyebrow.stone  { color: var(--stone); }
.eyebrow.forest { color: var(--forest); }
.eyebrow.amber  { color: var(--amber-deep); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
  background: transparent;
  border: 1px solid oklch(0.32 0.006 70 / 0.25);
  border-radius: 4px;
  white-space: nowrap;
}
.tag.amber { color: var(--amber-deep); border-color: oklch(0.42 0.13 22 / 0.30); }
.tag.rust  { color: var(--rust);       border-color: oklch(0.48 0.14 25 / 0.28); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--warm-white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(245,242,236,0.10),
    0 1px 2px rgba(20,15,10,0.10);
  transition:
    transform 250ms var(--ease-out),
    background-color 250ms var(--ease-out),
    box-shadow 350ms var(--ease-out);
}
.btn:hover {
  background: var(--forest-light);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -10px oklch(0.20 0.005 70 / 0.45);
}
.btn:active { transform: translateY(0); transition-duration: 80ms; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .arr { transition: transform 250ms var(--ease-out); display: inline-block; }
.btn:hover .arr { transform: translateX(4px); }

.btn-amber {
  background: var(--amber);
  color: var(--warm-white);
  box-shadow:
    inset 0 1px 0 rgba(245,242,236,0.14),
    0 1px 2px rgba(60,15,15,0.15);
}
.btn-amber:hover {
  background: var(--amber-glow);
  box-shadow: 0 10px 26px -10px oklch(0.42 0.13 22 / 0.50);
}

.btn-ghost {
  background: transparent;
  color: var(--forest);
  border: 1px solid rgba(40,30,20,0.18);
}
.btn-ghost:hover {
  background: transparent;
  border-color: var(--forest);
  box-shadow: none;
  transform: none;
}

.btn-big { padding: 16px 28px; font-size: 16px; }

/* Back button */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--stone);
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  font-weight: 500;
  padding: 6px 10px 6px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color 180ms, transform 180ms var(--ease-out);
  align-self: flex-start;
  white-space: nowrap;
}
.back-btn:hover { color: var(--charcoal); transform: translateX(-2px); }

/* Caret-y horizontal rule used as section divider */
.rule {
  height: 1px;
  background: rgba(40,30,20,0.10);
  border: 0;
  margin: 0;
}

/* Number / money typography */
.num-display {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96;
  font-weight: 400;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
  letter-spacing: -0.025em;
  line-height: 0.95;
}