/* ═══════════════════════════════════════════
   GML Strategic Fit Finder — Styles
   Knox brand system. Dark mode. Single-click cards.
   ═══════════════════════════════════════════ */

/* ── Font Faces — Aeonik (matches main GML site) ── */
@font-face {
  font-family: 'Aeonik';
  src: url('../intake/fonts/aeonik/Aeonik-Regular.woff2') format('woff2'),
       url('../intake/fonts/aeonik/Aeonik-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../intake/fonts/aeonik/Aeonik-Medium.woff2') format('woff2'),
       url('../intake/fonts/aeonik/Aeonik-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../intake/fonts/aeonik/Aeonik-Bold.woff2') format('woff2'),
       url('../intake/fonts/aeonik/Aeonik-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Colors — Knox dark-mode palette ── */
  --bg: #131313;
  --bg-surface: #1a1a1a;
  --bg-elevated: #222;
  --bg-card: #2a2a2a;
  --bg-input: rgba(255,255,255,0.03);
  --bg-input-focus: rgba(255,255,255,0.06);
  --accent: #FF8F60;
  --accent-hover: #FF7A45;
  --accent-dim: rgba(255,143,96,0.08);
  --accent-glow: rgba(255,143,96,0.15);
  --text: #f0f0f5;
  --text-muted: rgba(240,240,245,0.55);
  --text-dim: rgba(240,240,245,0.3);
  --border: rgba(255,255,255,0.08);
  --border-focus: rgba(255,143,96,0.35);
  --success: #4ade80;
  --success-dim: rgba(74,222,128,0.1);
  --success-glow: rgba(74,222,128,0.15);
  --error: #f87171;
  --ease: cubic-bezier(0.25,0.1,0.25,1);

  /* ── Tier-specific accent colors (matches homepage commercial.css) ── */
  --tier-foundation: #4ade80;
  --tier-growth: #60a5fa;
  --tier-partnership: #c084fc;
  --tier-advisory: #facc15;

  /* ── Typography ── */
  --font-body: 'Aeonik', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: 'Aeonik', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono','SF Mono', ui-monospace, monospace;

  /* ── Radii ── */
  --radius: 8px;
  --radius-lg: 12px;

  /* ── Sizing ── */
  --form-width: 680px;
  --bar-width: 900px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

/* ── Ambient grid ── */
.ambient-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size:32px 32px;opacity:0.35}

/* ═══════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════ */
.top-bar{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(19,19,19,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border)}
.top-bar-inner{max-width:var(--bar-width);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between}
.brand-mark{font-family:var(--font-heading);font-size:0.9rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
.brand-sep{opacity:0.35;margin:0 2px}
.brand-sub{font-weight:500;letter-spacing:0.04em;opacity:0.6;font-size:0.85em}

/* Progress dots */
.progress-dots{display:flex;gap:8px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all 0.3s var(--ease)}
.dot.active{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.dot.completed{background:var(--accent);opacity:0.6}

.sla-badge{font-family:var(--font-mono);font-size:0.76rem;color:var(--text-dim);
  display:flex;align-items:center;gap:5px;letter-spacing:0.02em}
.sla-badge strong{color:var(--accent);font-weight:500}
.sla-icon{opacity:0.5;flex-shrink:0}

/* ═══════════════════════════════════════════
   MAIN
   ═══════════════════════════════════════════ */
.finder-main{position:relative;z-index:1;max-width:var(--form-width);margin:0 auto;
  padding:100px 24px 120px;min-height:100vh}

/* ═══════════════════════════════════════════
   STEPS
   ═══════════════════════════════════════════ */
.step{display:none}
.step.active{display:block;animation:stepIn 0.35s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.step-label{font-family:var(--font-mono);font-size:0.76rem;font-weight:500;
  text-transform:uppercase;letter-spacing:0.1em;color:var(--accent);margin-bottom:10px}
.step-title{font-family:var(--font-heading);font-size:1.75rem;font-weight:700;
  letter-spacing:-0.02em;margin-bottom:10px;line-height:1.25}
.step-subtitle{color:var(--text-muted);font-size:0.95rem;line-height:1.55;margin-bottom:28px}

/* ═══════════════════════════════════════════
   CARD SELECT GRID — single-click options
   ═══════════════════════════════════════════ */
.card-grid{display:grid;gap:10px;margin-top:4px}
.card-grid.cols-2{grid-template-columns:1fr 1fr}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card-grid.cols-budget{grid-template-columns:repeat(5,1fr)}

.card-option{position:relative;padding:24px 16px;background:var(--bg-input);
  border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;
  transition:all 0.25s var(--ease);text-align:center;user-select:none;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-body);color:var(--text)}
.card-option:hover{background:var(--accent-dim);border-color:var(--accent);
  transform:translateY(-2px);box-shadow:0 4px 16px var(--accent-glow)}
.card-option:hover .card-label{color:var(--accent)}
.card-option:hover .card-svg{stroke:var(--accent)}
.card-option.selected{background:var(--success-dim);border-color:var(--success);
  transform:translateY(0);box-shadow:0 0 16px var(--success-glow)}
.card-option.selected .card-label{color:var(--success)}
.card-option.selected .card-svg{stroke:var(--success)}
.card-option.selected .card-desc{color:var(--text-muted)}

.card-svg{stroke:var(--text-dim);transition:stroke 0.25s var(--ease)}
.card-label{font-size:0.92rem;font-weight:600;color:var(--text-muted);transition:color 0.25s var(--ease)}
.card-desc{font-size:0.78rem;color:var(--text-dim);line-height:1.4;transition:color 0.25s var(--ease)}

.card-option-compact{padding:16px 12px}
.card-option-compact .card-label{font-size:0.88rem}

.field-group{margin-bottom:28px}
.field-label-text{display:block;font-size:0.92rem;font-weight:500;margin-bottom:10px;color:var(--text)}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.step-actions{display:flex;gap:10px;margin-top:28px}
.btn-next{flex:1;padding:18px 32px;background:var(--accent);color:#fff;
  border:none;border-radius:var(--radius);font-family:var(--font-body);
  font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.2s var(--ease)}
.btn-next:hover:not(:disabled){background:var(--accent-hover);
  transform:translateY(-1px);box-shadow:0 4px 20px var(--accent-glow)}
.btn-next:disabled{opacity:0.4;cursor:not-allowed}
.btn-back{padding:18px 32px;background:transparent;border:1px solid var(--border);
  color:var(--text-muted);border-radius:var(--radius);font-family:var(--font-body);
  font-size:1rem;font-weight:500;cursor:pointer;transition:all 0.2s var(--ease)}
.btn-back:hover{background:var(--bg-input);color:var(--text)}

.link-btn{background:none;border:none;color:var(--accent);font-family:var(--font-body);
  font-size:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  transition:opacity 0.2s}
.link-btn:hover{opacity:0.8}

/* ═══════════════════════════════════════════
   TRUST ROW
   ═══════════════════════════════════════════ */
.trust-row{display:flex;justify-content:center;gap:24px;margin-top:32px;
  padding-top:18px;border-top:1px solid var(--border)}
.trust-item{font-family:var(--font-mono);font-size:0.76rem;color:var(--text-dim);
  display:flex;align-items:center;gap:6px}
.trust-svg{opacity:0.5}

/* ═══════════════════════════════════════════
   RESULT CARD
   ═══════════════════════════════════════════ */
.result-card{background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:36px 32px;text-align:center;
  animation:resultReveal 0.5s var(--ease)}
@keyframes resultReveal{from{opacity:0;transform:scale(0.97) translateY(12px)}
  to{opacity:1;transform:scale(1) translateY(0)}}

.result-header{margin-bottom:16px}

.result-badge{width:56px;height:56px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  box-shadow:0 0 32px var(--accent-glow);animation:badgePulse 2s var(--ease) infinite}
@keyframes badgePulse{0%,100%{box-shadow:0 0 32px var(--accent-glow)}
  50%{box-shadow:0 0 48px rgba(255,143,96,0.25)}}
.result-badge svg{stroke:#fff;width:26px;height:26px}

.result-badge-alt{background:var(--bg-elevated);border:1.5px solid var(--border);
  box-shadow:none;animation:none}
.result-badge-alt svg{stroke:var(--accent)}

.result-label{font-family:var(--font-mono);font-size:0.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.12em;color:var(--accent)}

.result-title{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;
  margin-bottom:16px}

.result-narrative{color:var(--text-muted);font-size:0.95rem;line-height:1.65;
  margin-bottom:20px;max-width:540px;margin-left:auto;margin-right:auto}

/* Tier recommendation */
.result-tier{margin-bottom:24px}
.tier-badge{display:inline-block;padding:8px 24px;
  border:1.5px solid var(--accent);border-radius:var(--radius);
  font-family:var(--font-heading);font-size:1.15rem;font-weight:700;
  letter-spacing:0.04em;margin-bottom:10px;
  /* default — overridden by tier-specific below */
  color:var(--accent);background:var(--accent-dim)}

/* Tier-specific result badge colors */
.tier-badge[data-tier="foundation"]{color:var(--tier-foundation);
  border-color:var(--tier-foundation);background:rgba(74,222,128,0.08)}
.tier-badge[data-tier="growth"]{color:var(--tier-growth);
  border-color:var(--tier-growth);background:rgba(96,165,250,0.08)}
.tier-badge[data-tier="partnership"]{color:var(--tier-partnership);
  border-color:var(--tier-partnership);background:rgba(192,132,252,0.08)}
.tier-badge[data-tier="advisory"]{color:var(--tier-advisory);
  border-color:var(--tier-advisory);background:rgba(250,204,21,0.08)}

.tier-explanation{color:var(--text-muted);font-size:0.85rem;line-height:1.55;
  max-width:480px;margin:0 auto}

/* Booking button */
.booking-btn{display:block;width:100%;max-width:420px;margin:0 auto;padding:18px 28px;
  border:none;border-radius:var(--radius);background:var(--accent);color:#fff;
  font-family:var(--font-heading);font-size:1rem;font-weight:600;cursor:pointer;
  transition:all 0.2s var(--ease);box-shadow:0 4px 20px var(--accent-glow);
  text-decoration:none;text-align:center}
.booking-btn:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(255,143,96,0.25);
  filter:brightness(1.08)}
.booking-meta{display:block;margin-top:14px;font-family:var(--font-mono);
  font-size:0.72rem;color:var(--text-dim);letter-spacing:0.04em}

/* Email capture (Step 0) */
.email-form{max-width:460px;margin:0 auto}
.email-input{display:block;width:100%;padding:14px 16px;margin-bottom:8px;
  background:var(--bg-input);border:1.5px solid var(--border);
  border-radius:var(--radius);color:var(--text);font-family:inherit;
  font-size:0.95rem;transition:border-color 0.2s var(--ease),background 0.2s var(--ease)}
.email-input::placeholder{color:var(--text-dim)}
.email-input:focus{outline:none;border-color:var(--accent);background:rgba(255,143,96,0.05)}
.email-input.email-input--error{border-color:#ef4444;background:rgba(239,68,68,0.05)}
.email-error{color:#ef4444;font-size:0.82rem;margin-bottom:12px}

.result-alt{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);
  font-size:0.82rem;color:var(--text-dim)}
.result-alt span{display:flex;align-items:center;justify-content:center;gap:6px}

.result-tiers-link{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}

/* ═══════════════════════════════════════════
   ALL TIERS GRID — breakout wider than form
   ═══════════════════════════════════════════ */
.all-tiers{margin-top:32px;animation:stepIn 0.4s var(--ease);
  width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  padding:0 24px;box-sizing:border-box}
.tiers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:1100px;margin:0 auto}

.tier-card{background:var(--bg-surface);border:1.5px solid var(--border);
  border-radius:var(--radius-lg);padding:28px 24px;text-align:left;
  transition:border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  border-top:3px solid var(--border)}
.tier-card:hover{border-color:rgba(255,255,255,0.12)}
.tier-card.recommended{box-shadow:0 0 24px var(--accent-dim)}

/* Tier-specific top borders and accent colors */
.tier-card[data-tier="foundation"]{border-top-color:var(--tier-foundation)}
.tier-card[data-tier="foundation"] .tier-card-name{color:var(--tier-foundation)}
.tier-card[data-tier="foundation"] .tier-card-features li::before{background:var(--tier-foundation)}
.tier-card[data-tier="foundation"].recommended{border-color:var(--tier-foundation)}

.tier-card[data-tier="growth"]{border-top-color:var(--tier-growth)}
.tier-card[data-tier="growth"] .tier-card-name{color:var(--tier-growth)}
.tier-card[data-tier="growth"] .tier-card-features li::before{background:var(--tier-growth)}
.tier-card[data-tier="growth"].recommended{border-color:var(--tier-growth)}

.tier-card[data-tier="partnership"]{border-top-color:var(--tier-partnership)}
.tier-card[data-tier="partnership"] .tier-card-name{color:var(--tier-partnership)}
.tier-card[data-tier="partnership"] .tier-card-features li::before{background:var(--tier-partnership)}
.tier-card[data-tier="partnership"].recommended{border-color:var(--tier-partnership)}

.tier-card[data-tier="advisory"]{border-top-color:var(--tier-advisory)}
.tier-card[data-tier="advisory"] .tier-card-name{color:var(--tier-advisory)}
.tier-card[data-tier="advisory"] .tier-card-features li::before{background:var(--tier-advisory)}
.tier-card[data-tier="advisory"].recommended{border-color:var(--tier-advisory)}

.tier-card-name{font-family:var(--font-heading);font-size:1rem;font-weight:700;
  margin-bottom:6px;letter-spacing:0.02em}
.tier-card-price{font-family:var(--font-mono);font-size:0.88rem;font-weight:500;
  color:var(--text);margin-bottom:16px}
.tier-card-price span{color:var(--text-dim);font-weight:400;font-size:0.78rem}

.tier-card-features{list-style:none;display:flex;flex-direction:column;gap:8px}
.tier-card-features li{font-size:0.8rem;color:var(--text-muted);line-height:1.45;
  padding-left:16px;position:relative}
.tier-card-features li::before{content:'';position:absolute;left:0;top:7px;
  width:6px;height:6px;border-radius:50%;opacity:0.6}

/* ═══════════════════════════════════════════
   CALENDLY MODAL
   ═══════════════════════════════════════════ */
.calendly-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.75);
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
  animation:fadeIn 0.25s ease}
.calendly-modal[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.calendly-modal__wrapper{position:relative;width:90vw;max-width:900px;height:80vh;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden}
.calendly-modal__close{position:absolute;top:12px;right:16px;z-index:10;background:none;
  border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:background 0.2s}
.calendly-modal__close:hover{background:rgba(255,255,255,0.06)}
.calendly-modal__container{width:100%;height:100%}
.calendly-modal__container iframe{width:100%;height:100%;border:none}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.finder-footer{position:relative;z-index:1;text-align:center;padding:24px;
  font-size:0.72rem;color:var(--text-dim)}
.finder-footer a{color:var(--text-muted);text-decoration:none}
.finder-footer a:hover{color:var(--text)}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:768px){
  .tiers-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .finder-main{padding:90px 16px 80px}
  .top-bar-inner{padding:12px 16px}
  .sla-badge{display:none}
  .brand-sub{display:none}
  .card-grid.cols-2{grid-template-columns:1fr 1fr}
  .card-grid.cols-budget{grid-template-columns:repeat(3,1fr)}
  .step-title{font-size:1.35rem}
  .trust-row{flex-direction:column;align-items:center;gap:8px}
  .result-card{padding:32px 20px}
  .tiers-grid{grid-template-columns:1fr}
}
@media(max-width:380px){
  .card-grid.cols-2{grid-template-columns:1fr}
  .card-grid.cols-budget{grid-template-columns:repeat(2,1fr)}
}