/* Thunder Pay — shared site styles
   Design tokens, navigation, page sections, components, responsive layouts. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  --navy:#07152e;
  --blue:#004aad;
  --bright:#115feb;
  --yellow:#ffda22;
  --muted:#69778a;
  --line:#e3e9f2;
  --paper:#f6f8fc;
  --white:#fff
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  color:var(--navy);
  font:15px/1.65 'DM Sans',sans-serif;
  background:#fff
}
h1,h2,h3,h4 {
  font-family:'Space Grotesk',sans-serif;
  line-height:1.13;
  letter-spacing:-.045em;
  margin:0
}
h1 {
  font-size:clamp(48px,6.8vw,94px)
}
h2 {
  font-size:clamp(34px,4.5vw,59px)
}
h3 {
  font-size:22px
}
p {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
img {
  max-width:100%
}
.container {
  width:min(1200px,calc(100% - 44px));
  margin:auto
}
.topline {
  height:5px;
  background:linear-gradient(90deg,var(--blue) 72%,var(--yellow) 72%)
}
.nav {
  height:88px;
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)
}
.nav-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.brand {
  display:inline-flex;
  align-items:center;
  line-height:0
}
.brand img {
  width:164px;
  height:56px;
  object-fit:contain;
  object-position:left center
}
.nav-links {
  display:flex;
  align-items:center;
  gap:31px;
  color:#45546b;
  font-weight:700;
  font-size:13px
}
.nav-links a:hover,.nav-links a[aria-current=page] {
  color:var(--blue)
}
.nav-actions {
  display:flex;
  gap:12px;
  align-items:center
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid transparent;
  border-radius:11px;
  padding:14px 21px;
  font-weight:800;
  font-size:13px;
  min-height:48px;
  transition:transform .2s,background .2s,box-shadow .2s
}
.btn:hover {
  transform:translateY(-2px)
}
.btn-primary {
  background:var(--blue);
  color:white;
  box-shadow:0 12px 22px #004aad21
}
.btn-primary:hover {
  background:#003b91
}
.btn-yellow {
  background:var(--yellow);
  color:var(--navy)
}
.btn-outline {
  border-color:#cdd7e4;
  color:var(--navy);
  background:#fff
}
.menu-button {
  display:none;
  border:1px solid var(--line);
  background:#fff;
  padding:10px 13px;
  border-radius:10px
}
.eyebrow {
  font-size:11px;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--blue);
  display:inline-flex;
  gap:9px;
  align-items:center
}
.eyebrow:before {
  content:'';
  width:20px;
  height:3px;
  background:var(--yellow)
}
.hero {
  background:radial-gradient(circle at 80% 25%,#e9efff 0,transparent 39%),linear-gradient(130deg,#f9fbff 0%,#f4f7fd 100%);
  overflow:hidden
}
.hero-grid {
  display:grid;
  grid-template-columns:1.06fr .94fr;
  align-items:center;
  gap:50px;
  min-height:665px;
  padding:66px 0 95px
}
.hero h1 {
  margin:23px 0 24px
}
.hero h1 em {
  font-style:normal;
  color:var(--blue)
}
.hero-lead {
  font-size:17px;
  color:#5b6b80;
  max-width:520px;
  line-height:1.85
}
.hero-ctas {
  display:flex;
  gap:12px;
  margin-top:31px;
  flex-wrap:wrap
}
.micro {
  display:flex;
  gap:20px;
  margin-top:37px;
  color:#617087;
  font-size:12px;
  font-weight:700;
  flex-wrap:wrap
}
.micro span:before {
  content:'✓';
  color:var(--blue);
  margin-right:7px
}
.device-stage {
  height:535px;
  position:relative;
  display:grid;
  place-items:center
}
.orbit {
  position:absolute;
  inset:45px 4px 60px;
  border-radius:50%;
  border:1px solid #d6e3fc
}
.orbit:after {
  content:'';
  position:absolute;
  inset:35px;
  border:1px dashed #ccdaf1;
  border-radius:50%
}
.phone {
  width:266px;
  height:515px;
  background:#0c1531;
  border:8px solid #141b31;
  border-radius:39px;
  box-shadow:25px 32px 65px #072a6350;
  position:relative;
  transform:rotate(-8deg);
  padding:16px 13px;
  color:#fff;
  z-index:2
}
.phone:before {
  content:'';
  width:74px;
  height:19px;
  background:#141b31;
  position:absolute;
  top:-3px;
  left:calc(50% - 37px);
  border-radius:0 0 12px 12px
}
.phone-screen {
  background:linear-gradient(160deg,#0d377f,#081733 55%,#06132d);
  height:100%;
  border-radius:26px;
  padding:28px 16px;
  overflow:hidden
}
.phone-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  opacity:.9
}
.phone-logo {
  font-weight:800;
  color:#fff;
  letter-spacing:-.04em
}
.phone-bal {
  margin-top:54px;
  color:#c8d7f6;
  font-size:11px
}
.phone-amount {
  font:700 31px 'Space Grotesk';
  margin:5px 0 20px
}
.phone-actions {
  display:flex;
  gap:8px
}
.phone-actions span {
  background:#ffffff1a;
  border:1px solid #ffffff21;
  border-radius:11px;
  font-size:10px;
  padding:11px 8px;
  flex:1;
  text-align:center
}
.phone-label {
  font-size:11px;
  color:#abbfe9;
  margin-top:38px;
  margin-bottom:12px
}
.transaction {
  background:#ffffff13;
  border:1px solid #ffffff16;
  border-radius:11px;
  padding:12px;
  margin-bottom:8px;
  font-size:10px;
  display:flex;
  justify-content:space-between
}
.float-card {
  position:absolute;
  z-index:3;
  background:#fff;
  border:1px solid #e5ebf7;
  border-radius:16px;
  box-shadow:0 16px 55px #062a6423;
  padding:14px 19px;
  font-size:12px
}
.float-card b {
  display:block;
  font-size:17px;
  color:var(--navy)
}
.float-card small {
  color:var(--muted)
}
.float-one {
  top:98px;
  left:2px
}
.float-two {
  bottom:95px;
  right:0
}
.float-icon {
  display:inline-grid;
  place-items:center;
  background:var(--yellow);
  width:34px;
  height:34px;
  border-radius:9px;
  margin-bottom:6px
}
.section {
  padding:105px 0
}
.section-muted {
  background:var(--paper)
}
.section-head {
  max-width:710px;
  margin-bottom:45px
}
.section-head h2 {
  margin:16px 0
}
.section-head p,.desc {
  color:var(--muted);
  font-size:16px;
  line-height:1.8
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px
}
.feature {
  border:1px solid var(--line);
  padding:32px;
  border-radius:18px;
  background:#fff;
  transition:transform .2s,box-shadow .2s
}
.feature:hover {
  transform:translateY(-5px);
  box-shadow:0 20px 45px #0922530c
}
.feature-icon {
  width:52px;
  height:52px;
  border-radius:14px;
  background:#eaf1ff;
  color:var(--blue);
  display:grid;
  place-items:center;
  font-size:23px;
  font-weight:800;
  margin-bottom:25px
}
.feature h3 {
  margin-bottom:12px
}
.feature p {
  color:var(--muted);
  font-size:14px;
  line-height:1.8
}
.tag {
  font-size:10px;
  color:var(--blue);
  background:#eaf1ff;
  border-radius:30px;
  padding:5px 9px;
  font-weight:800;
  margin-left:8px;
  vertical-align:middle;
  letter-spacing:0
}
.dark-section {
  background:#07152e;
  color:#fff;
  position:relative;
  overflow:hidden
}
.dark-section:after {
  content:'';
  width:500px;
  height:500px;
  border-radius:50%;
  background:#0c55cd44;
  filter:blur(80px);
  position:absolute;
  right:-160px;
  top:-200px;
  pointer-events:none
}
.dark-section .eyebrow {
  color:var(--yellow)
}
.dark-section .desc {
  color:#9baac4
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}
.currency-panel {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px
}
.currency {
  border:1px solid #ffffff20;
  background:#ffffff0c;
  padding:22px 12px;
  border-radius:15px;
  font-weight:800;
  text-align:center
}
.currency small {
  font-size:11px;
  font-weight:500;
  display:block;
  color:#aab8d0;
  margin-top:4px
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.step {
  padding:32px;
  border:1px solid var(--line);
  border-radius:18px;
  background:white
}
.step-num {
  font:700 13px 'Space Grotesk';
  color:var(--blue);
  display:block;
  margin-bottom:45px
}
.step h3 {
  margin-bottom:13px
}
.step p {
  color:var(--muted);
  font-size:14px
}
.banner {
  border-radius:24px;
  background:var(--blue);
  color:white;
  padding:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  position:relative;
  overflow:hidden
}
.banner:after {
  content:'ϟ';
  position:absolute;
  font-size:330px;
  right:18%;
  top:-100px;
  color:#ffffff0b;
  transform:rotate(15deg);
  pointer-events:none
}
.banner h2 {
  font-size:clamp(32px,4vw,51px);
  max-width:680px;
  margin-top:14px
}
.banner p {
  color:#d4e2ff;
  margin-top:15px;
  max-width:640px
}
.banner>* {
  position:relative;
  z-index:1
}
.faq-list {
  max-width:860px;
  margin:auto
}
.faq-item {
  border-bottom:1px solid var(--line)
}
.faq-item button {
  width:100%;
  background:none;
  border:0;
  padding:22px 0;
  text-align:left;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--navy);
  font-weight:800;
  font-size:16px
}
.faq-item button span {
  font-size:24px;
  color:var(--blue)
}
.faq-answer {
  display:none;
  color:var(--muted);
  padding:0 35px 22px 0;
  line-height:1.8
}
.faq-item.open .faq-answer {
  display:block
}
.footer {
  background:#08162f;
  color:white;
  padding:65px 0 24px
}
.footer-grid {
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:45px
}
.footer .brand img {
  filter:brightness(0) invert(1)
}
.footer p {
  color:#a5b3ca;
  margin-top:18px;
  max-width:340px
}
.footer h4 {
  font-size:13px;
  margin-bottom:18px;
  letter-spacing:0
}
.footer a:not(.brand) {
  display:block;
  color:#abb9ce;
  font-size:13px;
  margin:12px 0
}
.footer a:hover {
  color:white
}
.footer-bottom {
  border-top:1px solid #ffffff1b;
  margin-top:60px;
  padding-top:23px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  color:#91a2bd;
  font-size:12px
}
.page-hero {
  padding:90px 0 68px;
  background:linear-gradient(125deg,#f5f8ff,#edf3ff)
}
.page-hero h1 {
  font-size:clamp(43px,5vw,70px);
  max-width:880px;
  margin:18px 0
}
.page-hero p {
  color:var(--muted);
  max-width:690px;
  font-size:17px
}
.contact-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:19px
}
.contact-card {
  background:white;
  padding:35px;
  border:1px solid var(--line);
  border-radius:20px
}
.contact-card h3 {
  margin:17px 0 9px
}
.contact-card p {
  color:var(--muted);
  margin-bottom:13px
}
.contact-card a {
  color:var(--blue);
  font-weight:800;
  overflow-wrap:anywhere
}
.blog-toolbar {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:28px
}
.search {
  padding:15px 18px;
  width:min(380px,100%);
  border:1px solid var(--line);
  border-radius:11px;
  outline:0
}
.search:focus {
  border-color:var(--blue)
}
.filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.filter {
  padding:9px 13px;
  border-radius:30px;
  border:1px solid var(--line);
  background:white;
  font-weight:800;
  font-size:12px
}
.filter.active {
  background:var(--blue);
  color:white
}
.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.article-card {
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:white;
  transition:transform .2s
}
.article-card:hover {
  transform:translateY(-4px)
}
.article-image {
  height:185px;
  background:radial-gradient(circle at 80% 15%,#276def,#004aad 55%,#061633);
  display:grid;
  place-items:center;
  color:white;
  font-size:58px;
  position:relative
}
.article-card:nth-child(3n+2) .article-image {
  background:linear-gradient(130deg,#0b2044,#345aaf)
}
.article-card:nth-child(3n+3) .article-image {
  background:linear-gradient(130deg,#143f9a,#647cd7)
}
.article-content {
  padding:25px;
  flex:1
}
.article-content small {
  font-size:11px;
  font-weight:800;
  color:var(--blue)
}
.article-content h3 {
  font-size:21px;
  margin:12px 0
}
.article-content p {
  font-size:13px;
  color:var(--muted)
}
.article-content .read {
  display:block;
  margin-top:20px;
  font-weight:800;
  color:var(--blue);
  font-size:13px
}
.article-layout {
  max-width:840px;
  margin:0 auto
}
.article-layout .category {
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}
.article-layout h1 {
  font-size:clamp(40px,5vw,68px);
  margin:15px 0
}
.article-meta {
  color:var(--muted);
  font-size:13px
}
.article-body {
  padding:45px 0;
  color:#425168;
  font-size:16px;
  line-height:1.95
}
.article-body p,.article-body ul {
  margin:0 0 23px
}
.article-body h3 {
  color:var(--navy);
  margin:35px 0 15px
}
.article-body li {
  margin:8px 0
}
.legal-switch {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:25px
}
.legal-switch button {
  border:1px solid var(--line);
  background:white;
  border-radius:9px;
  padding:12px 17px;
  font-weight:800
}
.legal-switch button.active {
  background:var(--blue);
  color:white
}
.legal-card {
  border:1px solid var(--line);
  border-radius:18px;
  padding:42px;
  background:#fff;
  display:none
}
.legal-card.active {
  display:block
}
.legal-card pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:14px/1.85 'DM Sans',sans-serif;
  color:#35445c;
  margin:0
}
.legal-card h2 {
  font-size:25px;
  margin:0 0 20px
}
.empty {
  padding:40px;
  text-align:center;
  color:var(--muted)
}
@media(max-width:950px) {
  .nav-links,.nav-actions {
    display:none
  }
  .menu-button {
    display:block
  }
  .nav.open {
    height:auto
  }
  .nav.open .nav-inner {
    flex-wrap:wrap;
    padding:13px 0
  }
  .nav.open .nav-links {
    display:flex;
    order:3;
    flex-basis:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:0
  }
  .nav.open .nav-links a {
    padding:11px 0
  }
  .nav.open .nav-actions {
    display:flex;
    order:4;
    flex-basis:100%
  }
  .hero-grid {
    grid-template-columns:1fr;
    padding:70px 0 65px
  }
  .hero h1 {
    max-width:800px
  }
  .device-stage {
    height:520px
  }
  .feature-grid,.blog-grid,.steps {
    grid-template-columns:repeat(2,1fr)
  }
  .split {
    gap:35px
  }
  .footer-grid {
    grid-template-columns:repeat(2,1fr)
  }
}
@media(max-width:640px) {
  .container {
    width:min(100% - 34px,1200px)
  }
  .nav {
    height:72px
  }
  .brand img {
    width:135px
  }
  .hero-grid {
    padding:60px 0 40px;
    gap:10px
  }
  .hero h1 {
    font-size:clamp(46px,12vw,67px)
  }
  .hero-lead {
    font-size:15px
  }
  .device-stage {
    transform:scale(.86);
    margin:-10px -20px;
    height:480px
  }
  .float-one {
    left:0
  }
  .float-two {
    right:0
  }
  .section {
    padding:75px 0
  }
  .feature-grid,.blog-grid,.steps,.split,.contact-grid,.footer-grid {
    grid-template-columns:1fr
  }
  .currency-panel {
    grid-template-columns:repeat(3,1fr)
  }
  .currency {
    padding:15px 5px;
    font-size:12px
  }
  .banner {
    padding:42px 27px;
    display:block
  }
  .banner .btn {
    margin-top:25px
  }
  .legal-card {
    padding:20px
  }
  .page-hero {
    padding:67px 0 48px
  }
  .footer-bottom {
    margin-top:34px
  }
  .blog-toolbar {
    align-items:stretch
  }
  .search {
    width:100%
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    scroll-behavior:auto!important;
    transition:none!important
  }
}
/* Thunder Pay — direct crypto spending brand story */
.hero {
  background:radial-gradient(ellipse 60% 75% at 95% 32%,#dfeaff 0%,transparent 85%),linear-gradient(135deg,#fbfcff,#f2f6fd)
}
.hero-grid {
  min-height:700px
}
.hero h1 {
  font-size:clamp(53px,6.4vw,94px);
  line-height:1.07
}
.hero-copy {
  position:relative;
  z-index:2
}
.hero-strip {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  border-top:1px solid #cad7ee;
  padding:19px 0 27px;
  font:700 10px 'Space Grotesk',sans-serif;
  color:#6b7b94;
  letter-spacing:.14em
}
.blue-word {
  font-style:normal;
  color:var(--blue)
}
.yellow-word {
  color:var(--yellow)
}
.feature-grid {
  grid-template-columns:repeat(3,1fr)
}
.feature-lead {
  grid-column:span 2;
  background:linear-gradient(135deg,#074cad,#062452);
  color:#fff;
  min-height:265px;
  position:relative;
  overflow:hidden
}
.feature-lead:after {
  content:'\f35d';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  font-size:230px;
  line-height:1;
  position:absolute;
  top:12px;
  right:5px;
  color:#ffffff12;
  pointer-events:none
}
.feature-lead .feature-icon {
  background:#ffffff1e;
  color:var(--yellow)
}
.feature-lead p {
  max-width:580px;
  color:#d5e5ff
}
.feature-kicker {
  color:var(--yellow);
  font-size:10px;
  letter-spacing:.13em;
  font-weight:800;
  display:block;
  margin-bottom:13px
}
.feature-note {
  margin-top:20px;
  font-weight:800;
  font-size:13px;
  color:var(--yellow);
  display:flex;
  justify-content:space-between;
  max-width:450px
}
.mini-label {
  display:block;
  margin-top:18px;
  color:var(--blue);
  font-weight:800;
  font-size:11px
}
.availability-note {
  font-size:12px;
  color:var(--muted);
  margin-top:25px
}
.spaced-title {
  margin:18px 0 23px
}
.how-head .btn {
  margin-top:26px
}
.conversion-visual {
  padding:28px;
  border:1px solid #ffffff22;
  background:linear-gradient(140deg,#1b3158,#101f3e);
  border-radius:25px;
  position:relative;
  z-index:1
}
.cv-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  letter-spacing:.15em;
  font-size:10px;
  color:#a9bad7;
  font-weight:800;
  margin-bottom:25px
}
.cv-top span {
  font-size:24px;
  color:var(--yellow)
}
.cv-asset {
  background:#ffffff10;
  border:1px solid #ffffff20;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:20px;
  padding:19px;
  font-size:25px
}
.cv-asset div {
  flex:1
}
.cv-asset b {
  display:block;
  font-size:16px
}
.cv-asset small {
  display:block;
  color:#9db2d1;
  font-size:11px
}
.cv-asset>span {
  color:#93a9d0;
  font-size:12px
}
.cv-asset.emphasis {
  background:var(--yellow);
  color:#07152e;
  border-color:var(--yellow)
}
.cv-asset.emphasis small,.cv-asset.emphasis>span {
  color:#49516a
}
.cv-connector {
  text-align:center;
  color:var(--yellow);
  padding:9px;
  font-size:22px;
  line-height:1
}
.conversion-visual>p {
  color:#9db2d1;
  margin-top:19px;
  font-size:11px
}
.usecase-grid,.trust-grid,.roadmap-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px
}
.usecase {
  background:white;
  min-height:230px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:17px;
  position:relative
}
.usecase span,.roadmap-grid article>span {
  font-weight:800;
  color:var(--blue);
  font-size:10px;
  letter-spacing:.1em
}
.usecase strong {
  display:block;
  font:700 23px 'Space Grotesk',sans-serif;
  letter-spacing:-.04em;
  line-height:1.2;
  margin:35px 0 12px
}
.usecase p,.trust-grid p,.roadmap-grid p {
  font-size:13px;
  color:var(--muted)
}
.usecase b {
  color:var(--blue);
  position:absolute;
  bottom:20px;
  right:26px
}
.trust-grid {
  grid-template-columns:repeat(2,1fr)
}
.trust-grid article {
  padding:27px;
  border-top:1px solid #c6d3e7
}
.trust-grid article>span {
  font-size:12px;
  color:var(--blue);
  font-weight:800
}
.trust-grid h3 {
  margin:12px 0
}
.trust-grid a,.trust-legal a {
  color:var(--blue);
  font-weight:800;
  font-size:13px
}
.trust-legal {
  background:#f0f5ff;
  padding:22px 28px;
  border-radius:13px;
  margin-top:20px;
  font-size:13px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  flex-wrap:wrap
}
.roadmap-top {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:25px
}
.roadmap-pill {
  border:1px solid #bfcce3;
  padding:10px 14px;
  border-radius:100px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  color:#405576;
  white-space:nowrap
}
.roadmap-grid article {
  background:white;
  border:1px solid var(--line);
  border-radius:17px;
  padding:26px;
  min-height:280px
}
.roadmap-grid article>div {
  height:70px;
  width:70px;
  border-radius:17px;
  background:#e7efff;
  color:var(--blue);
  font-size:32px;
  display:grid;
  place-items:center;
  margin-bottom:25px
}
.roadmap-grid h3 {
  font-size:22px;
  margin:10px 0
}
.faq-answer a {
  color:var(--blue);
  font-weight:700;
  text-decoration:underline
}
.cta-section {
  padding-bottom:110px
}
@media(max-width:950px) {
  .usecase-grid,.roadmap-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .feature-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .hero-grid {
    min-height:0
  }
}
@media(max-width:640px) {
  .hero h1 {
    font-size:clamp(48px,12vw,65px)
  }
  .hero-strip {
    justify-content:center;
    text-align:center;
    gap:9px 16px
  }
  .feature-grid,.usecase-grid,.roadmap-grid,.trust-grid {
    grid-template-columns:1fr
  }
  .feature-lead {
    grid-column:auto
  }
  .roadmap-top {
    display:block
  }
  .roadmap-pill {
    display:inline-block;
    margin:0 0 26px
  }
  .hero-lead {
    line-height:1.75
  }
  .feature {
    padding:27px
  }
  .conversion-visual {
    padding:20px
  }
  .trust-legal {
    display:block
  }
  .trust-legal a {
    display:block;
    margin-top:6px
  }
}