.qrds-hero {
    --qrds-blue: #0066FF;
    --qrds-ink: #163b73;
    --qrds-muted: #4a5568;
    --qrds-soft: #8492a6;
    --qrds-green: #20b77a;
    padding: 120px 0 60px;
    background: linear-gradient(180deg,#faf5ff 0%,#f3f8ff 60%,#ffffff 100%);
    font-family: 'Roboto',Arial,sans-serif;
    overflow: hidden;
}

/* ---------- Text block ---------- */
.qrds-hero-text{margin:0 auto;text-align:center;}
.qrds-hero-text h1{
  margin:0 0 18px;
  font-size:clamp(30px,4.2vw,46px);
  line-height:1.15;font-weight:800;letter-spacing:-.5px;
  color:#0f1b33;
}
.qrds-hero-text p{
margin:0 auto 28px;
  font-size:18px;line-height:1.6;color:var(--qrds-muted);
}
.qrds-cta {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 10px;
    background: var(--qrds-blue);
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 10px 22px -10px rgba(0,102,255,.7);
    transition: background .2s ease;
}
.qrds-cta:hover{background:#4996ff;color:#fff;}
.qrds-cta:focus-visible{outline:3px solid #99c2ff;outline-offset:3px;}

/* ---------- Visual stage ---------- */
.qrds-stage {
    margin: 0 auto;
    padding-bottom: 30px;
}
.qrds-flow {
    position: relative;
    min-height: 420px;
    /* background: radial-gradient(circle at 15% 50%, rgba(60,140,255,.08), transparent 25%),
    radial-gradient(circle at 85% 50%, rgba(45,210,155,.09), transparent 25%); */
}
.qrds-glow{position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(70px);pointer-events:none;}
.qrds-glow-left{left:-100px;top:120px;background:rgba(60,140,255,.08);}
.qrds-glow-right{right:-100px;top:100px;background:rgba(30,210,150,.08);}

/* shared svg icon style */
.qrds-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* brand tiles */
.qrds-brand{
  position:absolute;top:50%;transform:translateY(-50%);
  width:175px;text-align:center;z-index:5;
}
.qrds-brand-qr{left:0;}
.qrds-brand-ds{right:0;}
.qrds-brand-icon{
  width:125px;height:125px;margin:0 auto 15px;border-radius:28px;
  background:rgba(255,255,255,.96);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 50px rgba(24,90,180,.12),0 0 0 1px rgba(20,90,180,.06);
  animation:qrdsFloat 4s ease-in-out infinite;
}
.qrds-brand-ds .qrds-brand-icon{box-shadow:0 20px 50px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.05);animation-delay:.6s;}
.qrds-brand-qr img{width:72px;height:72px;object-fit:contain;}
.qrds-brand-ds img{width:92px;max-height:82px;object-fit:contain;}
.qrds-brand-name{display:block;font-size:18px;font-weight:700;color:var(--qrds-ink);}
.qrds-brand-ds .qrds-brand-name{color:#202020;}
.qrds-brand-role{display:block;margin-top:4px;font-size:13px;color:var(--qrds-soft);}

/* flow line */
.qrds-line {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    background: linear-gradient(90deg,rgba(50,140,255,.05),#4b9cff,#38cfa2,rgba(56,207,162,.05));
    opacity: .65;
}
.qrds-dot{
  position:absolute;top:50%;left:0;width:10px;height:10px;border-radius:50%;
  background:#3295ff;box-shadow:0 0 18px rgba(50,149,255,.7);
  transform:translate(-50%,-50%);
  animation:qrdsMoveDot 4s linear infinite;
}

/* agreement cards (left stack) */
.qrds-workflow {
    position: absolute;
    left: 16%;
    top: 50%;
    width: 230px;
    height: 260px;
    transform: translateY(-50%);
    z-index: 3;
}
.qrds-card {
    /* position: absolute; */
    width: 230px;
    min-height: 64px;
    padding: 12px 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(20,80,150,.07);
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(30,80,140,.08);
    animation: qrdsCardFloat 4s ease-in-out infinite;
    margin-bottom: 10px;
}
.qrds-card-1{top:0;}
.qrds-card-2{top:78px;animation-delay:.5s;}
.qrds-card-3{top:170px;animation-delay:1s;}
.qrds-card-icon{
  flex:0 0 38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
}
.qrds-card-icon.blue{background:#e8f2ff;color:#3987e8;}
.qrds-card-icon.purple{background:#f1eaff;color:#8754d6;}
.qrds-card-icon.green{background:#e5faf1;color:#20ad76;}
.qrds-card strong{display:block;color:#183b6b;font-size:13px;font-weight:700;margin-bottom:3px;}
.qrds-card small{display:block;color:var(--qrds-soft);font-size:11px;}

/* central document */
.qrds-document {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 260px;
    min-height: 260px;
    box-sizing: border-box;
    transform: translate(-50%,-50%);
    padding: 22px;
    background: #fff;
    border: 1px solid rgba(35,110,190,.08);
    border-radius: 20px;
    box-shadow: 0 25px 70px rgba(35,90,160,.13),0 0 0 1px rgba(255,255,255,.8);
    z-index: 6;
    animation: qrdsDocFloat 4s ease-in-out infinite;
}
.qrds-doc-top{display:flex;align-items:center;gap:10px;color:#183d73;font-size:14px;}
.qrds-doc-top strong{font-weight:700;}
.qrds-doc-icon{flex:0 0 34px;height:34px;border-radius:8px;background:#e7f2ff;color:#3489ed;display:flex;align-items:center;justify-content:center;}
.qrds-doc-meta{margin-top:14px;font-size:11px;color:var(--qrds-soft);line-height:1.5;}
.qrds-doc-meta b{color:#314e72;font-weight:500;}
.qrds-lines{margin-top:12px;}
.qrds-lines span{display:block;height:7px;border-radius:10px;background:#edf1f6;margin-bottom:9px;}
.qrds-lines span:nth-child(1){width:100%;}
.qrds-lines span:nth-child(2){width:85%;}
.qrds-lines span:nth-child(3){width:65%;}
.qrds-signature{
  margin-top:14px;padding:10px 12px;border:1px solid #e9edf2;border-radius:10px;
  display:flex;justify-content:space-between;align-items:center;
}
.qrds-signature span{font-family:'Brush Script MT','Segoe Script',cursive;font-size:20px;color:#314e72;}
.qrds-check{width:21px;height:21px;border-radius:50%;background:var(--qrds-green);color:#fff;display:flex;align-items:center;justify-content:center;}
.qrds-check .qrds-ico{width:12px;height:12px;stroke-width:3;}
.qrds-status-row{display:flex;gap:6px;margin-top:14px;justify-content:center;}
.qrds-status-row span{font-size:10px;font-weight:500;padding:5px 8px;border-radius:20px;background:#f1f4f9;color:var(--qrds-soft);}
.qrds-status-row span.is-done{background:#e8faf2;color:#159866;font-weight:700;}

/* sync node */
.qrds-sync{
  position:absolute;left:66%;top:50%;width:58px;height:58px;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(255,255,255,.96);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 35px rgba(30,100,130,.12);z-index:7;
  animation:qrdsSyncPulse 2.5s ease-in-out infinite;
}
.qrds-sync-inner{width:40px;height:40px;border-radius:50%;background:#e9fbf5;color:#1db27a;display:flex;align-items:center;justify-content:center;}
.qrds-sync-inner .qrds-ico {
    width: 20px;
    height: 20px;
    animation: rotateRing 8s linear infinite;
}
@keyframes rotateRing {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/* signed notification */
.qrds-signed-card{
  position:absolute;right:17%;top:15%;
  display:flex;align-items:center;gap:10px;padding:13px 18px;
  background:rgba(255,255,255,.97);border-radius:14px;
  box-shadow:0 15px 40px rgba(20,100,90,.10);z-index:8;
  animation:qrdsAppear 1s ease both, qrdsFloatSm 4s ease-in-out 1s infinite;
}
.qrds-success{flex:0 0 32px;height:32px;border-radius:50%;background:var(--qrds-green);color:#fff;display:flex;align-items:center;justify-content:center;}
.qrds-success .qrds-ico{stroke-width:3;width:16px;height:16px;}
.qrds-signed-card strong{display:block;color:#183d67;font-size:13px;font-weight:700;}
.qrds-signed-card small{display:block;margin-top:3px;color:var(--qrds-soft);font-size:11px;}

/* Salesforce account card */
.qrds-account-card{
  position:absolute;left:62%;bottom:2%;width:250px;box-sizing:border-box;padding:15px;
  background:rgba(255,255,255,.97);border-radius:15px;
  box-shadow:0 15px 40px rgba(30,90,150,.08);z-index:5;
  animation:qrdsFloatSm 4s ease-in-out .8s infinite;
}
.qrds-account-head{display:flex;align-items:center;gap:9px;color:#183d67;font-size:13px;}
.qrds-account-head strong{font-weight:700;}
.qrds-cloud{color:#168bea;display:flex;}
.qrds-cloud .qrds-ico{width:22px;height:22px;}
.qrds-account-sub{margin:8px 0 12px;font-size:11px;color:var(--qrds-soft);}
.qrds-attached{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:20px;
  background:#e8faf2;color:#159866;font-size:11px;font-weight:700;
}
.qrds-attached i{width:15px;height:15px;border-radius:50%;background:var(--qrds-green);color:#fff;display:inline-flex;align-items:center;justify-content:center;}
.qrds-attached .qrds-ico{width:9px;height:9px;stroke-width:3.5;}

/* ----------  TRUST POINTS ---------- */
.qr-docusign-trust {
    width: min(900px, calc(100% - 40px));
    margin: -5px auto 0;
    padding: 19px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    color: #667990;
    font-size: 15px;
}
.qr-docusign-trust > div {
    display: flex;
    align-items: center;
    gap: 7px;
}
.qr-docusign-trust span {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8faf2;
    color: #19a66e;
    font-size: 15px;
    font-weight: 800;
}

/* ----------  TRUST POINTS ---------- */
.qrds-match {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 5px 10px;
    border-radius: 20px;
    background: #e8faf2;
    color: #159866;
    font-size: 11px;
    font-weight: 700;
}
.qrds-metrics {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.qrds-metrics li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid #f1f4fa;
    font-size: 12px;
    color: var(--qrds-soft);
}
.qrds-metrics b {
    font-size: 13px;
    font-weight: 700;
    color: #183b6b;
}
.qrds-bar-label {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 10px;
    color: var(--qrds-soft);
}
.qrds-bar-label {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 10px;
    color: var(--qrds-soft);
}
.qrds-bar {
    height: 7px;
    border-radius: 10px;
    background: #edf1f6;
    margin-top: 5px;
    overflow: hidden;
}
.qrds-bar span {
    display: block;
    height: 100%;
    width: 83%;
    border-radius: 10px;
    background: linear-gradient(90deg,#4b9cff,#f59e0b);
}
.qrds-risk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    padding: 9px 11px;
    border: 1px solid #fde7c7;
    border-radius: 10px;
    background: #fffaf1;
}
.qrds-risk small {
    font-size: 11px;
    color: #8a5a12;
}
.qrds-risk strong {
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
    padding: 3px 8px;
    border-radius: 20px;
    background: #fff1d6;
}
.qrds-report-row {
    display: block;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #e3ecfb;
    border-radius: 10px;
    background: #f7faff;
}
.qrds-doc-meta .qrds-amt {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 700;
    color: #183b6b;
}
.qrds-remit {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #f1f4fa;
}
.qrds-remit li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #f1f4fa;
    font-size: 11px;
    color: #314e72;
}
.qrds-remit li span:first-child {
    font-weight: 500;
}
.qrds-remit li span:nth-child(2) {
    font-weight: 700;
    color: #183b6b;
}
.qrds-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 20px;
    white-space: nowrap;
}
.qrds-tag.ok {
    background: #e8faf2;
    color: #159866;
}
.qrds-tag.review {
    background: #fff1d6;
    color: #b45309;
}
.qrds-deduct {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #fde7c7;
    border-radius: 10px;
    background: #fffaf1;
    font-size: 10px;
    color: #8a5a12;
    line-height: 1.45;
}
.qrds-deduct b {
    color: #b45309;
    font-weight: 700;
}
.qrds-balance {
    display: block;
    margin-top: 2px;
    font-size: 18px;
    font-weight: 800;
    color: #183b6b;
    letter-spacing: -.2px;
}
.qrds-synced {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 10px;
    font-weight: 500;
    color: #159866;
}
.qrds-synced::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--qrds-green);
}
.qrds-inv {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #f1f4fa;
}
.qrds-inv li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    margin: 0 -6px;
    border-bottom: 1px solid #f1f4fa;
    border-radius: 8px;
    font-size: 11px;
    color: #314e72;
}
.qrds-inv li span:first-child {
    font-weight: 500;
}
.qrds-inv li span:nth-child(2) {
    font-weight: 700;
    color: #183b6b;
}
.qrds-pill.overdue {
    background: #fdecea;
    color: #c2410c;
}
.qrds-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 20px;
    white-space: nowrap;
}
.qrds-inv li.is-paid {
    animation: qrdsPaidFlash 4s ease-in-out infinite;
}
.qrds-inv li.is-paid span:first-child, .qrds-inv li.is-paid span:nth-child(2) {
    color: #a0aec0;
    text-decoration: line-through;
}
.qrds-inv li.is-paid span:first-child, .qrds-inv li.is-paid span:nth-child(2) {
    color: #a0aec0;
    text-decoration: line-through;
}
.qrds-pill.paid {
    background: #e8faf2;
    color: #159866;
}
.qrds-memo {
    margin-top: 10px;
    font-size: 10px;
    color: var(--qrds-soft);
}
.qrds-memo b {
    color: #314e72;
    font-weight: 500;
}
.qrds-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    background: #e8f0ff;
    color: #0047b3;
    font-size: 10px;
    font-weight: 700;
}
.qrds-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qrds-blue);
    animation: qrdsLive 1.4s ease-in-out infinite;
}
/* voice waveform: the page-specific motion */
.qrds-wave{
  display:flex;align-items:center;justify-content:center;gap:4px;
  height:40px;margin:14px 0 4px;padding:0 6px;
  border-radius:10px;background:#f5f8ff;
}
.qrds-wave span{
  display:block;width:4px;height:10px;border-radius:4px;
  background:linear-gradient(180deg,#4b9cff,#38cfa2);
  animation:qrdsWave 1.1s ease-in-out infinite;
}
.qrds-wave span:nth-child(2){animation-delay:.1s;}
.qrds-wave span:nth-child(3){animation-delay:.2s;}
.qrds-wave span:nth-child(4){animation-delay:.3s;}
.qrds-wave span:nth-child(5){animation-delay:.4s;}
.qrds-wave span:nth-child(6){animation-delay:.3s;}
.qrds-wave span:nth-child(7){animation-delay:.2s;}
.qrds-wave span:nth-child(8){animation-delay:.1s;}
.qrds-wave span:nth-child(9){animation-delay:0s;}
.qrds-wave span:nth-child(10){animation-delay:.15s;}
.qrds-wave span:nth-child(11){animation-delay:.25s;}
.qrds-wave span:nth-child(12){animation-delay:.35s;}
@keyframes qrdsWave{0%,100%{height:8px;}50%{height:28px;}}
.qrds-call-rows{margin:10px 0 0;padding:0;list-style:none;}
.qrds-call-rows li{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:6px 0;border-bottom:1px solid #f1f4fa;font-size:11px;color:var(--qrds-soft);
}
.qrds-call-rows li:last-child{border-bottom:0;}
.qrds-call-rows b{font-size:12px;font-weight:700;color:#183b6b;}
.qrds-call-rows b.is-due{color:#c2410c;}
.qrds-outcome {
    display: block;
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid #d9f2e6;
    border-radius: 10px;
    background: #f4fcf8;
}
.qrds-outcome small {
    font-size: 11px;
    color: #1f6f4f;
    display: block;
}
.qrds-outcome strong{font-size:11px;font-weight:700;color:#159866;padding:3px 8px;border-radius:20px;background:#e1f7ec;}
.qrds-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.qrds-stats div{padding:8px 6px;border-radius:10px;background:#f5f8fc;text-align:center;}
.qrds-stats b{display:block;font-size:16px;font-weight:800;color:#183b6b;}
.qrds-stats small{display:block;margin-top:2px;font-size:9px;color:var(--qrds-soft);line-height:1.3;}
@media (max-width:1100px){ .qrds-wave span{animation-duration:1.4s;} }

/* delta load progress: the page-specific motion */
.qrds-load-label{display:flex;justify-content:space-between;margin-top:12px;font-size:10px;color:var(--qrds-soft);}
.qrds-load-label b{color:#159866;font-weight:700;}
.qrds-load{height:7px;margin-top:5px;border-radius:10px;background:#edf1f6;overflow:hidden;}
.qrds-load span{
  display:block;height:100%;width:100%;border-radius:10px;
  background:linear-gradient(90deg,#4b9cff,#38cfa2);
  transform-origin:left center;
  animation:qrdsLoad 4s ease-in-out infinite;
}
@keyframes qrdsLoad{0%{transform:scaleX(0);}55%,100%{transform:scaleX(1);}}

.qrds-delta{margin:12px 0 0;padding:0;list-style:none;}
.qrds-delta li{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 0;border-bottom:1px solid #f1f4fa;font-size:11px;color:#314e72;
}
.qrds-delta li:last-child{border-bottom:0;}
.qrds-delta b{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;background:#e8f0ff;color:#0047b3;}

.qrds-ledger{
  margin-top:10px;padding:10px 11px;border:1px solid #d9f2e6;border-radius:10px;background:#f4fcf8;
}
.qrds-ledger-row{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--qrds-soft);}
.qrds-ledger-row + .qrds-ledger-row{margin-top:5px;}
.qrds-ledger-row b{font-size:12px;font-weight:700;color:#183b6b;}
.qrds-ledger-ok{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;font-weight:700;color:#159866;}
.qrds-ledger-ok i{width:15px;height:15px;border-radius:50%;background:var(--qrds-green);color:#fff;display:inline-flex;align-items:center;justify-content:center;}
.qrds-ledger-ok .qrds-ico{width:9px;height:9px;stroke-width:3.5;}

/* ===================== BLOCK 2: STRIPE ADDITIONS ===================== */
/* .qrds-hero--stripe .qrds-document{width:262px;} */
.qrds-pay-list{margin:14px 0 0;padding:0;list-style:none;}
.qrds-pay-list li{
  padding:9px 10px;margin-bottom:8px;border:1px solid #edf1f8;border-radius:12px;background:#fbfcfe;
}
.qrds-pay-list li:last-child{margin-bottom:0;}
.qrds-pay-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.qrds-pay-top b{font-size:13px;font-weight:700;color:#183b6b;}
.qrds-pay-top span{font-size:10px;color:var(--qrds-soft);}
.qrds-pay-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:5px;font-size:11px;color:#314e72;}
.qrds-pay-bottom small{font-size:10px;color:var(--qrds-soft);}
.qrds-stat{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;}
.qrds-stat.paid{background:#e8faf2;color:#159866;}
.qrds-stat.partial{background:#e8f0ff;color:#0047b3;}
.qrds-stat.refund{background:#fff1d6;color:#b45309;}

/* newest payment slides in: the page-specific motion */
.qrds-pay-list li.is-new{animation:qrdsPayIn 5s ease-in-out infinite;}
@keyframes qrdsPayIn{
  0%{opacity:0;transform:translateY(-8px);background:#e8faf2;border-color:#bfe9d4;}
  10%{opacity:1;transform:translateY(0);}
  45%{background:#e8faf2;border-color:#bfe9d4;}
  70%,100%{opacity:1;background:#fbfcfe;border-color:#edf1f8;}
}


.qrds-report-row small {
    font-size: 11px;
    color: #40608f;
    display: block;
}
.qrds-report-row strong {
    font-size: 11px;
    font-weight: 700;
    color: #0047b3;
    padding: 3px 8px;
    border-radius: 20px;
    background: #e5eeff;
}
.qrds-metrics b.is-due {
    color: #c2410c;
}
.qrds-decision {
    margin-top: 12px;
    padding: 10px 11px;
    border: 1px solid #d9f2e6;
    border-radius: 10px;
    background: #f4fcf8;
}
.qrds-decision-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    color: var(--qrds-soft);
}
.qrds-decision-row b {
    font-size: 12px;
    font-weight: 700;
    color: #183b6b;
}
.qrds-decision-row s {
    color: #a0aec0;
    font-weight: 500;
}
.qrds-decision-row + .qrds-decision-row {
    margin-top: 6px;
}
.qrds-decision-row b.is-approved {
    color: #159866;
}
.qrds-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.qrds-chip-row span {
    font-size: 10px;
    font-weight: 500;
    padding: 5px 9px;
    border-radius: 20px;
    background: #f1f4f9;
    color: #4a5568;
}


/* ---------- Animations ---------- */
@keyframes qrdsFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes qrdsFloatSm{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes qrdsDocFloat{0%,100%{transform:translate(-50%,-50%);}50%{transform:translate(-50%,calc(-50% - 7px));}}
@keyframes qrdsCardFloat{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}
@keyframes qrdsSyncPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 12px 35px rgba(30,100,130,.12);}
  50%{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 12px 45px rgba(30,180,140,.20),0 0 0 8px rgba(30,180,140,.05);}
}
@keyframes qrdsMoveDot{0%{left:0%;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{left:100%;opacity:0;}}
@keyframes qrdsAppear{0%{opacity:0;transform:translateY(-10px) scale(.95);}100%{opacity:1;transform:translateY(0) scale(1);}}

/* ---------- Tablet: switch to a stacked grid (no absolute overlap) ---------- */
@media (max-width:1200px){
  .qrds-flow{
    min-height:0;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    grid-template-areas:
      "qr doc ds"
      "cards cards cards"
      "acct acct acct";
    align-items:center;
    gap:28px 24px;
    padding:30px 0 20px;
  }
  .qrds-glow,.qrds-line,.qrds-sync,.qrds-signed-card{display:none;}
  .qrds-brand,.qrds-workflow,.qrds-card,.qrds-document,.qrds-account-card{position:static;transform:none;}
  .qrds-brand{width:auto;justify-self:center;}
  .qrds-brand-qr{grid-area:qr;}
  .qrds-brand-ds{grid-area:ds;}
  .qrds-document{grid-area:doc;animation-name:qrdsFloatSm;}
  .qrds-workflow{
    grid-area:cards;width:auto;height:auto;
    display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  }
  .qrds-card{animation:none;}
  .qrds-account-card{grid-area:acct;justify-self:center;}
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
.qrds-hero {
    padding: 100px 0 30px;
}
.qrds-hero-text p{font-size:16px;}
.qrds-flow{
grid-template-columns:1fr 1fr;
grid-template-areas:
    "qr ds"
    "doc doc"
    "cards cards"
    "acct acct";
gap:22px 12px;
}
.qrds-brand-icon{width:84px;height:84px;border-radius:20px;margin-bottom:8px;}
.qrds-brand-qr img{width:48px;height:48px;}
.qrds-brand-ds img{width:62px;}
.qrds-brand-name{font-size:15px;}
.qrds-brand-role{font-size:12px;}
.qrds-document{justify-self:center;}
.qrds-workflow{flex-direction:column;align-items:center;}
.qrds-card{width:100%;max-width:300px;}
.qr-docusign-trust {
flex-direction: column;
gap: 12px;
text-align: center;

}

}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  .qrds-flow *,.qrds-flow *::before,.qrds-flow *::after{animation:none !important;transition:none !important;}
}