/* ========= Tokens (light only) ========= */
:root{
  --brand-700:#155EEF; --brand-600:#1F6FFF; --brand-500:#2E7CF6;
  --ink:#000000; --muted:#667085;
  --bg:#ffffff;          /* was #F6F9FF */
  --line:#e6edf7; --card:#ffffff;
  --ring:0 0 0 6px rgba(29,78,216,.12);

  --radius:16px; --radius-lg:22px;
  --step-1:.5rem; --step-2:.75rem; --step-3:1rem; --step-4:1.25rem;
  --step-5:1.75rem; --step-6:2.5rem; --step-7:3.5rem; --step-8:4.5rem;
}

html,body{height:100%}

/* Fix any width overflow */
*, *::before, *::after { box-sizing: border-box; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 Avenir, "Avenir Next", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:.01em; overflow-x:hidden;
}

::selection{background:var(--brand-700); color:#fff}

.container{max-width:74rem;margin:0 auto;padding:0 var(--step-4)}
.container--wide{max-width:92rem}

h1,h2,h3{font-family:"Montserrat",system-ui,sans-serif; letter-spacing:-.015em}
h1{font-weight:700; line-height:1.05; margin:0}
h2{font-weight:600; line-height:1.15; margin:0 0 var(--step-3)}

.lead{color:#344054; max-width:72ch}
.stack > * + *{margin-top:var(--step-4)}

.meta{color:var(--muted); font-size:.95rem}

/* Buttons */
.btn{
  font-size: 0.95rem;  /* larger label */
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.1rem; border-radius:12px; border:1px solid var(--brand-700);
  background:var(--brand-700); color:#fff; font-weight:700; text-decoration:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(21,94,239,.28) }
.btn:focus-visible{ outline:none; box-shadow: var(--ring) }
.btn.secondary{ background:#fff; color:var(--brand-700); border-color:rgba(21,94,239,.24) }
.btn.secondary:hover{ background:#F2F7FF; border-color:rgba(21,94,239,.38) }

/* Chip */
.chip{
  display:inline-flex;align-items:center;gap:.5rem;padding:.38rem .7rem;
  border:1px solid rgba(21,94,239,.14);
  background:rgba(255,255,255,.8);border-radius:999px;color:#0e1320;
  box-shadow:0 8px 24px rgba(21,94,239,.08);font-size:.9rem
}
.dot{width:6px;height:6px;border-radius:999px;background:var(--brand-600);display:inline-block}

/* === Hero layout with separate pitch card === */
.hero-layout {
  display: grid;
  gap: var(--step-5);
}

.hero-main {
  max-width: 40rem;
  margin-inline: auto;   
}

/* Pitch card */
.pitch-card {
  background: rgba(255,255,255,0.96);
  border-radius: var(--radius-lg);
  border: none;                    /* ⬅ removed border */
  box-shadow: 0 4px 10px rgba(15,23,42,0.12);
  padding: var(--step-4);
  align-self: flex-start;
}

.pitch-label {
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 var(--step-2);
}

.pitch-line {
  margin: 0 0 var(--step-2);
  font-size: 0.96rem;
}

.pitch-quote {
  margin: 0 0 var(--step-2);
  font-size: 0.97rem;
  line-height: 1.6;
  border-left: 3px solid var(--brand-500);
  padding-left: var(--step-3);
}

.pitch-footnote {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Card */
.card{
  border:none;                     /* ⬅ removed border */
  border-radius:var(--radius-lg);
  background:var(--card);
  box-shadow:var(--shadow-md);
  padding:var(--step-5)
}
.lift{transition:transform .18s ease, box-shadow .18s ease}
.lift:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(14,19,32,.12)}

/* ===== Hero ===== */
.hero{
  position:relative; padding:var(--step-8) 0 var(--step-5); overflow:hidden
}
.hero video{
  position:absolute; inset:-10% -10% -10% -10%; width:120%; height:120%;
  object-fit:cover; filter:saturate(115%) brightness(1.06); opacity:.18; z-index:-1;
}
.hero-gradient{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1200px 600px at 10% -10%, rgba(21,94,239,.08), transparent 55%),
             radial-gradient(900px 500px at 110% 10%, rgba(21,94,239,.06), transparent 50%);
  z-index:-1;
}
.hero h1{font-size:clamp(2.25rem,5vw,3.6rem)}
.hero h2{font-size:clamp(1.1rem,2vw,1.6rem); max-width:40rem}
.hero .lead{font-size:clamp(1rem,1.3vw,1.1rem)}
.hero-meta{max-width:40rem}
.hero-cta{max-width:26rem}

/* ===== Sections ===== */
.section-offset{margin-top:var(--step-7)}
.section-offset-large{margin-top:var(--step-8)}
.section-bottom{margin-bottom:var(--step-7)}
.section-grid{margin-top:var(--step-4)}

/* ===== Stage with overlay ribbon ===== */
.stage{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 0 rgba(14,19,32,.04),0 22px 44px rgba(14,19,32,.12);
}

/* remove border line from the stage header */
.stage:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:40px;
  background:linear-gradient(#ffffff,#ffffff); /* or just transparent if you like */
  border-bottom:none;                           /* ⬅ removed border */
}
.stage:after{
  content:"";position:absolute;top:12px;left:16px;width:42px;height:10px;
  background:radial-gradient(circle 4px at 6px 5px,#ff5f56 99%,transparent 101%),
             radial-gradient(circle 4px at 22px 5px,#ffbd2e 99%,transparent 101%),
             radial-gradient(circle 4px at 38px 5px,#27c93f 99%,transparent 101%);
  opacity:.9
}
.stage img{
  display:block;width:100%;height:auto;
  object-fit:contain;object-position:center;transition:opacity .4s ease;margin-top:40px
}
.stage img.fade{opacity:0}

.ribbon{
  position:absolute; left:50%; transform:translateX(-50%); bottom:18px;
  width:min(92%,1080px);
  display:grid; gap:12px; grid-template-columns:1fr; z-index:2;
}
@media (min-width:900px){
  .ribbon{ grid-template-columns:repeat(3,1fr)}
}
.ribbon .tile{
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(6px) saturate(1.1);
  border:none;                                  /* ⬅ removed border */
  border-radius:14px;
  padding:.9rem 1rem;
  box-shadow:0 6px 18px rgba(14,19,32,.10);
}
.ribbon h4{
  margin:0;
  font:600 0.98rem/1.3 "Montserrat",system-ui,sans-serif
}
.ribbon p{
  margin:.25rem 0 0;
  font-size:.9rem; color:var(--muted)
}

/* ===== Grids ===== */
.grid{display:grid; gap:var(--step-4)}
@media (min-width: 900px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
}

/* ===== Steps ===== */
.step{
  display:flex; gap:var(--step-3); align-items:flex-start
}
.badge{
  flex:0 0 auto; width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; font-weight:700;
  color:#fff; background:linear-gradient(180deg,var(--brand-600),var(--brand-700));
  box-shadow:var(--shadow-sm)
}
.step h3{
  margin:.1rem 0 .25rem;
  font-family:"Montserrat",system-ui,sans-serif; font-weight:600
}

/* ===== Form / CTA ===== */
form.grid{
  display:grid; grid-template-columns:1fr; gap:var(--step-4); width:100%
}
label{
  display:block; font-size:.95rem; color:#2f2f32;
  margin-bottom:.25rem; font-weight:500; width:100%
}
input{
  width:100%; padding:1rem 1.1rem; min-height:52px; border-radius:12px;
  border:1px solid #d1d5db; background:#fff; font:inherit; color:var(--ink);
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease
}
input:hover{background:#fafdff}
input:focus{
  outline:none; border-color:var(--brand-500); box-shadow: var(--ring)
}

/* Success state */
.success-card{
  border:none;                                  /* ⬅ removed border */
  background:#ecfdf5;
  color:#065f46
}
.success-inner{
  display:flex;align-items:flex-start;gap:.75rem
}
.success-title{
  margin:.15rem 0 0;
  font-weight:700;
  font-family:Montserrat,sans-serif
}
.success-meta{
  margin:.25rem 0 0
}

/* ===== Footer ===== */
footer{padding: var(--step-6) 0 var(--step-6)}
footer .foot{
  display:flex; flex-direction:column; gap:var(--step-3)
}
@media (min-width:800px){
  footer .foot{
    flex-direction:row; align-items:center; justify-content:space-between
  }
}
.contact{
  display:flex; align-items:center; gap:.5rem;
  margin-top:var(--step-2)
}
.contact a{
  color:inherit; text-decoration: underline;
  text-decoration-color: rgba(21,94,239,.25); text-underline-offset:2px
}
.contact a:hover{
  text-decoration-color: rgba(21,94,239,.5)
}
.footer-phone{margin-top:var(--step-2)}

/* ===== Risk philosophy strip ===== */
.quote-strip {
  margin-top: var(--step-4);
  padding: var(--step-4) 0 var(--step-4);
  background: rgba(255,255,255,0.8);
  border-top: 1px solid rgba(148,163,184,0.3);
  border-bottom: 1px solid rgba(148,163,184,0.2);
}

.quote-strip-text {
  margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
}

.quote-strip-meta {
  margin: var(--step-2) auto 0;
  max-width: 42rem;
  text-align: center;
  font-size: 0.94rem;
  color: var(--muted);
}

/* === Mobile friendliness tweaks (merged) === */
@media (max-width: 899px) {
  .hero {
    padding: var(--step-6) 0 var(--step-4);
  }

  .hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-cta {
    grid-template-columns: 1fr;
  }

  .pitch-card {
    padding: var(--step-3);
    margin-top: var(--step-3);
  }

  .hero video {
    opacity: 0.06; /* keep it subtle behind text on small screens */
  }

  .section-offset {
    margin-top: var(--step-6);
  }

  .section-offset-large {
    margin-top: var(--step-7);
  }

  .section-bottom {
    margin-bottom: var(--step-6);
  }

  .quote-strip {
    padding: var(--step-3) 0 var(--step-3);
  }

  .quote-strip-text {
    font-size: 0.96rem;
  }
}

/* Slightly smaller base text on very small screens */
@media (max-width: 480px) {
  body {
    font-size: 15px;
  }

  .pitch-quote {
    font-size: 0.94rem;
  }
}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important
  }
}
/* CTA layout: email + button in one row */
.demo-form {
  max-width: 480px;
  margin-top: var(--step-2);
}

.field-label {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 6px;
}

.demo-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.demo-row input[type="email"] {
  flex: 1;
}

.demo-row .btn {
  white-space: nowrap;
}

.value-block > h2 {
  color: var(--accent, #0066ff);
}

/* Slim, hero-style pitch between the wide cards */
.mid-benefits-inner {
  max-width: 40rem;           /* same width as .hero-main */
  margin-inline: auto;
}

.mid-benefits h2 {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-weight: 700;
  text-transform: none;       /* keep this one sentence case */
  letter-spacing: 0;
  font-size: 1rem;
  margin: 0 0 var(--step-2, 0.75rem);
}

.mid-benefits ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  row-gap: 0.4rem;
  font-size: 0.95rem;
}

.mid-benefits li {
  line-height: 1.5;
}