/**
 * fixeo-estimation-page-v1.css
 * Phase 7C.10C — /estimation premium public gateway
 * Applies ONLY to estimation.html.
 * Does NOT affect homepage, modal, or estimation PAGE_REQUIRED continuation UI.
 *
 * SCOPE RULES:
 *   .fxep-public-only  — visible only in PUBLIC mode
 *   .fxep-mode-public  — body class active in PUBLIC mode
 *   .fxep-mode-page-required — body class in PAGE_REQUIRED mode
 *
 * !important usage: ONLY to override estimator/reservation styles
 *   that bleed in through shared CSS (e.g. body background).
 *   Each use is documented inline.
 */

/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════════════════ */
:root {
  --fxep-bg:           #09090e;
  --fxep-bg-2:         #0e0e16;
  --fxep-surface:      rgba(255,255,255,0.04);
  --fxep-surface-2:    rgba(255,255,255,0.065);
  --fxep-surface-3:    rgba(255,255,255,0.09);
  --fxep-border:       rgba(255,255,255,0.08);
  --fxep-border-2:     rgba(255,255,255,0.12);
  --fxep-orange:       #FF7A00;
  --fxep-orange-dim:   rgba(255,122,0,0.14);
  --fxep-orange-glow:  rgba(255,122,0,0.22);
  --fxep-blue:         rgba(100,140,255,0.9);
  --fxep-blue-dim:     rgba(100,140,255,0.12);
  --fxep-text-1:       #F2F0EC;
  --fxep-text-2:       rgba(242,240,236,0.52);
  --fxep-text-3:       rgba(242,240,236,0.30);
  --fxep-radius:       14px;
  --fxep-radius-sm:    10px;
  --fxep-max:          600px;
}

/* ── Base ───────────────────────────────────────────────── */
body.fxep-mode-public {
  background: var(--fxep-bg) !important; /* overrides shared body bg */
  color: var(--fxep-text-1);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Mode visibility ────────────────────────────────────── */
.fxep-public-only { display: block; }

body.fxep-mode-page-required .fxep-public-only {
  display: none !important; /* !important: must override even flex/grid display */
}
body.fxep-mode-public #estimation-layout {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   STICKY HEADER
══════════════════════════════════════════════════════════ */
.fxep-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: 58px;
  background: rgba(9,9,14,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--fxep-border);
}
.fxep-header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--fxep-text-1);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.fxep-header-rafi-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fxep-blue);
  background: var(--fxep-blue-dim);
  border: 1px solid rgba(100,140,255,0.2);
  border-radius: 20px;
  padding: 3px 8px;
}
.fxep-header-rafi-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fxep-blue);
  box-shadow: 0 0 6px var(--fxep-blue);
}
.fxep-header-spacer { flex: 1; }
.fxep-header-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--fxep-text-2);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--fxep-border);
  transition: color 150ms, border-color 150ms;
  min-height: 36px; /* touch-safe */
}
.fxep-header-back:hover {
  color: var(--fxep-text-1);
  border-color: var(--fxep-border-2);
}

/* ══════════════════════════════════════════════════════════
   HERO — RAFI COMMAND CENTER
══════════════════════════════════════════════════════════ */
.fxep-hero {
  padding: 52px 20px 44px;
  max-width: var(--fxep-max);
  margin: 0 auto;
  text-align: center;
}

/* Technology signal / RAFI identity */
.fxep-hero-signal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fxep-blue);
  margin-bottom: 28px;
}
.fxep-hero-signal-line {
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fxep-blue));
}
.fxep-hero-signal-line.r {
  background: linear-gradient(90deg, var(--fxep-blue), transparent);
}
.fxep-hero-signal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fxep-blue);
  box-shadow: 0 0 8px var(--fxep-blue);
  animation: fxep-signal-pulse 2.4s ease-in-out infinite;
}
@keyframes fxep-signal-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 8px var(--fxep-blue); }
  50% { opacity: 0.55; box-shadow: 0 0 3px var(--fxep-blue); }
}
@media (prefers-reduced-motion: reduce) {
  .fxep-hero-signal-dot { animation: none !important; }
}

/* Eyebrow */
.fxep-hero-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fxep-text-3);
  margin-bottom: 10px;
}

/* H1 */
.fxep-hero-h1 {
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--fxep-text-1);
  margin: 0 0 16px;
}

/* Subtitle */
.fxep-hero-sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fxep-text-2);
  max-width: 460px;
  margin: 0 auto 36px;
}

/* ── Input console card ─────────────────────────────────── */
.fxep-console {
  background: var(--fxep-surface);
  border: 1px solid var(--fxep-border);
  border-radius: var(--fxep-radius);
  text-align: left;
  transition: border-color 200ms, box-shadow 200ms;
  overflow: hidden;
}
.fxep-console:focus-within {
  border-color: rgba(255,122,0,0.3);
  box-shadow: 0 0 0 3px rgba(255,122,0,0.07);
}
/* Legacy alias — JS still uses fxep-input-card class */
.fxep-input-card {
  background: var(--fxep-surface);
  border: 1px solid var(--fxep-border);
  border-radius: var(--fxep-radius);
  padding: 0;
  text-align: left;
  transition: border-color 200ms, box-shadow 200ms;
}
.fxep-input-card:focus-within {
  border-color: rgba(255,122,0,0.3);
  box-shadow: 0 0 0 3px rgba(255,122,0,0.07);
}

.fxep-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 0;
}
.fxep-input-icon {
  font-size: 17px;
  flex-shrink: 0;
  opacity: 0.55;
}
.fxep-nlp-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1rem; /* CRITICAL: ≥16px prevents iOS Safari auto-zoom */
  color: var(--fxep-text-1);
  line-height: 1.45;
  font-family: inherit;
  min-height: 44px; /* ≥44px touch target */
  padding: 0;
  caret-color: var(--fxep-orange);
}
.fxep-nlp-input::placeholder {
  color: var(--fxep-text-3);
  font-size: 0.9375rem; /* slightly smaller placeholder, still no zoom risk */
}
.fxep-input-clear {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fxep-surface-2);
  border: none;
  color: var(--fxep-text-2);
  font-size: 12px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 150ms;
}
.fxep-input-clear:hover { background: var(--fxep-surface-3); }
.fxep-input-card.has-value .fxep-input-clear { display: flex; }

/* City chip row */
.fxep-city-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--fxep-border);
  flex-wrap: wrap;
}
.fxep-city-label {
  font-size: 11px;
  color: var(--fxep-text-3);
  flex-shrink: 0;
}
/* City chip is a <button> — min 44px hit area via padding + min-height */
.fxep-city-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  min-height: 32px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fxep-text-2);
  background: var(--fxep-surface-2);
  border: 1px solid var(--fxep-border);
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
  font-family: inherit;
}
.fxep-city-chip:hover {
  color: var(--fxep-text-1);
  border-color: var(--fxep-border-2);
}
.fxep-city-chip.detected {
  color: var(--fxep-orange);
  border-color: rgba(255,122,0,0.3);
  background: var(--fxep-orange-dim);
}

/* Suggestion chips */
.fxep-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--fxep-border);
}
.fxep-sugg-chip {
  padding: 7px 13px;
  min-height: 34px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--fxep-text-2);
  background: var(--fxep-surface-2);
  border: 1px solid var(--fxep-border);
  cursor: pointer;
  font-family: inherit;
  transition: color 150ms, border-color 150ms, background 150ms;
  white-space: nowrap;
}
.fxep-sugg-chip:hover {
  color: var(--fxep-text-1);
  border-color: rgba(255,122,0,0.3);
  background: var(--fxep-orange-dim);
}

/* Product micro-signal rail (3 steps) */
.fxep-pipeline-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 16px;
  overflow: hidden;
}
.fxep-pipeline-node {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fxep-text-3);
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 0 4px;
}
.fxep-pipeline-arrow {
  font-size: 11px;
  color: var(--fxep-border-2);
  padding: 0 2px;
}
.fxep-pipeline-icon {
  font-size: 13px;
  opacity: 0.7;
}

/* Primary CTA */
.fxep-hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 15px 24px;
  border-radius: var(--fxep-radius-sm);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: var(--fxep-orange);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 150ms, transform 100ms;
  min-height: 50px; /* ≥44px touch target */
}
.fxep-hero-cta:hover { opacity: 0.88; }
.fxep-hero-cta:active { transform: scale(0.985); }

/* ══════════════════════════════════════════════════════════
   RESUME CARD (existing verified pricing context)
══════════════════════════════════════════════════════════ */
.fxep-resume-wrap {
  max-width: var(--fxep-max);
  margin: 0 auto;
  padding: 0 20px 8px;
}
.fxep-resume-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--fxep-radius);
  border: 1.5px solid rgba(255,122,0,0.28);
  background: rgba(255,122,0,0.055);
}
.fxep-resume-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fxep-orange);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--fxep-orange);
  animation: fxep-pulse 2s ease-in-out infinite;
}
@keyframes fxep-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .fxep-resume-dot { animation: none !important; }
}
.fxep-resume-body { flex: 1; min-width: 0; }
.fxep-resume-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fxep-orange);
  margin-bottom: 2px;
}
.fxep-resume-service {
  font-size: 14px;
  font-weight: 600;
  color: var(--fxep-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fxep-resume-price {
  font-size: 12px;
  color: var(--fxep-text-2);
  margin-top: 1px;
}
.fxep-resume-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.fxep-resume-cta {
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: opacity 150ms;
}
.fxep-resume-cta:hover { opacity: 0.85; }
.fxep-resume-cta.primary { background: var(--fxep-orange); color: #fff; }
.fxep-resume-cta.secondary {
  background: var(--fxep-surface-2);
  color: var(--fxep-text-2);
  border: 1px solid var(--fxep-border);
}

/* ══════════════════════════════════════════════════════════
   OUTCOME ARCHITECTURE SECTION
   "Une analyse, le bon parcours."
══════════════════════════════════════════════════════════ */
.fxep-outcomes {
  padding: 48px 20px;
  max-width: var(--fxep-max);
  margin: 0 auto;
}
.fxep-outcomes-heading {
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--fxep-text-1);
  margin: 0 0 6px;
  line-height: 1.2;
}
.fxep-outcomes-sub {
  font-size: 13px;
  color: var(--fxep-text-2);
  margin: 0 0 28px;
  line-height: 1.5;
}
.fxep-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.fxep-outcome-card {
  padding: 18px 16px;
  border-radius: var(--fxep-radius-sm);
  background: var(--fxep-surface);
  border: 1px solid var(--fxep-border);
  transition: border-color 200ms;
}
.fxep-outcome-card:hover { border-color: var(--fxep-border-2); }
.fxep-outcome-icon {
  font-size: 22px;
  margin-bottom: 10px;
  display: block;
}
.fxep-outcome-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fxep-text-1);
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}
.fxep-outcome-desc {
  font-size: 12px;
  color: var(--fxep-text-2);
  line-height: 1.5;
}
/* PRIX FIXEO card — slight orange accent */
.fxep-outcome-card.is-price {
  border-color: rgba(255,122,0,0.18);
  background: rgba(255,122,0,0.04);
}
.fxep-outcome-card.is-price .fxep-outcome-name {
  color: var(--fxep-orange);
}

/* ══════════════════════════════════════════════════════════
   HOW IT WORKS (pipeline flow)
══════════════════════════════════════════════════════════ */
.fxep-how {
  padding: 0 20px 48px;
  max-width: var(--fxep-max);
  margin: 0 auto;
}
.fxep-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fxep-text-3);
  margin-bottom: 24px;
}
.fxep-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
/* Continuous line connecting steps */
.fxep-steps::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 36px;
  width: 1px;
  background: linear-gradient(to bottom, var(--fxep-border-2), var(--fxep-border));
  pointer-events: none;
}
.fxep-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 0;
  position: relative;
}
.fxep-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fxep-bg-2);
  border: 1px solid var(--fxep-border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--fxep-orange);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.fxep-step-body { flex: 1; padding-top: 6px; }
.fxep-step-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fxep-text-1);
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}
.fxep-step-desc {
  font-size: 13px;
  color: var(--fxep-text-2);
  line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════
   ELIGIBLE SERVICES
══════════════════════════════════════════════════════════ */
.fxep-services {
  padding: 0 20px 48px;
  max-width: var(--fxep-max);
  margin: 0 auto;
}
.fxep-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.fxep-service-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border-radius: var(--fxep-radius-sm);
  background: var(--fxep-surface);
  border: 1px solid var(--fxep-border);
  cursor: pointer;
  transition: border-color 150ms;
}
.fxep-service-item:hover { border-color: rgba(255,122,0,0.25); }
.fxep-service-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.fxep-service-body { flex: 1; min-width: 0; }
.fxep-service-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fxep-text-1);
  line-height: 1.35;
  margin-bottom: 3px;
}
.fxep-service-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--fxep-text-3);
}
.fxep-service-badge.is-price {
  color: var(--fxep-orange);
}

/* ══════════════════════════════════════════════════════════
   FIXEO UNIVERSE GATEWAY
══════════════════════════════════════════════════════════ */
.fxep-gateway {
  padding: 0 20px 48px;
  max-width: var(--fxep-max);
  margin: 0 auto;
}
.fxep-gateway-heading {
  font-size: clamp(18px, 4.5vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fxep-text-1);
  margin: 0 0 6px;
}
.fxep-gateway-sub {
  font-size: 13px;
  color: var(--fxep-text-2);
  margin: 0 0 20px;
}
.fxep-gateway-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.fxep-gateway-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px;
  border-radius: var(--fxep-radius-sm);
  background: var(--fxep-surface);
  border: 1px solid var(--fxep-border);
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms, background 200ms;
  cursor: pointer;
}
.fxep-gateway-card:hover {
  border-color: var(--fxep-border-2);
  background: var(--fxep-surface-2);
  text-decoration: none;
  color: inherit;
}
.fxep-gateway-icon { font-size: 22px; }
.fxep-gateway-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--fxep-text-1);
  letter-spacing: -0.01em;
}
.fxep-gateway-desc {
  font-size: 12px;
  color: var(--fxep-text-2);
  line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════
   TRUST RAIL
══════════════════════════════════════════════════════════ */
.fxep-trust {
  padding: 0 20px 48px;
  max-width: var(--fxep-max);
  margin: 0 auto;
}
.fxep-trust-rail {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.fxep-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  min-height: 40px;
  border-radius: 20px;
  background: var(--fxep-surface);
  border: 1px solid var(--fxep-border);
  font-size: 13px;
  color: var(--fxep-text-2);
  font-weight: 500;
}
.fxep-trust-icon { font-size: 15px; }

/* ══════════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════════ */
.fxep-faq {
  padding: 0 20px 60px;
  max-width: var(--fxep-max);
  margin: 0 auto;
}
.fxep-faq-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fxep-faq-item {
  border-radius: var(--fxep-radius-sm);
  border: 1px solid var(--fxep-border);
  overflow: hidden;
  background: var(--fxep-surface);
}
.fxep-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--fxep-text-1);
  cursor: pointer;
  line-height: 1.4;
  font-family: inherit;
  min-height: 48px; /* ≥44px touch target */
}
.fxep-faq-chevron {
  font-size: 11px;
  color: var(--fxep-text-3);
  transition: transform 200ms;
  flex-shrink: 0;
}
.fxep-faq-item.open .fxep-faq-chevron { transform: rotate(180deg); }
.fxep-faq-a {
  display: none;
  padding: 0 16px 15px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--fxep-text-2);
  border-top: 1px solid var(--fxep-border);
  padding-top: 12px;
}
.fxep-faq-item.open .fxep-faq-a { display: block; }

/* ══════════════════════════════════════════════════════════
   FOOTER SHIM
══════════════════════════════════════════════════════════ */
.fxep-footer {
  padding: 24px 20px;
  border-top: 1px solid var(--fxep-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.fxep-footer-brand {
  font-size: 15px;
  font-weight: 800;
  color: var(--fxep-text-1);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.fxep-footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.fxep-footer-link {
  font-size: 12px;
  color: var(--fxep-text-3);
  text-decoration: none;
  transition: color 150ms;
}
.fxep-footer-link:hover { color: var(--fxep-text-2); }

/* ══════════════════════════════════════════════════════════
   SECTION DIVIDER
══════════════════════════════════════════════════════════ */
.fxep-section-divider {
  height: 1px;
  background: var(--fxep-border);
  max-width: calc(var(--fxep-max) - 40px);
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — ≥480px (wider small/medium phones)
══════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  .fxep-service-grid { grid-template-columns: repeat(3, 1fr); }
  .fxep-gateway-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — ≥640px (tablet / desktop)
══════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  :root { --fxep-max: 640px; }
  .fxep-hero { padding: 72px 20px 56px; }
  .fxep-outcomes-grid { grid-template-columns: repeat(4, 1fr); }
  .fxep-service-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   NARROW SAFETY — ≤380px (SE, 360px Android)
══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .fxep-hero-h1 { font-size: 26px; }
  .fxep-outcomes-grid { grid-template-columns: 1fr 1fr; }
  .fxep-gateway-grid { grid-template-columns: 1fr 1fr; }
  .fxep-service-grid { grid-template-columns: 1fr 1fr; }
  .fxep-pipeline-rail { flex-direction: column; gap: 4px; }
  .fxep-pipeline-arrow { transform: rotate(90deg); }
  .fxep-resume-actions { flex-direction: column; gap: 6px; }
}