/* ══════════════════════════════════════════════
   SHELVIAN — HOW IT WORKS PAGE STYLES
   ══════════════════════════════════════════════ */

/* ── HERO ── */
.hero{padding:140px 64px 80px;max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.hero-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.09em;color:#888880;background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 14px;margin-bottom:20px}
.hero-tag-dot{width:6px;height:6px;border-radius:50%;background:#CBEC45;display:inline-block}
.hero h1{font-family:var(--f-head);font-size:52px;line-height:1.1;letter-spacing:-0.02em;margin-bottom:20px}
.hero h1 em{font-style:italic;color:#111}
.hero-sub{font-size:17px;color:#555550;line-height:1.7;margin-bottom:36px;max-width:480px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-btns .btn-ghost{border-color:var(--border);font-size:15px;padding:12px 24px}
.hero-btns .btn-primary{font-size:15px;padding:12px 28px}

/* hero right — progress track */
.hero-track{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 28px 24px;box-shadow:var(--shadow-lg)}
.ht-inner{display:flex;flex-direction:column;gap:0;position:relative}
.ht-inner::before{content:'';position:absolute;left:18px;top:20px;bottom:20px;width:1px;background:linear-gradient(to bottom,#CBEC45 0%,#CBEC45 55%,var(--border) 55%,var(--border) 100%);z-index:0}
.ht-step{display:flex;gap:16px;align-items:flex-start;padding:13px 0;position:relative;z-index:1}
.ht-dot{width:36px;height:36px;border-radius:50%;background:#CBEC45;border:2px solid #b5d93a;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-size:15px;font-weight:400;color:#111;flex-shrink:0}
.ht-dot.dim{background:#fff;border-color:var(--border);color:#AAAAAA}
.ht-body{padding-top:7px}
.ht-title{font-size:14px;font-weight:600;color:#111;margin-bottom:3px}
.ht-title.dim{color:#AAAAAA}
.ht-sub{font-size:12px;color:#666660;line-height:1.5}
.ht-badge{display:inline-flex;align-items:center;gap:4px;font-family:'DM Mono',monospace;font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;border-radius:var(--r-pill);padding:2px 8px;margin-top:6px}
.ht-badge.done{background:rgba(22,163,74,0.1);color:#16a34a}
.ht-badge.pending{background:#F0F0EA;color:#AAAAAA}

/* ── SECTION WRAPPER ── */
.section-inner{max-width:1400px;margin:0 auto;padding:0 64px}
.section-tag-dot{width:5px;height:5px;border-radius:50%;background:#CBEC45;display:inline-block}
.section-title{font-family:var(--f-head);font-size:40px;letter-spacing:-0.02em;line-height:1.15;margin-bottom:12px}
.section-sub{font-size:16px;color:#555550;line-height:1.7;max-width:560px}

/* ── SPLIT STEPS (brands) ── */
.steps-section{background:#fff}
.steps-grid{display:flex;flex-direction:column;gap:0;margin-top:64px}
.step-row{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:72px 0;border-bottom:1px solid var(--border)}
.step-row:last-child{border-bottom:none}
.step-row.reverse .step-visual{order:-1}
.step-num-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px}
.step-n{font-family:var(--f-head);font-size:13px;font-weight:400;color:#888880}
.step-n-line{width:32px;height:1px;background:#D8D8D2}
.step-title{font-family:var(--f-head);font-size:30px;letter-spacing:-0.02em;line-height:1.2;margin-bottom:14px}
.step-body{font-size:15px;color:#555550;line-height:1.7;margin-bottom:24px}
.step-checks{display:flex;flex-direction:column;gap:8px}
.step-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#444440}
.step-check-icon{width:18px;height:18px;border-radius:4px;background:#CBEC45;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.step-check-icon svg{width:10px;height:10px}

/* step visual card */
.step-visual{position:relative}
.step-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.sc-header{background:#F5F5F0;border-bottom:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;gap:8px}
.sc-dots{display:flex;gap:5px}
.sc-dot{width:8px;height:8px;border-radius:50%;background:#D8D8D2}
.sc-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#AAAAAA;margin-left:4px}
.sc-body{padding:16px}

/* posting form mock */
.form-field{margin-bottom:12px}
.form-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#AAAAAA;margin-bottom:4px;display:block}
.form-input{background:#F5F5F0;border:1px solid #E2E2DC;border-radius:6px;padding:9px 12px;font-size:13px;color:#111;width:100%}
.form-input.active{border-color:#CBEC45;background:#fff}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-btn{width:100%;padding:11px;background:#CBEC45;color:#111;font-size:13px;font-weight:700;border:none;border-radius:var(--r);cursor:pointer;margin-top:4px}

/* match mock */
.match-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.match-title-sm{font-size:12px;font-weight:600;color:#111}
.match-badge{font-size:10px;font-weight:600;background:#CBEC45;color:#111;padding:3px 8px;border-radius:var(--r-pill)}
.amb-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r);background:#F5F5F0;margin-bottom:8px;cursor:pointer;transition:background 120ms}
.amb-row:hover{background:#EEEEE8}
.amb-row:last-child{margin-bottom:0}
.amb-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
.amb-info{flex:1}
.amb-name-sm{font-size:13px;font-weight:600;color:#111;line-height:1.2}
.amb-meta-sm{font-size:11px;color:#888880}
.amb-score{text-align:right}
.amb-score-n{font-size:14px;font-weight:700;color:#111}
.amb-score-l{font-size:10px;color:#888880}
.amb-select-btn{font-size:11px;font-weight:600;padding:5px 10px;background:#CBEC45;border:none;border-radius:var(--r);cursor:pointer;margin-left:8px;flex-shrink:0}

/* live event mock */
.event-map{height:120px;background:linear-gradient(135deg,#e8f0e8 0%,#d4e8d4 100%);border-radius:var(--r);margin-bottom:12px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.map-pin{width:28px;height:28px;background:#CBEC45;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #111;box-shadow:0 2px 8px rgba(0,0,0,0.2)}
.map-pin-inner{width:10px;height:10px;background:#111;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.event-checkin{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#F0FAF5;border:1px solid #B8EDD4;border-radius:var(--r);margin-bottom:8px}
.event-checkin-dot{width:8px;height:8px;border-radius:50%;background:#18A664;flex-shrink:0;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.event-checkin-text{font-size:12px;font-weight:600;color:#18A664}
.event-photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.event-photo{height:60px;border-radius:6px;background:#E2E2DC;overflow:hidden}
.event-photo img{width:100%;height:100%;object-fit:cover}

/* report mock */
.report-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.report-stat{padding:12px 10px;text-align:center;background:#F5F5F0}
.report-stat+.report-stat{border-left:1px solid var(--border)}
.report-stat-n{font-size:20px;font-weight:700;color:#111;line-height:1}
.report-stat-l{font-size:10px;color:#888880;margin-top:3px}
.report-bar-row{margin-bottom:8px}
.report-bar-label{display:flex;justify-content:space-between;font-size:11px;color:#888880;margin-bottom:3px}
.report-bar-track{height:5px;background:#E2E2DC;border-radius:var(--r-pill);overflow:hidden}
.report-bar-fill{height:100%;background:#CBEC45;border-radius:var(--r-pill)}

/* ── AMBASSADOR STEPS ── */
.amb-steps-section{background:#F5F5F0}
.amb-steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.amb-step-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.amb-step-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:#E2E2DC}
.amb-step-card.highlighted::before{background:#CBEC45}
.amb-step-icon{width:44px;height:44px;border-radius:var(--r);background:#F5F5F0;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:20px}
.amb-step-num{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.09em;color:#AAAAAA;margin-bottom:6px}
.amb-step-title{font-family:var(--f-head);font-size:18px;margin-bottom:8px;color:#111}
.amb-step-body{font-size:13px;color:#666660;line-height:1.6}
.amb-step-card.highlighted .amb-step-icon{background:#CBEC45;border-color:#b5d93a}

/* connector arrow */
.amb-steps-wrapper{position:relative}
.step-connector{position:absolute;top:60px;left:calc(25% - 0px);width:calc(75% - 20px);height:1px;background:repeating-linear-gradient(90deg,#D8D8D2 0,#D8D8D2 6px,transparent 6px,transparent 12px);z-index:0;pointer-events:none}

/* ── PLATFORM FEATURES ── */
.features-section{background:#fff}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.feat-card{background:#F5F5F0;border:1px solid var(--border);border-radius:var(--r-lg);padding:28px}
.feat-icon{width:40px;height:40px;border-radius:var(--r);background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.feat-title{font-family:var(--f-head);font-size:18px;margin-bottom:8px;color:#111}
.feat-body{font-size:13px;color:#666660;line-height:1.6}

/* ── PRICING ── */
.pricing-section{background:#0d0d0d;padding:96px 0}
.pricing-inner{max-width:1400px;margin:0 auto;padding:0 64px}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:52px}
.pricing-left .section-title{color:#fff}
.pricing-left .section-sub{color:rgba(255,255,255,0.5)}
.pricing-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);border-radius:var(--r-lg);overflow:hidden}
.pricing-card-header{padding:22px 28px;border-bottom:1px solid rgba(255,255,255,0.08)}
.pricing-card-title{font-family:var(--f-head);font-size:17px;color:#fff;margin-bottom:4px}
.pricing-card-sub{font-size:12px;color:rgba(255,255,255,0.35)}
.pricing-includes{padding:8px 28px 16px;display:flex;flex-direction:column;gap:0}
.pricing-item{display:flex;align-items:center;gap:12px;font-size:13px;color:rgba(255,255,255,0.65);padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.pricing-item:last-child{border-bottom:none}
.pricing-check{width:18px;height:18px;border-radius:4px;background:#CBEC45;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pricing-check svg{width:10px;height:10px}
.pricing-note{padding:14px 28px;border-top:1px solid rgba(255,255,255,0.06);font-size:11px;color:rgba(255,255,255,0.25);line-height:1.6}
.rate-breakdown{margin-top:20px;display:flex;flex-direction:column;gap:0;border:1px solid rgba(255,255,255,0.08);border-radius:var(--r)}
.rate-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.06)}
.rate-row:last-child{border-bottom:none;background:rgba(203,236,69,0.06);border-radius:0 0 var(--r) var(--r)}
.rate-row-label{font-size:13px;color:rgba(255,255,255,0.45)}
.rate-row-value{font-family:var(--f-mono);font-size:13px;font-weight:500;color:#fff}
.rate-cta{margin-top:32px}
.btn-lime{display:inline-block;font-size:15px;font-weight:600;color:#111;background:#CBEC45;border:none;cursor:pointer;padding:14px 32px;border-radius:var(--r);transition:all 180ms var(--ease);text-decoration:none}
.btn-lime:hover{background:#d9f55a;transform:translateY(-2px);box-shadow:0 6px 20px rgba(203,236,69,0.4)}

/* ── TESTIMONIAL STRIP ── */
.testimonial-strip{background:#F5F5F0;padding:72px 0;border-top:1px solid var(--border)}
.tstrip-inner{max-width:1400px;margin:0 auto;padding:0 64px}
.tstrip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.tstrip-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow)}
.tstrip-stars{color:#F59E0B;font-size:14px;letter-spacing:2px;margin-bottom:12px}
.tstrip-quote{font-size:14px;color:#444440;line-height:1.7;font-style:italic;margin-bottom:16px;flex:1}
.tstrip-author{display:flex;align-items:center;gap:10px}
.tstrip-av{width:36px;height:36px;border-radius:50%;object-fit:cover}
.tstrip-name{font-size:13px;font-weight:600;color:#111}
.tstrip-role{font-size:11px;color:#888880}

/* ── FAQ ── */
.faq-section{background:#fff;padding:96px 0}
.faq-inner{max-width:1400px;margin:0 auto;padding:0 64px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:56px;align-items:start}
.faq-list{display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;background:none;border:none;padding:18px 0;font-size:15px;font-weight:600;color:#111;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--f-body);transition:color 120ms}
.faq-q:hover{color:#555550}
.faq-icon{width:20px;height:20px;border-radius:50%;background:#F5F5F0;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 200ms var(--ease)}
.faq-icon svg{transition:transform 200ms var(--ease)}
.faq-item.open .faq-icon{background:#CBEC45;border-color:#b5d93a}
.faq-item.open .faq-icon svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 300ms var(--ease)}
.faq-a-inner{padding:0 0 16px;font-size:14px;color:#666660;line-height:1.7}
.faq-item.open .faq-a{max-height:300px}

/* faq right CTA */
.faq-cta-card{background:#0d0d0d;border-radius:var(--r-lg);padding:36px;position:sticky;top:88px}
.faq-cta-title{font-family:var(--f-head);font-size:28px;color:#fff;line-height:1.2;margin-bottom:12px}
.faq-cta-sub{font-size:14px;color:rgba(255,255,255,0.5);line-height:1.7;margin-bottom:28px}
.faq-cta-btns{display:flex;flex-direction:column;gap:10px}
.btn-outline-white{font-size:14px;font-weight:600;color:#fff;background:none;border:1.5px solid rgba(255,255,255,0.2);cursor:pointer;padding:12px 20px;border-radius:var(--r);transition:all 180ms var(--ease);text-align:center;text-decoration:none;display:block}
.btn-outline-white:hover{border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.05)}
.faq-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.08)}
.faq-stat-n{font-family:var(--f-head);font-size:28px;color:#fff}
.faq-stat-l{font-size:12px;color:rgba(255,255,255,0.4);margin-top:2px}

/* ── FINAL CTA ── */
.final-cta{background:#0d0d0d;padding:120px 0;text-align:center;position:relative;overflow:hidden}
.final-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 100% at 50% 50%,rgba(203,236,69,0.1) 0%,transparent 70%);pointer-events:none}
.final-cta-inner{max-width:700px;margin:0 auto;padding:0 32px;position:relative}
.final-cta h2{font-family:var(--f-head);font-size:52px;color:#fff;line-height:1.1;letter-spacing:-0.02em;margin-bottom:16px}
.final-cta h2 em{font-style:italic;color:#CBEC45}
.final-cta p{font-size:17px;color:rgba(255,255,255,0.5);line-height:1.7;margin-bottom:40px}
.final-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-white{font-size:15px;font-weight:600;color:#111;background:#fff;border:none;cursor:pointer;padding:14px 28px;border-radius:var(--r);transition:all 180ms var(--ease);text-decoration:none;display:inline-block}
.btn-white:hover{background:#f0f0ee;transform:translateY(-2px)}

/* ── ANIMATIONS ── */
.fade-up{animation:fadeUp 500ms var(--ease) both}
.fade-up-1{animation:fadeUp 500ms 80ms var(--ease) both}
.fade-up-2{animation:fadeUp 500ms 160ms var(--ease) both}
.fade-up-3{animation:fadeUp 500ms 240ms var(--ease) both}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr;gap:40px;padding:120px 32px 60px}
  .step-row,.step-row.reverse .step-visual{grid-template-columns:1fr;order:unset}
  .step-row.reverse .step-visual{order:unset}
  .amb-steps-grid{grid-template-columns:1fr 1fr}
  .features-grid{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .faq-cta-card{position:static}
}
@media(max-width:768px){
  .hero{padding:100px 20px 48px}
  .hero h1{font-size:36px}
  .section-inner,.pricing-inner,.faq-inner,.tstrip-inner{padding:0 20px}
  .amb-steps-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .tstrip-grid{grid-template-columns:1fr}
  .final-cta h2{font-size:36px}
}