/* ===== ForecourtIQ — Home page styles ===== */

/* hero */
.hero{
  position:relative;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(22,166,224,.22), transparent 55%),
    radial-gradient(900px 600px at 8% 12%, rgba(45,123,244,.20), transparent 55%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--ink-deep) 100%);
  color:#fff;
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(900px 600px at 30% 20%, #000, transparent 75%);
  mask-image: radial-gradient(900px 600px at 30% 20%, #000, transparent 75%);
}
.hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns: 1.02fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items:center; padding-block: clamp(48px, 7vw, 92px) clamp(64px, 8vw, 110px); }
.hero h1{ color:#fff; margin:.5rem 0 0; }
.hero h1 .accent{ color: var(--cyan-bright); }
.hero__sub{ color: var(--on-dark); font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height:1.6; margin-top:1.3rem; max-width: 33ch; }
.hero__sub b{ color:#fff; font-weight:600; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.2rem; }

/* Watch Video button — obvious play affordance */
.btn--watch{ background: rgba(255,255,255,.07); color:#fff; border:1px solid rgba(255,255,255,.22); padding-left:.7em; }
.btn--watch:hover{ background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }
.btn__play{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background: var(--cyan-bright); color:#04222e; flex:none; box-shadow:0 0 0 4px rgba(57,198,244,.18); transition: transform .2s ease, box-shadow .2s ease; }
.btn__play svg{ width:14px; height:14px; margin-left:1px; }
.btn--watch:hover .btn__play{ transform: scale(1.08); box-shadow:0 0 0 6px rgba(57,198,244,.22); }
.hero__trust{ display:flex; align-items:center; gap:18px; margin-top:1.8rem; flex-wrap:wrap; color: var(--on-dark-2); font-size:.92rem; }
.hero__trust span{ display:inline-flex; align-items:center; gap:.5em; }
.hero__trust .tick{ width:18px; height:18px; border-radius:50%; background: rgba(31,184,119,.16); color: var(--ok); display:grid; place-items:center; font-size:11px; }
.hero__trust .sep{ width:1px; height:16px; background: var(--line-dk); }

/* ===== CCTV detection demo ===== */
.feed-wrap{ position:relative; }
.feed{
  position:relative; border-radius: var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-lg), 0 0 0 6px rgba(255,255,255,.03);
  aspect-ratio: 16/10; background:#0a1622;
}
.feed__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(.82) brightness(.86) contrast(1.04); }
.feed__scrim{ position:absolute; inset:0; background:
  radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(4,12,22,.55) 100%),
  linear-gradient(180deg, rgba(4,12,22,.35), transparent 30%, transparent 70%, rgba(4,12,22,.55)); }
.feed__grain{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.6) .5px, transparent .5px); background-size:3px 3px; }

/* chrome */
.feed__top{ position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:14px 16px; font-family: var(--mono); font-size:.7rem; letter-spacing:.08em; color: rgba(255,255,255,.85); z-index:5; }
.feed__cam{ display:inline-flex; align-items:center; gap:8px; }
.feed__cam .live-dot{ width:8px; height:8px; border-radius:50%; background: var(--live); box-shadow:0 0 0 0 rgba(255,75,75,.6); animation: rec 1.6s infinite; }
@keyframes rec{ 0%{ box-shadow:0 0 0 0 rgba(255,75,75,.55);} 70%{ box-shadow:0 0 0 8px rgba(255,75,75,0);} 100%{ box-shadow:0 0 0 0 rgba(255,75,75,0);} }
.feed__rec{ display:inline-flex; align-items:center; gap:8px; }
.feed__time{ color:#fff; }
.feed__bottom{ position:absolute; left:16px; bottom:14px; font-family: var(--mono); font-size:.68rem; letter-spacing:.08em; color: rgba(255,255,255,.7); z-index:5; }

/* corner brackets */
.feed__brackets i{ position:absolute; width:22px; height:22px; border:2px solid rgba(255,255,255,.35); z-index:4; }
.feed__brackets i:nth-child(1){ top:46px; left:14px; border-right:0; border-bottom:0; }
.feed__brackets i:nth-child(2){ top:46px; right:14px; border-left:0; border-bottom:0; }
.feed__brackets i:nth-child(3){ bottom:36px; left:14px; border-right:0; border-top:0; }
.feed__brackets i:nth-child(4){ bottom:36px; right:14px; border-left:0; border-top:0; }

/* scan sweep */
.feed__scan{ position:absolute; left:0; right:0; height:140px; z-index:3; pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(57,198,244,.10) 60%, rgba(57,198,244,.35));
  border-bottom:1.5px solid rgba(57,198,244,.7);
  top:-160px; }
.feed.run .feed__scan{ animation: sweep 4.2s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes sweep{ 0%{ top:-160px; opacity:0;} 8%{opacity:1;} 46%{ top:100%; opacity:1;} 52%{opacity:0;} 100%{ top:100%; opacity:0;} }

/* detection box */
.det{ position:absolute; z-index:4; border:2px solid var(--cyan-bright); border-radius:4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 22px rgba(57,198,244,.35);
  opacity:0; transform: scale(1.12); transition: opacity .3s ease, transform .35s cubic-bezier(.2,1,.3,1); }
.det.show{ opacity:1; transform: scale(1); }
.det::before, .det::after{ content:""; position:absolute; width:11px; height:11px; border:2px solid #fff; }
.det::before{ top:-2px; left:-2px; border-right:0; border-bottom:0; }
.det::after{ bottom:-2px; right:-2px; border-left:0; border-top:0; }
.det__tag{ position:absolute; top:-26px; left:-2px; background: var(--cyan-bright); color:#04222e;
  font-family: var(--mono); font-size:.64rem; font-weight:600; letter-spacing:.06em; padding:3px 7px; border-radius:4px; white-space:nowrap; }
.det--ghost{ border-color: rgba(255,255,255,.45); box-shadow:none; }
.det--ghost::before,.det--ghost::after{ display:none; }
.det--ghost .det__tag{ background: rgba(255,255,255,.85); color: var(--ink); }

/* alert card (Teams style) */
.alert-card{ position:absolute; right:14px; bottom:46px; z-index:6; width: min(78%, 320px);
  background:#fff; color: var(--ink); border-radius:14px; padding:13px 14px;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.6);
  display:flex; gap:11px; align-items:flex-start;
  opacity:0; transform: translateY(14px) scale(.96); transition: opacity .4s ease, transform .45s cubic-bezier(.2,1,.3,1); }
.alert-card.show{ opacity:1; transform:none; }
.alert-card__icon{ flex:none; width:38px; height:38px; border-radius:9px; background: linear-gradient(135deg, var(--blue), var(--cyan)); display:grid; place-items:center; }
.alert-card__icon img{ width:22px; }
.alert-card__icon svg{ width:20px; height:20px; }
.alert-card__body{ min-width:0; }
.alert-card__head{ display:flex; align-items:center; gap:7px; font-size:.78rem; }
.alert-card__head b{ font-weight:600; }
.alert-card__head .when{ color: var(--muted-2); font-size:.72rem; margin-left:auto; }
.alert-card__msg{ font-size:.84rem; margin-top:3px; line-height:1.4; color:#22425f; }
.alert-card__msg b{ color: var(--ink); }
.alert-card__meta{ display:flex; align-items:center; gap:6px; margin-top:7px; font-size:.72rem; color: var(--ok); font-weight:600; }
.alert-card__meta .teams{ color: var(--muted-2); font-weight:500; }

/* mini pipeline under hero */
.pipe{ display:flex; align-items:center; gap:10px; margin-top:18px; }
.pipe__step{ flex:1; display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:12px; background: rgba(255,255,255,.05); border:1px solid var(--line-dk); transition: background .3s, border-color .3s; }
.pipe__step.active{ background: rgba(57,198,244,.12); border-color: rgba(57,198,244,.45); }
.pipe__num{ width:22px; height:22px; flex:none; border-radius:6px; background: rgba(255,255,255,.1); display:grid; place-items:center; font-family:var(--mono); font-size:.7rem; color: var(--cyan-bright); }
.pipe__step.active .pipe__num{ background: var(--cyan-bright); color:#04222e; }
.pipe__txt{ font-size:.82rem; font-weight:600; color: var(--on-dark); }
.pipe__step.active .pipe__txt{ color:#fff; }
.pipe__arrow{ color: var(--on-dark-2); flex:none; }

/* ===== stat band ===== */
.lossband{ background: var(--ink); color:#fff; }
.lossband__inner{ display:grid; grid-template-columns: 1.3fr 1fr; gap:48px; align-items:center; padding-block:62px; }
.lossband__big{ font-family: var(--display); font-weight:700; letter-spacing:-.03em; font-size: clamp(3.4rem, 8vw, 6rem); line-height:.92; color: var(--cyan-bright); }
.lossband__lead{ font-size:1.25rem; color: var(--on-dark); }
.lossband__lead b{ color:#fff; }
.lossband__head{ color:#fff; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing:-.03em; line-height:1.04; }

/* ===== ROI equation (editable) ===== */
.roi-hint{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:7px 13px; border-radius:999px; background: rgba(57,198,244,.12); border:1px solid rgba(57,198,244,.4); color:#fff; font-size:.84rem; }
.roi-hint svg{ width:14px; height:14px; color: var(--cyan-bright); flex:none; }
.roi-hint b{ color: var(--cyan-bright); font-weight:600; }
.roi-eq{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:9px; margin-top:14px; }
.roi-eq__item{ background: rgba(255,255,255,.05); border:1px solid var(--line-dk); border-radius:12px; padding:11px 13px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.roi-eq__item--accent{ background: linear-gradient(135deg, rgba(45,123,244,.22), rgba(22,166,224,.22)); border-color: rgba(57,198,244,.45); }
.roi-eq__n{ font-family: var(--display); font-weight:700; font-size:1.3rem; color: var(--cyan-bright); letter-spacing:-.02em; white-space:nowrap; line-height:1; }
.roi-eq__l{ font-size:.72rem; color: var(--on-dark-2); margin-top:5px; white-space:nowrap; }
.roi-eq__op{ display:flex; align-items:center; font-family: var(--display); font-size:1.2rem; color: var(--cyan-bright); font-weight:600; }

/* small uppercase field label with pencil */
.roi-eq__tag{ display:flex; align-items:center; gap:5px; font-family: var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color: var(--cyan-bright); font-weight:600; margin-bottom:6px; }
.roi-eq__tag svg{ width:11px; height:11px; flex:none; }
.roi-eq__tag--result{ color: rgba(255,255,255,.65); }

/* editable input fields — look unmistakably like form fields */
.roi-eq__field{ cursor:text; background: rgba(57,198,244,.09); border:2px solid rgba(57,198,244,.55); transition: border-color .2s, background .2s, box-shadow .2s; }
.roi-eq__field:hover{ border-color: var(--cyan-bright); background: rgba(57,198,244,.15); }
.roi-eq__field:focus-within{ border-color: var(--cyan-bright); background: rgba(57,198,244,.15); box-shadow:0 0 0 4px rgba(57,198,244,.18); }
.roi-eq__edit{ display:inline-flex; align-items:baseline; gap:1px; }
.roi-eq__prefix{ color:#fff; font-family: var(--display); font-weight:700; font-size:1.3rem; }
.roi-eq__edit input, input.roi-eq__edit{ background:none; border:0; outline:none; color:#fff; font-family: var(--display); font-weight:700; font-size:1.3rem; padding:0; width:4.5ch; caret-color: var(--cyan-bright); line-height:1; }
input.roi-eq__edit--plain{ width:2.5ch; }
.roi-eq__edit input::selection, input.roi-eq__edit::selection{ background: rgba(57,198,244,.4); }
.roi-eq__edit input::-webkit-outer-spin-button, .roi-eq__edit input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* continuous attention pulse so the fields always read as interactive */
@keyframes roiAttn{ 0%,100%{ box-shadow:0 0 0 0 rgba(57,198,244,0);} 50%{ box-shadow:0 0 0 6px rgba(57,198,244,.2);} }
.reveal.in .roi-eq__field{ animation: roiAttn 2.1s ease-in-out .35s infinite; }
.roi-eq__field:focus-within{ animation:none; }
@media (prefers-reduced-motion: reduce){ .reveal.in .roi-eq__field{ animation:none; } }

/* ===== problem cards ===== */
.prob-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; margin-top:54px; }
.prob{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding:28px 26px; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.prob:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.prob__ic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background: var(--paper-2); color: var(--blue); margin-bottom:18px; }
.prob__ic svg{ width:23px; height:23px; }
.prob h3{ font-size:1.12rem; margin-bottom:8px; }
.prob p{ color: var(--muted); font-size:.95rem; }

/* ===== how it works (dark feature section) ===== */
.how{ position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(22,166,224,.20), transparent 55%),
    radial-gradient(800px 600px at 5% 110%, rgba(45,123,244,.18), transparent 55%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--ink-deep) 100%); }
.how::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(800px 500px at 70% 30%, #000, transparent 78%);
  mask-image: radial-gradient(800px 500px at 70% 30%, #000, transparent 78%); }
.how .wrap{ position:relative; z-index:1; }
.how .sec-head h2{ color:#fff; }
.how .sec-head .lead{ color: var(--on-dark); }
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top:58px; counter-reset: s; }
.step{ position:relative; display:flex; flex-direction:column; padding:26px 24px 28px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.045); border:1px solid var(--line-dk);
  transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.step:hover{ transform: translateY(-4px); background: rgba(255,255,255,.07); border-color: rgba(57,198,244,.4); }
.step__top{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.step__num{ width:50px; height:50px; flex:none; border-radius:14px; background: rgba(255,255,255,.08); color:#fff; font-family: var(--display); font-weight:600; font-size:1.3rem; display:grid; place-items:center; border:1px solid var(--line-dk); }
.step:nth-child(3) .step__num{ background: linear-gradient(135deg, var(--blue), var(--cyan)); border-color: transparent; color:#fff; }
.step__line{ flex:1; height:2px; background: linear-gradient(90deg, rgba(255,255,255,.18), transparent); }
.step:last-child .step__line{ display:none; }
.step__ic{ color: var(--cyan-bright); margin-bottom:12px; }
.step__ic svg{ width:30px; height:30px; }
.step h3{ font-size:1.15rem; margin-bottom:9px; color:#fff; }
.step p{ color: var(--on-dark); font-size:.95rem; margin-bottom:16px; }
.step .chip{ display:inline-flex; align-self:flex-start; align-items:center; gap:7px; margin-top:auto; font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color: var(--cyan-bright); background: rgba(57,198,244,.14); padding:5px 10px; border-radius:999px; }

/* ===== benefits ===== */
.ben-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:54px; }
.ben{ padding:30px 28px; border-radius: var(--r-lg); border:1px solid var(--line); background:#fff; transition: transform .25s, box-shadow .25s, border-color .25s; }
.ben:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color:#cfe0f0; }
.ben__ic{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(45,123,244,.12), rgba(22,166,224,.12)); color: var(--blue); margin-bottom:18px; }
.ben__ic svg{ width:24px; height:24px; }
.ben h3{ font-size:1.18rem; margin-bottom:9px; }
.ben p{ color: var(--muted); font-size:.96rem; }

/* ===== video ===== */
.video{ background: var(--ink-deep); color:#fff; }
.video__frame{ position:relative; margin-top:46px; border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line-dk); box-shadow: var(--shadow-lg); aspect-ratio:16/9; background:#000; max-width:940px; margin-inline:auto; }
.video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video__frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; display:block; }
.video__play{ position:absolute; inset:0; margin:auto; width:92px; height:92px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); background: rgba(45,123,244,.28); backdrop-filter: blur(6px);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow: 0 10px 40px -6px rgba(45,123,244,.6); transition: transform .2s ease, background .2s ease, opacity .3s ease; z-index:3; }
.video__play svg{ width:34px; height:34px; margin-left:5px; }
.video__play:hover{ transform: scale(1.06); background: rgba(45,123,244,.42); }
.video__play .video__play-ring{ position:absolute; inset:-1px; border-radius:50%; border:2px solid rgba(57,198,244,.55); animation: vpulse 2.6s ease-out infinite; }
@keyframes vpulse{ 0%{ transform:scale(1); opacity:.7;} 70%{ transform:scale(1.45); opacity:0;} 100%{ opacity:0;} }
.video__frame.playing .video__play{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .video__play .video__play-ring{ animation:none; } }

/* ===== big metrics + final cta ===== */
.metrics{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin:56px 0; }
.metric{ text-align:center; padding:34px 20px; border-radius: var(--r-lg); background: rgba(255,255,255,.05); border:1px solid var(--line-dk); }
.metric__n{ font-family: var(--display); font-weight:700; font-size: clamp(2.6rem,5vw,3.6rem); letter-spacing:-.03em; color: var(--cyan-bright); line-height:1; }
.metric__l{ color: var(--on-dark); font-size:.98rem; margin-top:10px; }

.cta{ position:relative; overflow:hidden;
  background:
    radial-gradient(800px 500px at 80% 0%, rgba(22,166,224,.25), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(45,123,244,.22), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--ink-deep));
  color:#fff; }
.cta__inner{ text-align:center; padding-block: clamp(64px,9vw,120px); position:relative; z-index:2; }
.cta h2{ color:#fff; max-width:18ch; margin-inline:auto; }
.cta__sub{ color: var(--on-dark); font-size:1.15rem; margin-top:18px; }
.cta__btns{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.cta__fine{ margin-top:22px; font-size:.86rem; color: var(--on-dark-2); }

/* section heading helper */
.sec-head{ max-width: 720px; }
.sec-head.center{ margin-inline:auto; }
.sec-head h2{ margin-top:14px; }
.sec-head p{ margin-top:16px; }

/* responsive */
@media (min-width: 1500px){
  /* generous breathing room on large desktops/monitors */
  .hero__inner{ padding-block: clamp(64px,6vw,110px) clamp(80px,7vw,130px); }
}
@media (max-width: 1200px){
  /* laptop / iPad-landscape: keep the 2-col hero but tighten the gap */
  .hero__inner{ gap: clamp(28px, 4vw, 48px); }
  .section{ padding-block: clamp(60px, 8vw, 104px); }
}
@media (max-width: 1000px){
  .hero__inner{ grid-template-columns:1fr; gap:40px; }
  /* cap + centre the CCTV demo once it stacks below the copy */
  .feed-wrap{ max-width:640px; width:100%; margin-inline:auto; }
  .lossband__inner{ grid-template-columns:1fr; gap:24px; padding-block:48px; }
  .prob-grid{ grid-template-columns: repeat(2,1fr); }
  .steps{ grid-template-columns: repeat(2,1fr); gap:36px 28px; }
  .step__line{ display:none; }            /* connector reads wrong on a 2-col grid */
  .ben-grid{ grid-template-columns: repeat(2,1fr); }
  .metrics{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 600px){
  .prob-grid, .steps, .ben-grid, .metrics{ grid-template-columns: 1fr; }
  .prob-grid, .ben-grid{ gap:16px; margin-top:36px; }
  .steps{ gap:16px; margin-top:36px; }
  .pipe{ flex-wrap:wrap; gap:8px; }
  .pipe__arrow{ display:none; }
  .pipe__step{ flex:1 1 calc(50% - 8px); }
  .alert-card{ width: min(86%, 300px); }
  .hero__sub{ max-width:none; }

  /* hero: tighten + full-width CTAs */
  .hero__inner{ padding-block: 36px 56px; gap:32px; }
  .hero__cta{ flex-direction:column; align-items:stretch; gap:12px; margin-top:1.8rem; }
  .hero__cta .btn{ width:100%; }
  .hero__trust{ gap:12px 14px; font-size:.88rem; }
  .hero__trust .sep{ display:none; }

  /* detection demo: keep tags legible */
  .det__tag{ font-size:.58rem; padding:2px 6px; }
  .alert-card{ right:10px; bottom:34px; width: min(64%, 210px); padding:9px 10px; gap:8px; border-radius:11px; }
  .alert-card__icon{ width:30px; height:30px; border-radius:8px; }
  .alert-card__icon svg{ width:16px; height:16px; }
  .alert-card__head{ font-size:.68rem; gap:5px; }
  .alert-card__head .when{ font-size:.62rem; }
  .alert-card__msg{ font-size:.7rem; margin-top:2px; }
  .alert-card__meta{ font-size:.62rem; margin-top:5px; }
  .alert-card__meta .teams{ display:none; }

  /* section heading + spacing */
  .sec-head p{ margin-top:12px; }
  .lossband__inner{ padding-block:40px; }
  .roi-eq{ flex-direction:column; align-items:stretch; gap:10px; margin-top:24px; }
  .roi-eq__op{ justify-content:center; font-size:1.3rem; }

  /* benefits / problem inner padding */
  .prob, .ben{ padding:24px 22px; }
  .step{ padding:24px 22px 26px; }

  /* final CTA */
  .metrics{ gap:14px; margin:40px 0; }
  .metric{ padding:26px 18px; }
  .cta__sub{ font-size:1.05rem; }
  .cta__btns{ flex-direction:column; align-items:stretch; }
  .cta__btns .btn{ width:100%; }
}
@media (max-width: 380px){
  .det__tag{ font-size:.52rem; }
}