/* ==========================================================================
   TOKENS / GLOBAL
   ========================================================================== */
:root{
  --page-bg: #efeff1;
  --text: #0a0a0b;
  --muted: rgba(10,10,11,.72);
  --accent: #2563eb;
  --radius: 28px;
  --maxw: 1300px;
  --gutter: clamp(16px, 3.2vw, 28px);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.18);
  --shadow-md: 0 14px 36px rgba(0,0,0,.12);
}

html, body { height: 100%; }
body{
  margin:0;
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  color:var(--text);
  background:var(--page-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ==========================================================================
   HERO (eylet NFC Digital Business Card)
   ========================================================================== */
.gs-hero{ padding: clamp(28px, 4vw, 46px); }
.gs-wrap{
  max-width:var(--maxw);
  margin:0 auto;
  min-height:700px;
  max-height:800px;
}
.gs-panel{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:clamp(420px, 52vw, 600px);
  display:grid;
  place-items:stretch;
  isolation:isolate;
}
.gs-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;   /* ✅ solid white instead of image */
  z-index: -1;
}
.gs-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;                           /* text | visuals */
  gap:clamp(18px, 3.2vw, 36px);
  align-items:center;
  padding:clamp(22px, 3.6vw, 38px);
}

/* Left column (copy) */
.gs-copy {
  position: relative;
  z-index: 1;          /* keep it above background */
  max-width: 520px;    /* ⬅️ lock text block narrower */
}
.gs-title{
  margin:0 0 clamp(12px, 1.4vw, 16px);
  font-weight:600;
  font-size:clamp(28px, 5.2vw, 54px);
  letter-spacing:-.02em;
  line-height:1.05;
}
.gs-sub {
  max-width: 520px;                   /* keep paragraphs narrow */
  padding-right: clamp(20px, 8vw, 160px); /* ⬅️ adds a gutter */
  position: relative;
  z-index: 1;
}
.gs-loginbar{ display:inline-block; overflow:hidden; }
.gs-loginbar img{ display:block; height:58px; width:auto; max-width:100%; }
.gs-note{
  margin:clamp(18px, 2.2vw, 22px) 0 0;
  color:var(--muted);
  font-size:clamp(13px, 1.5vw, 16px);
  line-height:1.55;
}
.gs-qrbox{ margin-top:clamp(18px, 3.6vw, 26px); display:inline-block; }
.gs-qrbox img{ display:block; height:100px; width:auto; }

/* Right column (visual stack) */
.gs-visual{ position:relative; min-height:clamp(360px, 44vw, 560px); }
.card{ position:absolute; overflow:hidden; }
.card img{ width:100%; height:100%; object-fit:contain; display:block; }
.card--small{ z-index:1; }
.card--glass{ z-index:2; }
.card--main { z-index:3; }

/* Tuned positions */
.card--main{
  right:30%; top:-5%;
  width:min(410px, 40vw);
  aspect-ratio:9/16;
}
.card--small{
  left:69%; top:2%;
  width:min(260px, 28vw);
  aspect-ratio:9/16;
  transform:translate(-36%, 0);
}
.card--glass{
  right:30%; top:-10%;
  width:min(240px, 37vw);
  aspect-ratio:9/16;
}
.theme-row{
  position:absolute; right:6%; bottom:2%;
  width:min(280px, 37vw);
  z-index:1; pointer-events:none;
}
.theme-row img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.12));
}

/* --- HERO responsive --- */
@media (max-width:980px){
  .gs-grid{ grid-template-columns:1fr; }
  .card--main { right:10%; width:min(360px, 66vw); }
  .card--small{ left:62%;  width:min(260px, 48vw); }
  .card--glass{ right:6%;   width:min(340px, 60vw); }
  .theme-row  { right:8%;   width:min(340px, 60vw); bottom:10%; }
}
@media (max-width:768px){
  .gs-visual{ display:none; }
  .gs-grid{ grid-template-columns:1fr; }
  .gs-wrap{ max-height:none; min-height:560px; }
}
/* Fix the mobile gap + match card width */
@media (max-width:768px){
  .gs-hero{ padding-inline:16px !important; padding-bottom:8px; }
  .gs-wrap{ min-height:0 !important; }
  .gs-panel{ min-height:360px !important; }
}
@media (max-width:420px){
  .gs-panel{ min-height:340px !important; }
}

/* ==========================================================================
   TEAMS – Getting Started (Steps 1–3)
   ========================================================================== */
.eylet-teams-started{ padding:0 16px clamp(20px, 4vw, 36px); }
.ets-container{ max-width:1180px; margin:0 auto; }

.ets-title{
  margin:0 0 18px;
  padding-bottom:4px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.2;
  font-size:clamp(28px, 3.1vw, 44px);
  background:linear-gradient(90deg, #0071e3, #a246ef, #ff4aa2, #f80);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
}
.ets-intro{ max-width:860px; color:#1a1a1a; font-size:clamp(14px, 1.08vw, 16px); }
.ets-intro p{ margin:0 0 12px; line-height:1.7; }
.ets-intro p:last-child{ margin-bottom:22px; }

.ets-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:960px){ .ets-grid{ grid-template-columns:1fr; gap:16px; } }

.ets-card{
  position:relative;
  background:#fff;
  border-radius:22px;
  padding:18px 18px 22px;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:800px;
  overflow:hidden;
}
.ets-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(17,17,17,.06); pointer-events:none;
}

/* Step text, list, & badges */
.ets-copy{ position:relative; padding:2px 6px 10px; padding-top:2.5rem; }
.ets-steps{ color:#222; font-size:16px; line-height:1.65; margin:0; }
.ets-steps .n{ font-weight:600; color:#111; margin-right:4px; }
.ets-link{ color:var(--accent); text-decoration:underline; }
.ets-microhead{ color:#d83b01; font-weight:600; margin:0 0 6px; font-size:14px; line-height:1.5; }

.ets-step-badge,
.step-badge{
  position:absolute; left:16px;
  background:#000; color:#fff; font-weight:600;
  padding:4px 10px; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.ets-step-badge{ top:16px; font-size:16px; border-radius:50px; }
.step-badge{ top:-12px; font-size:.85rem; }
.ets-steps-list{ list-style:none; counter-reset:step; margin:0; padding:0; margin-top:.1rem; }
.ets-steps-list li{
  counter-increment:step;
  position:relative;
  padding-left:30px;
  margin:0 0 10px;
  line-height:1.65;
  font-size:16px;
  color:#222;
}
.ets-steps-list li::before{
  content:counter(step) ".";
  position:absolute; left:0; top:0; font-weight:600; color:#222;
}

/* Step 1: login row + CTA */
.ets-lead{ margin:0 0 8px; font-weight:600; color:#1d1d1f; }
.ets-help{ margin:8px 0 12px; color:var(--muted); }
.ets-login-row{ display:flex; align-items:center; gap:12px; margin:10px 0 14px; flex-wrap:wrap; }
.ets-loginbar{ height:52px; width:auto; display:block; max-width:100%; }
.ets-qr{ height:40px; width:auto; display:block; max-width:100%; }

.ets-btn{
  display:block;
  width:min(220px, 100%);
  padding:14px 28px;
  margin:8px 0 16px;
  border-radius:999px;
  background:#0d6efd;
  color:#fff;
  text-align:center;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.02em;
}
.ets-btn:hover{ background:#0056d2; }

/* Shot area */
.ets-shot{ display:grid; place-items:end center; min-height:clamp(340px,38vw,480px); padding:10px 10px 0; }
.ets-shot img{
  --tx:80px; --ty:0px; --sc:1.44;
  width:clamp(260px, 90%, 440px);
  height:auto; display:block;
  transform:translate(var(--tx), var(--ty)) scale(var(--sc));
}
@media (max-width:960px){
  .ets-card{ min-height:520px; }
  .ets-shot{ min-height:420px; }
  .ets-shot img{ --tx:70px; --ty:110px; }
}

/* Tighten hero/steps spacing */
.gs-hero{ padding-bottom:0; }
.eylet-teams-started{ padding-top:0; }
.gs-wrap{ margin-bottom:0; }

/* ================== Video Section ================== */
.ey-video{
  padding: clamp(14px, 3vw, 32px) 16px;
  background: var(--page-bg, #efeff1);
  font-family: Poppins, system-ui, sans-serif;
}

.eyv-card{
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  background: #f4f5f7;                 /* soft grey wrapper (like screenshot) */
  border-radius: var(--radius, 28px);
  padding: clamp(18px, 3vw, 28px);
}

.eyv-frame{
  margin: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;                /* keeps the video box proportional */
  background: #fff;
  border-radius: calc(var(--radius, 28px) - 8px);
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.06);
}

.eyv-placeholder{
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 36px);
  color: #0a0a0b;
  line-height: 1;
  text-align: center;
  user-select: none;
}

/* Embedded media fills the rounded frame */
.eyv-embed{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;                    /* helps during load */
}

/* If you keep the placeholder in DOM, hide it when an embed is present */
.eyv-frame:has(.eyv-embed) .eyv-placeholder{ display: none; }

/* Fallback if :has() isn’t available: add .has-embed to .eyv-frame manually */
.eyv-frame.has-embed .eyv-placeholder{ display: none; }

/* =========================
   Steps 7–8 (v2 cards)
========================= */
.eylet-two-steps.v2 { background: transparent; padding: clamp(12px,3vw,32px) 0; }
.two-steps-grid.v2 {
  max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
  gap: clamp(16px,3vw,32px); align-items:stretch;
}
.two-step-card.v2 {
  position:relative; background: #fff; border-radius:28px; 
  padding: 28px clamp(22px,3vw,36px); min-height: 710px; height: 710px; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
}
.two-step-card.v2 .step-tag {
  align-self:flex-start; display:inline-flex; padding:6px 14px; border-radius:999px; margin-bottom:18px;
  font-weight:700; font-size: clamp(14px,.9vw,16px); background:#1f1f21; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.two-step-card.v2 .section-heading { font-weight:800; letter-spacing:-.2px; margin:0 0 10px; }
.two-step-card.v2 .block-desc { margin:0 0 8px; }
.two-step-card.v2 .ets-steps-list { margin:0; }
.two-step-card.v2 .ets-steps-list li { margin:0 0 8px; }

.step7-card { padding-bottom: 260px; }
.step8-card { padding-bottom: 230px; }

.two-step-illustration img { width:100%; height:auto; display:block; filter: drop-shadow(0 16px 36px rgba(0,0,0,.18)); pointer-events:none; user-select:none; }
.two-step-illustration.left-phone { position:absolute; left:22px; bottom:20px; width:min(410px,85%); }
.two-step-illustration.center-devices { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); width:min(520px,100%); }

.two-step-card.v2:hover { transform: translateY(-2px); transition: transform .18s ease; }

@media (max-width:768px){
  .two-steps-grid.v2 { grid-template-columns:1fr; }
  .two-step-card.v2 { min-height:610px; height:610px; padding-bottom:160px; }
  .two-step-illustration.left-phone { left:50%; transform:translateX(-50%); width:min(360px,95%); }
  .two-step-illustration.center-devices { width:min(380px,95%); }
}

/* In-flow images (when not anchored) */
.step8-illustration-top { margin:16px 0 20px; text-align:center; }
.step8-illustration-top img { width:min(460px,100%); height:auto; display:inline-block; }

/* desktop/tablet (your current rule) */
.step7-illustration img{
  --tx:40px;     /* desktop X */
  --ty: -150px;      /* desktop Y */
  --scale: 0.68;
  transform: translate(var(--tx), var(--ty)) scale(var(--scale));
}

@media (max-width: 768px){
  .step7-illustration img{
    --tx: 60px;
    --ty: 0px;
    --scale: 1;    /* or 0.95 if you want it slightly smaller */
    width: min(420px, 92vw);
    margin-inline: auto;
  }
}
/* ================== Support (after Step 8) ================== */
.ey-support{
  padding: clamp(14px, 3vw, 32px) 16px;
  background: #efeff1;
  font-family: Poppins, system-ui, sans-serif;
}

/* card shell (same width as other sections) */
.ey-support-card{
  width: min(1180px, calc(100% - 32px));
  max-width: 1180px;
  margin: 0 auto;
  background: #E4F0FE;
  border-radius: var(--radius, 28px);
  padding: clamp(24px, 3.6vw, 40px);
  position: relative;
}
.ey-support-card::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* title */
.ey-support-title{
  margin: 0 0 clamp(6px, .8vw, 10px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(28px, 2.1vw + 1rem, 44px);
  color: #0a0a0b;
}

/* grid: left copy | right artwork */
.ey-support-grid{
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(18px, 3.2vw, 40px);
  align-items: center;
}

/* left column – center the whole stack vertically */
.ey-support-left{
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  min-height: clamp(260px, 34vw, 520px);
}
.ey-support-lead,
.ey-support-copy{
  margin: 0;
  color: #1a1a1a;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.55;
  max-width: 50ch;
}

/* right artwork */
.ey-support-art{
  position: relative;
  display: grid;
  place-items: end center;
  min-height: clamp(260px, 34vw, 520px);
}
.ey-support-art::before{
  content: "";
  position: absolute;
  top: 0; left: 10%;
  width: clamp(300px, 46vw, 640px);
  height: clamp(180px, 26vw, 360px);
}
.ey-support-phone{
  position: relative;
  z-index: 1;
  width: clamp(320px, 44vw, 560px);
  height: auto;
  display: block;
}

/* responsive */
@media (max-width: 1024px){
  .ey-support-grid{ grid-template-columns: 1fr; align-items: start; }
  .ey-support-left{ justify-content: flex-start; min-height: auto; }
  .ey-support-art{ place-items: center; min-height: auto; }
  .ey-support-art::before{
    left: 50%;
    transform: translateX(-50%) scale(.92);
    width: min(92vw, 620px);
    height: clamp(160px, 36vw, 320px);
    opacity: .8;
  }
  .ey-support-phone{ width: min(92vw, 520px); }
}
@media (max-width: 480px){
  .ey-support-card{ border-radius: 24px; padding: clamp(18px, 4vw, 28px); }
  .ey-support-art::before{ opacity: .6; }
}

/* Make the support card the exact same width as the other cards */
.ey-support { padding: clamp(14px, 3vw, 32px) 16px; } /* same section gutters */

.ey-support-card{
  width: min(var(--maxw, 1180px), calc(100% - 32px));
  max-width: var(--maxw, 1180px);
  margin: 0 auto;
  box-sizing: border-box;
}
.ey-btn {
  display: inline-block;
  padding: 12px 28px;
  background: #000;
  color: #fff;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border: none;
  border-radius: 999px; /* pill shape */
  cursor: pointer;
  transition: background 0.25s ease;
}

.ey-btn:hover {
  background: #222; /* subtle hover effect */
}

.ey-btn:active {
  background: #000; /* keeps it solid on click */
}

.ey-btn:focus {
  outline: 2px solid #0071e3; /* accessible focus ring */
  outline-offset: 3px;
}
@media (min-width: 1025px) {
  .ey-support-phone {
    transform: translate(100px, 100px);
  }
}

/* ================== Test Google Card ================== */
.ey-testg{
  padding: clamp(14px, 3vw, 32px) 16px;
  background: #efeff1;
  font-family: Poppins, system-ui, sans-serif;
}

/* card shell */
.ey-testg-card{
  width: min(var(--maxw, 1180px), calc(100% - 32px));
  max-width: var(--maxw, 1180px);
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius, 28px);
  padding: clamp(24px, 3.6vw, 40px);
  position: relative;
  box-sizing: border-box;
}
.ey-testg-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.06);
  pointer-events:none;
}

/* grid: left copy | right artwork */
.ey-testg-grid{
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(18px, 3.2vw, 40px);
  align-items: center;
}

/* left column */
.ey-testg-left{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: clamp(10px, 1vw, 16px);
  justify-content:center;
  min-height: clamp(260px, 34vw, 520px);
}
.ey-testg-title{
  margin:0;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.05;
  font-size: clamp(28px, 2.1vw + 1rem, 44px);
  color:#0a0a0b;
}

/* Google color bar under title */
.ey-testg-bar{
  display:block;
  width:min(500px, 70%);
  height:10px;
  border-radius:6px;
  background: linear-gradient(90deg,
    #4285F4 0 25%,
    #34A853 25% 50%,
    #FBBC05 50% 75%,
    #EA4335 75% 100%);
}

/* check + text */
.ey-testg-checkrow{ display:flex; align-items:center; gap:12px; margin-top:4px; }
.ey-testg-check{ flex:0 0 auto; }
.ey-testg-copy{
  margin:0;
  color:#1a1a1a;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height:1.6;
  max-width: 60ch;
}

/* right artwork */
.ey-testg-art{
  position:relative;
  display:grid;
  place-items:end center;
  min-height: clamp(260px, 34vw, 520px);
}
.ey-testg-phone{
  position:relative;
  z-index:1;
  width: clamp(320px, 44vw, 560px);
  height:auto;
  display:block;
  /* nudge down for that soft fade look like the mockup if needed */
  /* transform: translateY(12px); */
}

/* responsive */
@media (max-width:1024px){
  .ey-testg-grid{ grid-template-columns:1fr; align-items:start; }
  .ey-testg-left{ min-height:auto; }
  .ey-testg-art{ place-items:center; min-height:auto; }
  .ey-testg-bar{ width: 60%; }
  .ey-testg-phone{ width:min(92vw, 520px); }
}
@media (max-width:480px){
  .ey-testg-card{ border-radius:24px; padding: clamp(18px, 4vw, 28px); }
  .ey-testg-bar{ width: 70%; }
}
/* ========================================================================== 
   HERO (eylet NFC Digital Business Card)
   ========================================================================== */
.get_eylet-hero{ padding: clamp(28px, 4vw, 46px); }

.get_eylet-wrap{
  max-width:var(--maxw);
  margin:0 auto;
  min-height:700px;
  max-height:800px;
}

.get_eylet-panel{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:clamp(420px, 52vw, 600px);
  display:grid;
  place-items:stretch;
  isolation:isolate;
}
.get_eylet-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, #0d6efd 0%, #053a88 100%);
  z-index:-1;
}

.get_eylet-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;     /* text | visuals */
  gap:clamp(18px, 3.2vw, 36px);
  align-items:center;
  padding:clamp(22px, 3.6vw, 38px);
}

/* Left column (copy) */
.get_eylet-copy{ padding:clamp(8px, 1.2vw, 14px); position:relative; z-index:1; }
.get_eylet-title{
  margin: 0 0 clamp(12px, 1.4vw, 16px);
  font-weight: 600;
  font-size: clamp(26px, 4.6vw, 48px); /* ↓ was 28px, 5.2vw, 54px */
  letter-spacing: -.02em;
  line-height: 1.05;
  color: #fff;
}

.get_eylet-sub{
 max-width: 520px;                   /* keep paragraphs narrow */
  padding-right: clamp(20px, 8vw, 160px); /* ⬅️ adds a gutter */
  position: relative;
  z-index: 1;
  color: #fff;
}
.get_eylet-loginbar{ display:inline-block; overflow:hidden; }
.get_eylet-loginbar img{ display:block; height:58px; width:auto; max-width:100%; }
.get_eylet-note{
  margin:clamp(18px, 2.2vw, 22px) 0 0;
  color:var(--muted);
  font-size:clamp(13px, 1.5vw, 16px);
  line-height:1.55;
}
.get_eylet-qrbox{ margin-top:clamp(18px, 3.6vw, 26px); display:inline-block; }
.get_eylet-qrbox img{ display:block; height:100px; width:auto; }

/* Right column (visual stack) */
.get_eylet-visual{ position:relative; min-height:clamp(360px, 44vw, 560px); z-index:0; }

.get_eylet-card{ position:absolute; overflow:hidden; }
.get_eylet-card img{ width:100%; height:100%; object-fit:contain; display:block; }
.get_eylet-card--small{ z-index:1; }
.get_eylet-card--glass{ z-index:2; }
.get_eylet-card--main { z-index:3; }

/* Tuned positions */
.get_eylet-card--main{
  right:60%; bottom:0%;
  width:min(320px, 40vw);
  aspect-ratio:9/16;
  opacity:.9;
}
.get_eylet-card--small{
  left:69%; top:2%;
  width:min(260px, 28vw);
  aspect-ratio:9/16;
  transform:translate(-36%, 0);
}
.get_eylet-card--glass{
  right:30%; top:-10%;
  width:min(240px, 37vw);
  aspect-ratio:9/16;
}

.get_eylet-theme-row{
  position:absolute; right:6%; bottom:2%;
  width:min(280px, 37vw);
  z-index:1; pointer-events:none;
}
.get_eylet-theme-row img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.12));
}

/* --- HERO responsive --- */
@media (max-width:980px){
  .get_eylet-grid{ grid-template-columns:1fr; }
  .get_eylet-card--main  { right:10%; width:min(360px, 66vw); }
  .get_eylet-card--small { left:62%;  width:min(260px, 48vw); }
  .get_eylet-card--glass { right:6%;   width:min(340px, 60vw); }
  .get_eylet-theme-row   { right:8%;   width:min(340px, 60vw); bottom:10%; }
}
@media (max-width:768px){
  .get_eylet-visual{ display:none; }
  .get_eylet-grid{ grid-template-columns:1fr; }
  .get_eylet-wrap{ max-height:none; min-height:560px; }
}
/* Fix the mobile gap + match card width */
@media (max-width:768px){
  .get_eylet-hero{ padding-inline:16px !important; padding-bottom:8px; }
  .get_eylet-wrap{ min-height:0 !important; }
  .get_eylet-panel{ min-height:360px !important; }
}
@media (max-width:420px){
  .get_eylet-panel{ min-height:340px !important; }
}
    .animated-border-button {
      padding: 15px 30px;
      font-size: 18px;
      background-color: #333;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      position: relative; /* Essential for pseudo-elements */
      overflow: hidden; /* Hides parts of the pseudo-element outside the button */
    }

/* keep this so CTA width matches your text width */
.get_eylet-copy { --copy-max: 350px; }

.get_eylet-cta{
  position: relative;
  display: block;
  width: min(100%, var(--copy-max));
  padding: 18px clamp(26px, 4vw, 36px);
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(16px, 1.1vw, 16px);
  color: #1270c6;
  margin-top:1rem;

  /* inner fill */
  background: linear-gradient(90deg, #41F3FF 0%, #37E088 100%);

  /* subtle inner ring + depth */
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.55);

  transition: transform .15s ease, filter .15s ease;
  isolation: isolate;                /* lets the pseudo-elements layer cleanly */
}
/* Mobile: truly remove CTA width cap (wins cascade) */
@media (max-width: 768px){
  .get_eylet-copy .get_eylet-cta{
    width: auto !important;        /* kill min(100%, var(--copy-max)) */
    inline-size: auto !important;   /* extra belt for some engines */
    max-width: none !important;
    display: inline-block !important;
  }
}
/* === Animated gradient border ring === */
.get_eylet-cta::before{
  content: "";
  position: absolute;
  inset: -2px;                       /* ring thickness outside the pill */
  padding: 2px;                      /* ring thickness */
  border-radius: inherit;

  /* rotating conic gradient */
  background: conic-gradient(
    from var(--ring-angle, 0deg),
    #41F3FF 0%,
    #7cf6ff 20%,
    #37E088 50%,
    #41F3FF 80%,
    #7cf6ff 100%
  );

  /* show only the BORDER, not the fill */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
  animation: get_eylet-spin 4s linear infinite;
  opacity: .95;
}

/* soft outer glow that follows the ring */
.get_eylet-cta::after{
  content:"";
  position:absolute;
  inset: -8px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--ring-angle, 0deg),
    rgba(65,243,255,.55),
    rgba(55,224,136,.45),
    rgba(65,243,255,.55)
  );
  filter: blur(12px);
  opacity: .55;
  pointer-events: none;
  animation: get_eylet-spin 6s linear infinite reverse;
}

/* animated angle (smoothly interpolated) */
@property --ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes get_eylet-spin { to { --ring-angle: 360deg; } }

/* Hover/active polish */
.get_eylet-cta:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.get_eylet-cta:active{ transform: translateY(0);    filter: brightness(.98); }

/* Accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce){
  .get_eylet-cta::before,
  .get_eylet-cta::after{ animation: none; }
}
/* === Mobile equal-width section shells (10px gutters) === */
@media (max-width: 768px){
  /* unify side gutters for sections */
  .eylet-two-steps.v2 {
    padding-inline: 10px !important;
  }
  
  /* --- ey-support: fix mobile overflow and align width --- */
@media (max-width: 768px){
  /* make section gutters 10px and card width match it */
  .ey-support{ padding-inline: 10px !important; }
  .ey-support-card{
    width: min(var(--maxw, 1180px), calc(100% - 20px)) !important; /* 10 + 10 */
    margin: 0 auto !important;
    box-sizing: border-box;
    overflow: hidden;                 /* clip any art/shadows that spill */
  }

  /* prevent grid children from forcing overflow */
  .ey-support-grid{ grid-template-columns: 1fr !important; }
  .ey-support-grid > *{ min-width: 0; }  /* critical for long lines/buttons */

  /* ensure text wraps inside the card on small widths */
  .ey-support-title,
  .ey-support-lead,
  .ey-support-copy{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* keep phone art contained; no stray transforms on mobile */
  .ey-support-phone{
    width: min(92vw, 520px);
    transform: none !important;
  }
}
/* --- Test Google Card: fix mobile overflow on left column --- */
@media (max-width: 768px){
  /* match 10px gutters + clamp card width */
  .ey-testg{ padding-inline: 10px !important; }
  .ey-testg-card{
    width: min(var(--maxw, 1180px), calc(100% - 20px)) !important;
    margin: 0 auto !important;
    overflow: hidden;                 /* clip any bleed */
    box-sizing: border-box;
  }

  /* stack columns and allow shrinking */
  .ey-testg-grid{ grid-template-columns: 1fr !important; }
  .ey-testg-grid > *{ min-width: 0; } /* <-- critical to stop overflow */

  /* allow wrapping inside the left column */
  .ey-testg-left{ min-height: auto; }
  .ey-testg-title,
  .ey-testg-copy{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* bars/images shouldn’t force width */
  .ey-testg-bar{ width: 70% !important; max-width: 100% !important; }
  .ey-testg-phone{ width: min(92vw, 520px); }
}
/* Highlighted "Support" callout */
/* Replace your current .block-desc .support-callout rules with these */
.two-step-card.v2 .support-callout{
  display:block;
  margin:10px 0 0;
  padding:12px 14px;
  background:#eaf3ff;
  color:#0b4fbf;
  border-radius:12px;
  line-height:1.55;
  box-shadow: inset 0 0 0 1px rgba(11,79,191,.12);
  font-size: clamp(14px, 1.05vw, 18px);
}
.two-step-card.v2 .support-callout strong{ font-weight:700; }