:root{
  --yellow:#f9d949;
  --black:#000;
  --radius:999px;
  --grey:#f8f8f8;
  font-family:sans-serif;
}

/* Reset & basics */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;color:#111;line-height:1.55;background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Buttons */
.btn{border:none;border-radius:var(--radius);padding:.75rem 1.75rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.btn-yellow{background:var(--yellow);color:#000}
.btn-black{background:var(--black);color:#fff}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #e5e5e5;padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center}
.site-header img{height:32px}
.site-header .nav-btn{font-size:.9rem}

/* Hero */
.hero{padding:4rem 1rem;text-align:center}
.hero h1{font-size:2.25rem;font-weight:700;max-width:720px}
.hero p{max-width:620px;font-size:1.125rem;color:#444}

/* Sections */
section{padding:3.5rem 1rem}
.section-narrow{max-width:1100px;margin:auto}

/* Pain table */
.pain-table{width:100%;border-collapse:collapse}
.pain-table th,.pain-table td{padding:.85rem;border:1px solid #ddd;text-align:left}
.pain-table tbody tr:nth-child(even){background:var(--grey)}

/* Feature cards */
.features{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}
.feature-card{flex:1 1 240px;padding:1.5rem;border:1px solid #e3e3e3;border-radius:1rem;text-align:center}
.feature-card h3{margin:.5rem 0}

/* Workflow */
.workflow{display:flex;align-items:flex-start;gap:1.5rem;overflow-x:auto}
.workflow-step{min-width:140px;text-align:center;padding:1rem;position:relative}
.workflow-step::after{content:'';position:absolute;right:-1.5rem;top:1.75rem;width:1.5rem;height:.2rem;background:#ccc}
.workflow-step:last-child::after{display:none}
.workflow-step span{display:flex;justify-content:center;align-items:center;width:44px;height:44px;border-radius:50%;background:var(--yellow);color:#000;font-weight:700;margin:0 auto .5rem}

/* Pricing */
.pricing{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}
.price-card{flex:1 1 260px;border:1px solid #e3e3e3;border-radius:1rem;padding:2rem;text-align:center}
.price-card h3{margin-top:0}
.price{font-size:2rem;font-weight:700;margin:.5rem 0}
.accuracy{color:#555;margin-bottom:1.25rem}

/* Testimonial */
.testimonial{max-width:800px;margin:auto;text-align:center;font-style:italic;padding:2rem 1rem}
.testimonial img{height:36px;margin-top:1rem}

/* Final CTA strip */
.final-cta{background:var(--yellow);text-align:center;padding:3rem 1rem}
.final-cta h2{margin:0 0 1rem}
.final-cta .btn{background:var(--black);color:#fff}

/* Footer */
.site-footer{background:#111;color:#ddd;font-size:.85rem;text-align:center;padding:2rem 1rem}
.site-footer a{color:#f9d949;text-decoration:none}


/* ROI Calculator Styles */
.step-indicator{display:flex;flex-direction:column;align-items:center;position:relative}
.step-indicator:not(:last-child)::after{content:'';position:absolute;top:20px;right:-50%;width:100%;height:2px;background-color:#ddd;z-index:1}
.step-indicator.active::after,.step-indicator.completed::after{background-color:var(--yellow)}
.step-number{display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:50%;background-color:#e9ecef;color:#6c757d;font-weight:bold;position:relative;z-index:2}
.step-indicator.active .step-number{background-color:var(--yellow);color:var(--black)}
.step-indicator.completed .step-number{background-color:#28a745;color:white}
.step-indicator small{margin-top:.5rem;text-align:center;font-size:.75rem}
#roiCalculatorModal .modal-dialog{max-width:800px}
#roiCalculatorModal .card{border:none;box-shadow:0 2px 4px rgba(0,0,0,.1)}

@media(max-width:768px){
  .step-indicator{flex:1}
  .step-indicator:not(:last-child)::after{right:-25%;width:50%}
  .step-indicator small{font-size:.65rem}
  .step-number{width:35px;height:35px;font-size:.9rem}
}

/* Modal overrides */
.modal-content{border-radius:1rem;padding:2rem 1.5rem}
.spinner{display:none}
/* ───── consistent modal height & drop zone styling ───── */
#tryitBody{min-height:550px; max-height:80%}                /* tweak as you like */

.drop-zone{
  border:2px dashed #ccc;
  border-radius:var(--radius);
  padding:2.5rem 1rem;
  text-align:center;
  cursor:pointer;
  transition:.2s border-color;
}
.drop-zone.drag{border-color:var(--yellow);background:#fffbec}
.drop-zone i{display:block;color:#555;margin-bottom:.5rem}

/* ===== Logo badge ===== */
.logo-wrap{
  display:flex;                /* vertically center logo */
  align-items:center;
  /* background:#111;              charcoal */
  height:100%;                 /* full header height */
  padding:0; 
}
.logo-wrap img{display:block;
  height:50px;                 /* or whatever your logo height is */
  width:auto;}

/* Responsive tweaks */
@media(max-width:640px){
  .hero h1{font-size:1.75rem}
  .workflow-step::after{display:none}
}
/* ───── New hero layout ───── */
.hero{padding:4rem 1rem}
.hero-inner{
  display:flex;
  align-items:center;
  gap:clamp(2rem,4vw,4rem);
}
.hero-text{flex:1 1 0}
.hero-text .subtitle{font-size:1.5rem;color:#444;margin-bottom:1.75rem}

/* 3:2 image that never distorts */
.hero-img{
  flex:1 1 0;
  max-width:480px;
  position:relative;            /* ratio wrapper */
  width:100%;
}
.hero-img::before{             /* keeps 66.666% (3:2) ratio */
  content:'';
  display:block;
  padding-top:66.666%;
}
.hero-img img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(100%) contrast(110%);
  transition:.3s filter;
}
.hero-img img:hover{filter:none}

/* Mobile stack */
@media (max-width: 768px){
  .hero-inner{flex-direction:column;text-align:center}
  .hero-img{order:-1;max-width:100%;margin-bottom:2rem}
  .hero-text .subtitle{font-size:1rem}
}
/* ---------- Hero typography & alignment tweaks ---------- */
.hero-text{
  text-align:left;              /* desktop left-aligned */
}

.hero-text h1{
  font-size:clamp(2.5rem,4vw + 1rem,3.5rem);  /* bigger on large screens */
  line-height:1.15;
}

/* keep mobile centred */
@media (max-width:768px){
  .hero-text{text-align:center}
  .hero-text h1{font-size:2rem}
}

/* ===== Pain-solution table ===== */
.pain-table{width:100%;border-collapse:collapse;font-size:15px;}
.pain-table th{font-weight:600;text-align:left;padding:16px 20px;border-bottom:2px solid #eee;}
.pain-table td{padding:16px 20px;line-height:1.45;}

.pain-table tbody tr{border-left:4px solid transparent;transition:box-shadow .2s ease;}
.pain-table tbody tr:hover{box-shadow:0 4px 12px rgba(0,0,0,.06);}
.pain-table tbody tr:nth-child(even){background:rgba(0,0,0,.02);}          /* Zebra striping */

/* Severity colour band */
.pain-table tbody tr.accuracy   {border-color:#d1320d;}  /* red  – accuracy   */
.pain-table tbody tr.speed      {border-color:#f9d949;}  /* yellow– speed     */
.pain-table tbody tr.cost       {border-color:#005786;}  /* blue  – cost      */
.pain-table tbody tr.format     {border-color:#9b59b6;}  /* purple– formats   */
.pain-table tbody tr.compliance {border-color:#27ae60;}  /* green – compliance*/

/* Icons in table headings (uses Material Symbols or any 16 px SVG) */
.icon-alert::before {content:"⚠︎ "; }
.icon-clock::before {content:"⏱ "; }
.icon-check::before {content:"✓ "; }

/* ===== Mobile collapse ===== */
@media (max-width:768px){
  .pain-table thead{display:none;}

  .pain-table,
  .pain-table tbody,
  .pain-table tr,
  .pain-table td{display:block;width:100%;}

  .pain-table tr{margin-bottom:24px;background:#fff;border:1px solid #eee;border-left-width:4px!important;}

  .pain-table td{padding:12px 16px;}

  /* Add header labels inside each cell */
  .pain-table td:nth-child(1)::before{content:'Your challenge';font-weight:600;margin-bottom:6px;color:#555;}
  .pain-table td:nth-child(2)::before{content:'How it hurts';font-weight:600;margin-bottom:6px;color:#555;}
  .pain-table td:nth-child(3)::before{content:'Our answer';font-weight:600;margin-bottom:6px;color:#555;}
}