/* ===================================================================
   StockPay — landing hero
   =================================================================== */
:root{
  --white:#FFFFFF;
  --ink:#0B1026;
  --ink-2:#111831;
  --text:#596174;
  --text-2:#5D6475;
  --muted:#7C8497;
  --line:#E5E8F0;
  --line-soft:#EEF0F4;
  --purple:#635BFF;
  --purple-hi:#776FFF;
  --green:#46B82C;
  --green-dark:#3D9F2D;
  --blue:#5DA9FF;
  --r-card:18px;
  --r-btn:8px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
p{margin:0;}
h1{margin:0;font-weight:700;}
svg{display:block;}

/* The reference composition is specified at 1536px. Beyond that the page
   centers rather than stretching: the mock is a fixed-size composition, so
   a widening grid would only push it into a growing right-hand gutter. */
.nav,.hero,.features{max-width:1536px;margin-left:auto;margin-right:auto;}

/* ============================ NAVBAR ============================ */
.nav{
  height:100px;
  display:flex;
  align-items:center;
  padding:10px 62px 0 54px;
  position:relative;
  z-index:40;
}
.nav__logo{display:flex;align-items:center;gap:9px;flex:none;}
.nav__logo-mark{width:30px;height:30px;color:var(--ink-2);}
.nav__logo-text{font-size:30px;font-weight:700;letter-spacing:-.9px;color:var(--ink-2);}

.nav__links{display:flex;align-items:center;gap:42px;margin-left:127px;}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:15px;font-weight:500;color:var(--ink-2);
  letter-spacing:-.1px;
  transition:color .16s ease,opacity .16s ease;
}
.nav__link:hover{color:var(--purple);}
.chev{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.75;transition:transform .18s ease;}
.nav__link:hover .chev{transform:translateY(1px);}

.nav__actions{margin-left:auto;display:flex;align-items:center;gap:34px;}
.nav__signin{font-size:15px;font-weight:500;color:var(--ink-2);transition:color .16s ease;}
.nav__signin:hover{color:var(--purple);}

/* ============================ BUTTONS =========================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--r-btn);
  font-weight:500;
  white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
}
.btn--primary{background:var(--purple);color:#fff;box-shadow:0 1px 2px rgba(45,38,140,.16);}
.btn--primary:hover{background:#5A52F5;transform:translateY(-2px);box-shadow:0 8px 20px rgba(99,91,255,.30);}
.btn--ghost{background:#fff;color:var(--purple);border:1px solid var(--purple-hi);}
.btn--ghost:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(99,91,255,.16);background:#FCFCFF;}
.btn--nav{width:141px;height:50px;font-size:15px;}
.btn--lg{height:52px;padding:0 24px;font-size:16px;}
.arrow{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

/* ============================== HERO ============================ */
.hero{
  position:relative;
  height:745px;
  display:grid;
  grid-template-columns:41% 59%;
  padding:68px 60px 0 61px;
}

/* ---- decoration ---- */
.decor{position:absolute;inset:0;pointer-events:none;z-index:0;}
.decor__arc{position:absolute;opacity:.35;}
.decor__arc--purple-left{left:596px;top:338px;width:72px;height:136px;}
.decor__arc--purple-top{left:1283px;top:163px;width:72px;height:62px;}
.decor__arc--green{left:1032px;top:652px;width:124px;height:88px;}
.decor__glow{
  position:absolute;left:720px;top:430px;width:470px;height:330px;
  background:radial-gradient(closest-side,rgba(93,169,255,.40),rgba(93,169,255,0));
  filter:blur(100px);opacity:.12;
}

/* ---- left column ---- */
.hero__copy{position:relative;z-index:10;width:540px;}

.eyebrow{
  display:inline-flex;align-items:center;justify-content:center;gap:22px;
  height:41px;padding:0 21px;
  border:1px solid #DDE1EA;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.6px;
}
.eyebrow__a{color:var(--purple);}
.eyebrow__b{color:var(--green-dark);}

.hero__title{
  margin-top:34px;
  font-size:70px;
  line-height:80px;
  font-weight:700;
  letter-spacing:-2.2px;
  color:var(--ink);
}
.hero__title span{display:block;}
.grad{
  background-image:linear-gradient(90deg,#635BFF 0%,#716CFF 30%,#55A9DF 65%,#58B967 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

.hero__desc{
  margin-top:24px;
  max-width:492px;
  font-size:18.5px;line-height:1.55;font-weight:400;
  color:var(--text);
}

.hero__cta{margin-top:31px;display:flex;gap:14px;}

/* ---- right column ---- */
.hero__visual{position:relative;z-index:5;}

/* ========================= CHECKOUT BROWSER ===================== */
.browser{
  position:absolute;left:12px;top:-25px;
  width:600px;height:607px;
  background:#fff;
  border:1px solid #DFE3EB;
  border-radius:var(--r-card);
  box-shadow:0 25px 70px rgba(31,45,75,.10);
  overflow:hidden;
  z-index:6;
}
.browser__bar{
  height:52px;display:flex;align-items:center;
  padding-left:20px;padding-right:20px;
  border-bottom:1px solid #E7E9EF;
}
.browser__lights{display:flex;gap:9px;flex:none;}
.browser__lights i{width:12px;height:12px;border-radius:50%;display:block;}
.browser__lights i:nth-child(1){background:#FF5F57;}
.browser__lights i:nth-child(2){background:#FEBC2E;}
.browser__lights i:nth-child(3){background:#28C840;}
.browser__url{
  margin-left:auto;margin-right:21px;
  width:430px;height:28px;
  display:flex;align-items:center;justify-content:center;gap:5px;
  background:#F4F5F8;border-radius:999px;
  font-size:11px;color:#667085;
}
.lock-mini{width:9px;height:9px;color:#98A0AE;flex:none;}

.browser__body{padding:20px 24px 28px 28px;}

.merchant{display:flex;align-items:center;gap:14px;}
.merchant__logo{
  width:42px;height:42px;border-radius:7px;background:#050505;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.merchant__logo svg{width:19px;height:19px;}
.merchant__id{display:flex;flex-direction:column;gap:3px;}
.merchant__id b{font-size:16px;font-weight:600;letter-spacing:-.2px;color:#111827;}
.merchant__id > span{font-size:12px;color:#6B7280;}
.merchant__amount{margin-left:auto;display:flex;align-items:baseline;gap:7px;}
.merchant__amount b{font-size:27px;font-weight:600;letter-spacing:-.9px;color:#0B1026;}
.merchant__amount span{font-size:13px;color:#8A91A0;}

.pm__heading{margin-top:40px;font-size:14px;font-weight:500;line-height:1.4;color:#1F2637;}

.pm-list{margin-top:30px;display:flex;flex-direction:column;gap:13px;}
.pm{
  width:410px;height:72px;
  display:flex;align-items:center;gap:13px;
  padding:0 22px 0 16px;
  border:1px solid #E1E5EC;border-radius:10px;
  text-align:left;background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.pm:hover{border-color:#C9CEDA;}
.pm.is-selected{border-color:#716AFF;box-shadow:0 0 0 1px rgba(113,106,255,.35);}
.pm__radio{
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid #CFD5E0;flex:none;
  transition:border-color .16s ease;
}
.pm.is-selected .pm__radio{border-color:var(--purple);border-width:5px;}
.pm__mark{width:22px;height:22px;flex:none;color:var(--green);display:flex;align-items:center;justify-content:center;}
.feather{width:22px;height:22px;}
.pm__text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.pm__text b{font-size:14px;font-weight:600;letter-spacing:-.1px;color:#111827;}
.pm__text > span{font-size:12px;color:#6B7280;}
.pm__aside{margin-left:auto;display:flex;align-items:center;gap:5px;flex:none;}

.brand{
  width:31px;height:20px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:7px;font-weight:800;letter-spacing:.2px;
}
.brand--visa{background:#fff;border:1px solid #E6E9EF;color:#1A1F71;font-style:italic;font-size:8px;}
.brand--mc{background:#fff;border:1px solid #E6E9EF;gap:0;}
.brand--mc i{width:10px;height:10px;border-radius:50%;display:block;}
.brand--mc i:first-child{background:#EB001B;}
.brand--mc i:last-child{background:#F79E1B;margin-left:-4px;}
.brand--amex{background:#1F72CD;color:#fff;font-size:6.5px;letter-spacing:.3px;}
.usdc{width:23px;height:23px;}

.badge{
  height:24px;padding:0 10px;border-radius:999px;
  display:inline-flex;align-items:center;
  background:#EFF9E9;color:#32811F;
  font-size:11px;font-weight:500;letter-spacing:-.1px;
}

.browser__footer{
  position:absolute;left:28px;width:410px;bottom:22px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;color:#727B8F;
}
.browser__footer-l,.browser__footer-r{display:inline-flex;align-items:center;gap:5px;}
.browser__footer-l svg{width:11px;height:11px;color:#9AA2B1;}
.browser__footer-r b{display:inline-flex;align-items:center;gap:3px;font-weight:600;color:#3C4457;}
.feather-mini{width:11px;height:11px;color:#111831;}

/* =========================== ASSET MODAL ======================== */
.modal{
  position:absolute;left:497px;top:152px;
  width:336px;
  padding:23px 23px 30px;
  background:#fff;
  border:1px solid #DDE1E8;
  border-radius:var(--r-card);
  box-shadow:0 30px 80px rgba(28,38,65,.14);
  z-index:12;
}
.modal__head{display:flex;align-items:center;justify-content:space-between;}
.modal__head b{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.2px;color:#111827;}
.modal__close{width:18px;height:18px;color:#8B93A3;display:flex;align-items:center;justify-content:center;transition:color .15s ease;}
.modal__close:hover{color:#111827;}
.modal__close svg{width:15px;height:15px;}

.modal__total{margin-top:25px;display:flex;flex-direction:column;gap:4px;}
.modal__total-label{font-size:11px;line-height:1.2;color:#8B93A3;}
.modal__total-amount{display:flex;align-items:baseline;gap:6px;}
.modal__total-amount b{font-size:23px;font-weight:700;line-height:1.2;letter-spacing:-.8px;color:#0B1026;}
.modal__total-amount span{font-size:12px;color:#8B93A3;}

.tabs{
  margin-top:20px;display:flex;gap:26px;
  border-bottom:1px solid #E9ECF2;
}
.tab{
  padding-bottom:10px;line-height:1.35;
  font-size:13px;font-weight:500;color:#8B93A3;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .16s ease,border-color .16s ease;
}
.tab.is-active{color:#111827;font-weight:600;border-bottom-color:#46A92D;}

.search{
  margin-top:23px;height:38px;
  display:flex;align-items:center;gap:8px;padding:0 11px;
  border:1px solid #DEE3EB;border-radius:var(--r-btn);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.search:focus-within{border-color:var(--purple-hi);box-shadow:0 0 0 3px rgba(99,91,255,.10);}
.search svg{width:14px;height:14px;color:#A0A7B5;flex:none;}
.search input{
  border:0;outline:0;width:100%;
  font-size:12.5px;color:#111827;background:transparent;
}
.search input::placeholder{color:#9AA1AF;}

.assets{margin-top:15px;display:flex;flex-direction:column;gap:9px;}
.asset{
  height:54px;display:flex;align-items:center;gap:10px;
  padding:0 10px;
  border:1px solid #E4E8EF;border-radius:10px;
  text-align:left;background:#fff;
  transition:border-color .16s ease,background-color .16s ease;
}
.asset:hover{border-color:#C9CEDA;}
.asset.is-selected{border-color:#46B82C;background:#FAFDF8;}
.asset__icon{
  width:26px;height:26px;border-radius:7px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.asset__icon svg{width:17px;height:17px;}
.asset__id{display:flex;flex-direction:column;gap:1px;min-width:0;}
.asset__id b{font-size:12.5px;font-weight:600;letter-spacing:-.1px;color:#111827;}
.asset__id > span{font-size:10.5px;color:#7C8497;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.asset__val{margin-left:auto;display:flex;flex-direction:column;gap:1px;align-items:flex-end;flex:none;}
.asset__val b{font-size:11.5px;font-weight:600;color:#111827;}
.asset__val > span{font-size:10.5px;color:#7C8497;}
.asset__check{
  width:17px;height:17px;flex:none;border-radius:50%;
  border:1.5px solid #D3D8E1;
}
.asset.is-selected .asset__check{border:0;}
.asset__check-on{width:17px;height:17px;display:none;}
.asset.is-selected .asset__check-on{display:block;}

.review{
  margin-top:17px;width:100%;height:44px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:#121827;color:#fff;border-radius:var(--r-btn);
  font-size:14px;font-weight:500;letter-spacing:-.1px;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.review:hover{background:#1D2534;transform:translateY(-2px);box-shadow:0 10px 22px rgba(18,24,39,.22);}
.review svg{width:13px;height:13px;color:#fff;}

.legal{
  margin-top:18px;
  font-size:11px;line-height:1.5;text-align:center;color:#7A8191;
}
.legal a{color:var(--purple);}
.legal a:hover{text-decoration:underline;}

/* =========================== FEATURE BAR ======================== */
.features{padding:0 62px;position:relative;z-index:2;}
.features__grid{
  border-top:1px solid var(--line-soft);
  padding:34px 4px 0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,259px));
  height:150px;
}
.feature{display:flex;align-items:flex-start;gap:17px;}
.feature__icon{
  width:56px;height:56px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.feature__icon svg{width:25px;height:25px;}
.feature__icon--purple{background:#EEEDFF;color:#635BFF;}
.feature__icon--green{background:#EAF6E6;color:#3D9F2D;}
.feature__text{padding-top:0;}
.feature__text b{display:block;font-size:15px;font-weight:600;line-height:1.35;letter-spacing:-.2px;color:#111827;}
.feature__text p{margin-top:4px;font-size:13px;line-height:1.45;color:#6B7280;max-width:170px;}

/* ============================ RESPONSIVE ======================== */
/* The hero mock is a fixed 833x776 composition. Rather than re-flow it —
   which would break the reference's overlap — it is scaled down in steps
   so it always clears the right gutter while the two-column layout holds. */
.hero__visual{transform-origin:0 0;}

@media (max-width:1535px){ .hero__visual{transform:scale(.93);} }
@media (max-width:1440px){
  .hero__visual{transform:scale(.87);}
  .hero__copy{width:auto;}
  }
@media (max-width:1360px){
  .hero__visual{transform:scale(.81);}
  .hero__title{font-size:60px;line-height:69px;letter-spacing:-1.9px;}
  .hero__desc{font-size:17px;max-width:none;}
  .decor__arc,.decor__glow{display:none;}
  .features__grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:26px;}
  .feature__text p{max-width:none;}
}
@media (max-width:1280px){ .hero__visual{transform:scale(.76);} }
@media (max-width:1200px){
  .hero__visual{transform:scale(.71);}
  .hero__title{font-size:52px;line-height:60px;letter-spacing:-1.6px;}
  .hero__desc{font-size:16.5px;}
  .nav__links{margin-left:64px;gap:30px;}
}

/* ---- tablet: two columns, mock stacks inside its own column ---- */
@media (max-width:1140px){
  .br-d{display:none;}
  .nav{padding:10px 32px 0;}
  .nav__links{display:none;}

  .hero{
    grid-template-columns:47% 53%;
    height:auto;
    padding:44px 32px 64px;
    column-gap:28px;
  }
  .hero__title{font-size:46px;line-height:53px;letter-spacing:-1.3px;}
  .hero__desc{margin-top:20px;font-size:16.5px;}
  .hero__cta{margin-top:28px;}
  
  .hero__visual{transform:none;display:flex;flex-direction:column;align-items:flex-end;}
  .browser{
    position:relative;left:auto;top:0;
    width:100%;max-width:520px;height:auto;
    padding-bottom:58px;align-self:flex-start;
  }
  .pm{width:100%;}
  .browser__body{padding:20px 20px 24px;}
  .browser__footer{left:20px;right:20px;width:auto;}
  .browser__url{width:auto;flex:1;max-width:330px;margin-right:0;padding:0 12px;}
  .modal{position:relative;left:auto;top:0;width:300px;margin:-96px 24px 0 0;}

  .features{padding:0 32px;}
  .features__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    height:auto;row-gap:34px;column-gap:32px;padding:34px 0 52px;
  }
}

/* ---- mobile: single column, mock stacks below the copy ---- */
@media (max-width:860px){
  .nav{height:76px;padding:0 22px;}
  .nav__logo-mark{width:26px;height:26px;}
  .nav__logo-text{font-size:24px;}
  .nav__actions{gap:20px;}
  .btn--nav{width:124px;height:44px;font-size:14px;}

  .hero{display:block;height:auto;padding:34px 22px 48px;}
  .eyebrow{height:38px;font-size:12px;gap:16px;padding:0 18px;}
  .hero__title{margin-top:26px;font-size:48px;line-height:52px;letter-spacing:-1.4px;}
  .hero__desc{margin-top:18px;font-size:16.5px;}
  .hero__cta{margin-top:28px;flex-wrap:wrap;}
  .btn--lg{height:50px;padding:0 22px;flex:1 1 auto;min-width:158px;}
    
  .hero__visual{margin-top:44px;align-items:center;gap:20px;}
  .browser{max-width:none;align-self:auto;}
  .merchant__amount b{font-size:24px;}
  .modal{width:100%;max-width:360px;margin:0;}

  .features{padding:0 22px;}
  .features__grid{grid-template-columns:1fr;row-gap:26px;padding:32px 0 40px;}
  .feature__icon{width:48px;height:48px;border-radius:11px;}
  .feature__icon svg{width:22px;height:22px;}
}

@media (max-width:430px){
  .nav__signin{display:none;}
  .hero__title{font-size:38px;line-height:42px;letter-spacing:-1.1px;}
  .hero__desc{font-size:16px;}
  .eyebrow{gap:10px;font-size:11px;letter-spacing:.4px;}

  .browser__body{padding:18px 16px 22px;}
  .browser__footer{left:16px;right:16px;}
  .merchant{gap:11px;}
  .merchant__logo{width:38px;height:38px;}
  .merchant__id b{font-size:14.5px;white-space:nowrap;}
  .merchant__id > span{font-size:11px;white-space:nowrap;}
  .merchant__amount{gap:5px;}
  .merchant__amount b{font-size:19px;letter-spacing:-.6px;}
  .merchant__amount span{font-size:11px;}

  .pm{height:auto;min-height:66px;padding:12px 14px;gap:11px;}
  .pm__text b{font-size:13.5px;white-space:nowrap;}
  .pm__text > span{font-size:11px;}
  .pm__aside{gap:4px;}
  .pm__aside .brand{width:25px;height:16px;}
  .brand--visa{font-size:7px;}
  .brand--amex{font-size:5.5px;}
  .badge{height:22px;padding:0 7px;font-size:10px;}
  .browser__footer-l,.browser__footer-r{white-space:nowrap;}
  .browser__footer{font-size:10.5px;}

  .modal{padding:18px 16px 24px;}
  .asset__id > span{font-size:10px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important;}
}

/* active page in the navbar (inner marketing pages) */
.nav__link.is-active{color:var(--purple);}

/* Signed-in state: the nav link becomes a direct route to the dashboard */
.nav__signin.is-authed{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--purple);font-weight:600;
}
.nav__signin.is-authed::after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--green);
}