*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:    #1E40AF;
  --blue-lt: #3B82F6;
  --green:   #059669;
  --amber:   #D97706;
  --red:     #DC2626;
  --gray-50: #F8FAFC;
  --gray-100:#F1F5F9;
  --gray-200:#E2E8F0;
  --gray-500:#64748B;
  --gray-700:#334155;
  --gray-900:#0F172A;
  --white:   #FFFFFF;
  --radius:  10px;
  --shadow:  0 2px 16px rgba(0,0,0,0.08);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--gray-50);
  color: var(--gray-900);
  line-height: 1.6;
  font-size: 15px;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* NAV */
nav {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  position: sticky; top: 0; z-index: 100;
}
.nav-logo { font-weight: 800; font-size: 18px; color: var(--blue); letter-spacing: -0.5px; }
.nav-logo span { color: var(--green); }
.nav-links { display: flex; gap: 24px; font-size: 14px; color: var(--gray-700); }
.nav-links a { color: var(--gray-700); }

/* HERO */
.hero {
  background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 60%, #2563EB 100%);
  color: white;
  text-align: center;
  padding: 64px 24px 80px;
}
.hero h1 { font-size: clamp(26px, 5vw, 42px); font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
.hero h1 span { color: #34D399; }
.hero p { font-size: 17px; opacity: 0.88; max-width: 560px; margin: 0 auto 12px; }
.hero-stats { display: flex; justify-content: center; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.hero-stat { font-size: 13px; opacity: 0.75; }
.hero-stat strong { display: block; font-size: 22px; font-weight: 800; opacity: 1; color: #A7F3D0; }

/* MAIN LAYOUT */
.main-wrap { max-width: 900px; margin: -32px auto 0; padding: 0 16px 60px; }

/* CALCULATOR CARD */
.calc-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  margin-bottom: 24px;
}
.calc-card h2 { font-size: 20px; font-weight: 700; margin-bottom: 24px; color: var(--gray-900); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width:600px){ .form-grid { grid-template-columns: 1fr; } }

.form-group label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--gray-700); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.4px;
}
.form-group select, .form-group input[type="number"] {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--gray-200);
  border-radius: 8px; font-size: 15px; background: var(--gray-50);
  color: var(--gray-900); outline: none; transition: border 0.15s;
}
.form-group select:focus, .form-group input:focus { border-color: var(--blue-lt); background: white; }

.toggle-group { display: flex; gap: 0; border: 1.5px solid var(--gray-200); border-radius: 8px; overflow: hidden; }
.toggle-btn {
  flex: 1; padding: 10px; border: none; background: var(--gray-50);
  cursor: pointer; font-size: 14px; font-weight: 500; color: var(--gray-700);
  transition: all 0.15s;
}
.toggle-btn.active { background: var(--blue); color: white; font-weight: 600; }

.calc-btn {
  width: 100%; margin-top: 24px; padding: 14px;
  background: var(--blue); color: white; border: none; border-radius: 8px;
  font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.15s;
}
.calc-btn:hover { background: #1d3a9e; }

/* RESULTS */
#results { display: none; }
#results.show { display: block; }

.result-header {
  background: linear-gradient(135deg, #064E3B, #065F46);
  color: white; border-radius: var(--radius); padding: 28px 32px; margin-bottom: 20px;
}
.result-header h3 { font-size: 14px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.rate-big { font-size: clamp(28px, 6vw, 44px); font-weight: 800; }
.rate-sub { font-size: 15px; opacity: 0.75; margin-top: 4px; }
.rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
@media(max-width:500px){ .rate-grid { grid-template-columns: 1fr; } }
.rate-box { background: rgba(255,255,255,0.1); border-radius: 8px; padding: 16px; }
.rate-box-label { font-size: 12px; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.4px; }
.rate-box-val { font-size: 22px; font-weight: 700; margin-top: 4px; }

.result-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media(max-width:600px){ .result-cards { grid-template-columns: 1fr; } }

.rcard {
  background: white; border-radius: var(--radius); padding: 20px;
  border: 1px solid var(--gray-200); box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.rcard-label { font-size: 12px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.rcard-val { font-size: 20px; font-weight: 700; color: var(--gray-900); }
.rcard-sub { font-size: 13px; color: var(--gray-500); margin-top: 4px; }

.warn-box {
  background: #FEF3C7; border: 1px solid #FCD34D; border-radius: 8px;
  padding: 14px 18px; font-size: 14px; color: #92400E; margin-bottom: 16px;
}
.warn-box strong { display: block; font-weight: 700; margin-bottom: 3px; }

/* PLATFORM TABLE */
.platform-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.platform-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gray-500); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--gray-200); }
.platform-table td { padding: 12px; font-size: 14px; border-bottom: 1px solid var(--gray-100); }
.platform-table tr:last-child td { border-bottom: none; }
.platform-best { background: #ECFDF5; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.badge-green { background: #D1FAE5; color: #065F46; }
.badge-blue  { background: #DBEAFE; color: #1E40AF; }

/* RATE CARD */
.ratecard-section { background: white; border-radius: var(--radius); padding: 24px 32px; border: 1px solid var(--gray-200); margin-bottom: 20px; }
.ratecard-section h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.ratecard-section p { font-size: 13px; color: var(--gray-500); margin-bottom: 18px; }
.ratecard-name-row { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-end; }
.ratecard-name-row input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--gray-200); border-radius: 8px; font-size: 15px; }
.generate-btn {
  padding: 10px 22px; background: var(--gray-900); color: white; border: none;
  border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.generate-btn:hover { background: #1E3A5F; }

/* THE ACTUAL RATE CARD (rendered by html2canvas) */
#rateCardCanvas {
  width: 600px; max-width: 100%;
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
  border-radius: 16px; padding: 40px 44px; color: white; margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.rc-brand { font-size: 12px; font-weight: 700; letter-spacing: 2px; opacity: 0.5; text-transform: uppercase; margin-bottom: 28px; }
.rc-label { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; opacity: 0.55; text-transform: uppercase; margin-bottom: 6px; }
.rc-name { font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.rc-skill { font-size: 16px; opacity: 0.7; margin-bottom: 32px; }
.rc-divider { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 24px 0; }
.rc-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.rc-rate-label { font-size: 11px; letter-spacing: 1px; opacity: 0.55; text-transform: uppercase; margin-bottom: 4px; }
.rc-rate-val { font-size: 28px; font-weight: 800; color: #34D399; }
.rc-rate-unit { font-size: 14px; opacity: 0.6; margin-top: 2px; }
.rc-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.rc-footer-site { font-size: 13px; opacity: 0.5; letter-spacing: 0.5px; }
.rc-footer-badge { font-size: 11px; background: rgba(52,211,153,0.15); color: #34D399; padding: 4px 12px; border-radius: 99px; font-weight: 600; border: 1px solid rgba(52,211,153,0.3); }

.download-btn {
  display: block; width: 100%; margin-top: 16px; padding: 12px;
  background: var(--green); color: white; border: none; border-radius: 8px;
  font-size: 15px; font-weight: 700; cursor: pointer; text-align: center;
}
.download-btn:hover { background: #047857; }

/* EMAIL CAPTURE */
.email-box {
  background: linear-gradient(135deg, #1E3A8A, #1E40AF);
  color: white; border-radius: var(--radius); padding: 28px 32px; margin-top: 20px;
}
.email-box h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.email-box p { font-size: 14px; opacity: 0.8; margin-bottom: 18px; }
.email-row { display: flex; gap: 10px; }
.email-row input {
  flex: 1; padding: 11px 16px; border: none; border-radius: 8px;
  font-size: 15px; outline: none;
}
.email-row button {
  padding: 11px 22px; background: #34D399; color: #0F172A; border: none;
  border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 14px;
}
.email-success { font-size: 14px; color: #34D399; margin-top: 10px; display: none; }

/* DISCLAIMER */
.disclaimer {
  font-size: 12px; color: var(--gray-500); border-top: 1px solid var(--gray-200);
  padding-top: 16px; margin-top: 8px; line-height: 1.5;
}

/* CONTENT SECTIONS */
.section-title { font-size: 22px; font-weight: 700; margin-bottom: 16px; color: var(--gray-900); }
.content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 32px; }
.content-link-card {
  background: white; border: 1px solid var(--gray-200); border-radius: 8px;
  padding: 16px; font-size: 14px; font-weight: 500; color: var(--blue);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.content-link-card:hover { border-color: var(--blue-lt); box-shadow: 0 2px 10px rgba(59,130,246,0.1); text-decoration: none; }

/* FOOTER */
footer {
  background: var(--gray-900); color: var(--gray-500); text-align: center;
  padding: 32px 24px; font-size: 13px; margin-top: 40px;
}
footer a { color: var(--gray-500); }
footer .footer-links { display: flex; justify-content: center; gap: 24px; margin-top: 12px; flex-wrap: wrap; }

/* MOBILE OVERRIDES */
@media(max-width: 600px) {
  /* Nav */
  .nav-links { display: none; }
  nav { padding: 0 16px; }

  /* Cards */
  .calc-card { padding: 20px 16px; }
  .ratecard-section { padding: 20px 16px; }

  /* Rate card name row — stack vertically */
  .ratecard-name-row { flex-direction: column; align-items: stretch; }
  .ratecard-name-row input { width: 100%; }
  .generate-btn { width: 100%; text-align: center; }

  /* Email capture — stack vertically */
  .email-row { flex-direction: column; }
  .email-row input { width: 100%; }
  .email-row button { width: 100%; padding: 12px; }
  .email-box { padding: 20px 16px; }

  /* Platform table — horizontal scroll */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .platform-table { min-width: 380px; }

  /* Rate card canvas inner grid */
  .rc-rates { grid-template-columns: 1fr; gap: 16px; }
  #rateCardCanvas { padding: 28px 24px; }
  .rc-name { font-size: 20px; }
  .rc-rate-val { font-size: 22px; }

  /* Result header */
  .result-header { padding: 20px 16px; }

  /* Hero stats */
  .hero-stats { gap: 16px; }

  /* Main wrap padding */
  .main-wrap { padding: 0 12px 48px; }
}

/* AFFILIATE STRIP */
.aff-strip {
  background: white; border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 20px;
}
.aff-strip h4 { font-size: 13px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; }
.aff-links { display: flex; flex-wrap: wrap; gap: 10px; }
.aff-link {
  padding: 8px 16px; background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--gray-700);
  transition: all 0.15s;
}
.aff-link:hover { background: var(--blue); color: white; border-color: var(--blue); text-decoration: none; }