/* Scoped fallback styling ONLY (the component's own UI is in its shadow DOM). */
recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro{
  width:100%;
  max-width:100%;
  margin:0;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  overflow-x:clip;
  background:transparent;
  padding-block:clamp(28px, 4vw, 56px);
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(59,130,246,.30) 0, transparent 54%),
    radial-gradient(820px 460px at 90% 18%, rgba(236,72,153,.22) 0, transparent 54%),
    radial-gradient(900px 520px at 20% 95%, rgba(34,197,94,.18) 0, transparent 56%),
    radial-gradient(860px 480px at 92% 88%, rgba(251,146,60,.16) 0, transparent 58%),
    radial-gradient(760px 440px at 55% 40%, rgba(168,85,247,.18) 0, transparent 60%),
    linear-gradient(180deg,#f6fbff 0%,#ffffff 100%);
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(148,163,184,.13) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(to bottom, rgba(148,163,184,.13) 1px, transparent 1px) 0 0/28px 28px;
  mask-image: radial-gradient(1200px 900px at 60% -10%, black 50%, transparent 85%);
  opacity:1;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro > *{
  position:relative;
  z-index:1;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro :where(*, *::before, *::after){
  box-sizing:border-box;
}

/* Critical: allow shrink everywhere to prevent horizontal overflow. */
recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro :where(
  .srs-container, .srs-inner, .srs-layout, .srs-content, .srs-right,
  .srs-shot, .srs-trustedBox, .srs-card, .srs-row, .srs-rowText,
  .srs-what, .srs-actions, .srs-action, .srs-actionText,
  .srs-previewCard, .srs-previewHead, .srs-previewTable, .srs-previewRow,
  .srs-previewLabel, .srs-previewValue, .srs-previewBtns,
  .srs-btn, .srs-chip, .srs-lock, .srs-previewTitle,
  .srs-lockIcon, .srs-lockText
){
  min-width:0;
  max-width:100%;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro :where(h1,h2,h3,p,li,a,div,span){
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
}

/* Hard tokens (email/URLs) */
recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro :where(a){
  overflow-wrap:anywhere;
  word-break:break-word;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-container{
  max-width:1240px;
  margin:0 auto;
  padding:0 clamp(16px, 2.4vw, 28px);
}

/* Container query anchor (for builder ultra-narrow columns) */
recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-inner{
  max-width:1100px;
  margin:0 auto;
  border-radius:26px;
  border:1px solid rgba(148,163,184,.26);
  box-shadow:0 34px 70px rgba(2,6,23,.12), 0 5px 14px rgba(2,6,23,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.62));
  backdrop-filter:saturate(160%) blur(12px);
  padding:clamp(22px, 2.6vw, 38px);

  container-type:inline-size;
  container-name:srsRecipientReqInner;
}

/* Desktop: 2 columns */
recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px, clamp(320px, 34vw, 560px));
  gap:clamp(16px, 3vw, 34px);
  align-items:center;
}

/* left */
recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-kicker{
  margin:0 0 10px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#0b1220;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg,#22d3ee,#8b5cf6);
  box-shadow:0 0 0 4px rgba(34,211,238,.16);
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-title{
  margin:6px 0 6px;
  font-size:clamp(28px, 3.2vw, 44px);
  line-height:1.05;
  letter-spacing:-.02em;
  font-weight:900;
  color:#0b1220;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-grad{
  background:linear-gradient(90deg,#2563eb 0%,#8b5cf6 45%,#10b981 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-subtitle{
  margin:0;
  font-size:15px;
  line-height:1.55;
  color:#475569;
  max-width:78ch;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-what{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid rgba(148,163,184,.20);
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-h3{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.25;
  font-weight:900;
  color:#0b1220;
}

/* steps: 2x2 desktop */
recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
  max-width:100%;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-action{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(148,163,184,.24);
  box-shadow:0 14px 30px rgba(2,6,23,.06);
  overflow:hidden;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-actionIcon{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:2px;
  border-radius:7px;
  background:linear-gradient(135deg,#22c55e,#3b82f6,#a855f7);
  box-shadow:0 0 0 4px rgba(59,130,246,.14);
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-actionText{
  color:#334155;
  font-size:13px;
  line-height:1.45;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* right */
recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-right{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:14px;
  min-width:0;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-shot{
  margin:0;
  justify-self:end;
  width:100%;
  max-width:420px;
}

/* preview card */
recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewCard{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.28);
  box-shadow:0 22px 50px rgba(2,6,23,.10);
  background:linear-gradient(135deg, rgba(59,130,246,.16), rgba(236,72,153,.12), rgba(34,197,94,.10), rgba(251,146,60,.10));
  padding:10px;

  container-type:inline-size;
  container-name:srsRecipientReqPreview;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewHead{
  border-radius:14px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(148,163,184,.22);
  padding:10px 12px;
  font-weight:900;
  color:#0b1220;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  overflow:hidden;
  min-width:0;
  max-width:100%;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewTitle{
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
  line-height:1.05;
}

/* chip */
recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-chip{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;

  background:#fff;
  color:#0b1220;
  border-radius:10px;
  padding:4px 8px;
  font-weight:900;
  font-size:12px;
  line-height:1;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewTable{
  margin-top:10px;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(148,163,184,.22);
  padding:12px;
  display:grid;
  gap:8px;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewRow{
  display:grid;
  grid-template-columns:minmax(0,170px) minmax(0,1fr);
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(226,232,240,.80);
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewLabel{
  font-weight:900;
  color:#0f172a;
  font-size:13px;
  line-height:1.4;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewValue{
  font-weight:700;
  color:#475569;
  font-size:13px;
  line-height:1.5;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* LOCK: default = icon above; desktop = text + icon inline (icon right) */
recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-lock{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  max-width:100%;
  min-width:0;

  background:#fde68a;
  border:1px solid #f59e0b;
  color:#7c2d12;
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
  font-size:12px;
  line-height:1;
  text-align:center;

  white-space:normal;
  overflow:visible;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-lockIcon{
  display:block;
  line-height:1;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-lockText{
  display:block;
  line-height:1;
  white-space:nowrap;
  overflow:visible;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewBtns{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  padding:12px;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(148,163,184,.22);
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;

  padding:9px 12px;
  border-radius:12px;
  font-size:13px;
  line-height:1;
  font-weight:900;
  color:#fff;
  background:#2563eb;
  border:1px solid rgba(2,6,23,.10);
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-btn--warn{
  background:#f59e0b;
  border-color:#d97706;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-btn--ok{
  background:#10b981;
  border-color:#059669;
}

/* trusted box */
recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-trustedBox{
  container-type:inline-size;
  container-name:srsRecipientReqIntro;
  align-self:end;
  justify-self:end;
  width:100%;
  max-width:560px;
}

/* list reset (works whether .srs-card is div or ul) */
recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-card{
  margin:0;
  list-style:none;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-card{
  border-radius:20px;
  padding:18px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.64));
  border:1px solid rgba(148,163,184,.28);
  box-shadow:0 26px 56px rgba(2,6,23,.10);
  display:grid;
  gap:12px;
  text-align:left;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-row{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-badge{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  background:linear-gradient(135deg,#2563eb,#8b5cf6);
  box-shadow:0 14px 26px rgba(2,6,23,.10);
  flex:0 0 auto;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-h{
  margin:2px 0 2px;
  font-weight:900;
  color:#0b1220;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-p{
  margin:0;
  font-size:13px;
  color:#334155;
  line-height:1.45;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
}

recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-noscript{
  margin:14px 0 0;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(148,163,184,.24);
  color:#475569;
  font-size:13px;
  line-height:1.45;
}

/* Responsive + container overrides (kept, deduped) */
@media (max-width:1100px){
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-layout{
    grid-template-columns:1fr;
    align-items:start;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-shot{
    justify-self:center;
    max-width:520px;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-right{
    grid-template-rows:auto auto;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-trustedBox{
    justify-self:center;
    margin:14px auto 0;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-card{
    text-align:center;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-row{
    justify-content:center;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-rowText{
    text-align:center;
  }
}

@media (max-width:520px){
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-actions{
    grid-template-columns:1fr;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-action{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-actionText{
    text-align:center;
    width:100%;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewRow{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }

  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro{
    padding-block:22px;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-inner{
    padding:18px;
    border-radius:22px;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-title{
    font-size:clamp(24px, 7vw, 32px);
    line-height:1.08;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-subtitle{
    font-size:14px;
    line-height:1.6;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-shot{
    max-width:100%;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewBtns{
    flex-direction:column;
    align-items:stretch;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-btn{
    width:100%;
    padding:12px 14px;
    font-size:14px;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewTable{
    padding:10px;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewRow{
    padding:8px 10px;
    gap:8px;
  }
}

@media (min-width:521px){
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-lock{
    flex-direction:row;
    gap:6px;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-lockText{ order:1; }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-lockIcon{ order:2; }
}

@supports (container-type:inline-size){
  @container srsRecipientReqInner (max-width: 980px){
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-layout{
      grid-template-columns:1fr;
      align-items:start;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-right{
      justify-items:stretch;
      grid-template-rows:auto auto;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-shot{
      justify-self:stretch;
      max-width:100%;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-trustedBox{
      justify-self:center;
      margin:14px auto 0;
    }
  }

  @container srsRecipientReqPreview (max-width: 380px){
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewRow{
      grid-template-columns:1fr;
      justify-items:center;
      text-align:center;
    }
  }

  @container srsRecipientReqPreview (max-width: 360px){
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewBtns{
      flex-direction:column;
      align-items:stretch;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-btn{
      width:100%;
    }
  }

  @container srsRecipientReqIntro (max-width:360px){
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-card{ text-align:center; }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-row{
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:10px;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-rowText{ text-align:center; }
  }

  @container srsRecipientReqInner (max-width: 200px){
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-inner{
      padding:12px;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-kicker{
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      gap:10px;
      width:100%;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-title{
      font-size:18px;
      line-height:1.15;
      letter-spacing:-.01em;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-subtitle{
      font-size:12px;
      line-height:1.45;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewTable{
      padding:10px;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewBtns{
      padding:10px;
      gap:8px;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-btn{
      font-size:12px;
      padding:9px 10px;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-card{
      padding:12px;
      gap:10px;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-h{
      font-size:14px;
      line-height:1.2;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-p{
      font-size:12px;
      line-height:1.45;
    }
  }

  @container srsRecipientReqPreview (max-width: 200px){
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewCard{
      padding:8px;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewHead{
      padding:10px;
      justify-content:center;
      text-align:center;
      flex-direction:column;
      align-items:center;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-chip{
      font-size:11px;
      padding:4px 6px;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewRow{
      padding:8px;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewLabel{
      font-size:12px;
      line-height:1.25;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-previewValue{
      font-size:12px;
      line-height:1.45;
      display:flex;
      justify-content:center;
      align-items:center;
      text-align:center;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-lock{
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:6px 8px;
    }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-lockIcon{ order:1; }
    recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro .srs-lockText{
      order:2;
      white-space:normal;
    }
  }
}

/* Reduced motion (clean cascade, no !important) */
@media (prefers-reduced-motion: reduce){
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro{
    scroll-behavior:auto;
  }
  recipient-request-example > .srs-seo-fallback.srs-recipientReqIntro :where(*, *::before, *::after){
    animation:none;
    transition:none;
    scroll-behavior:auto;
  }
}