/* ==============================================================
   DREAM PAYOUTS SIGNATURE IDENTITY — STEP 1 / 97+ REFINEMENT
   A distinctive layer applied across the existing design system.
   ============================================================== */
:root{
  --dream-cobalt:#155EEF;
  --dream-electric:#4B7BFF;
  --dream-midnight:#06162F;
  --dream-ink:#0B1D3A;
  --dream-sky:#EAF2FF;
  --dream-ice:#F5F9FF;
  --dream-mint:#22C58B;
  --dream-thread:linear-gradient(90deg,#155EEF 0%,#4B7BFF 58%,#22C58B 100%);
  --dream-halo:0 0 0 5px rgba(21,94,239,.08),0 12px 34px rgba(8,41,99,.13);
}

/* 1. DREAM SIGNAL — compact, recognizable category marker */
.eyebrow{
  position:relative;
  isolation:isolate;
  border:1px solid rgba(21,94,239,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(234,242,255,.92));
  box-shadow:0 7px 22px rgba(12,53,120,.055),inset 0 1px 0 #fff;
  color:#174FCF;
  padding-left:31px;
}
.eyebrow::before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  width:8px;
  height:8px;
  transform:translateY(-50%) rotate(45deg);
  border-radius:2px;
  background:var(--dream-cobalt);
  box-shadow:0 0 0 5px rgba(21,94,239,.09);
}
.eyebrow::after{
  content:"";
  position:absolute;
  left:15px;
  top:50%;
  width:2px;
  height:2px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#fff;
}
.eyebrow > svg{display:none}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.kicker::before{
  content:"";
  width:7px;height:7px;border-radius:2px;
  transform:rotate(45deg);
  background:var(--dream-cobalt);
  box-shadow:0 0 0 4px rgba(21,94,239,.08);
}

/* 2. DREAM SWEEP — the transformation underline */
.blue,.blue-text,.dream-sweep{
  color:var(--dream-cobalt)!important;
  position:relative;
  display:inline;
  text-decoration:none;
  white-space:normal;
}
.blue::after,.blue-text::after,.dream-sweep::after{
  content:"";
  position:absolute;
  left:1%;right:-1%;bottom:-.12em;
  height:.17em;
  min-height:5px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 28' preserveAspectRatio='none'%3E%3Cpath d='M5 20 C95 5 290 4 395 17' fill='none' stroke='%23155EEF' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M26 22 C126 12 302 11 374 18' fill='none' stroke='%234B7BFF' stroke-width='2.5' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E");
  transform:none;
  border-radius:0;
  opacity:1;
  pointer-events:none;
}

/* 3. DREAM GLYPH — squircle + signal node, never generic circles */
.benefit-icon,.trust-icon,.icon-box,.rail-icon,.mail-icon,.recipient-icon,.choice-ic{
  position:relative;
  border-radius:15px!important;
  background:linear-gradient(145deg,#fff 0%,var(--dream-sky) 100%)!important;
  border:1px solid rgba(21,94,239,.12);
  color:var(--dream-cobalt)!important;
  box-shadow:0 9px 24px rgba(14,55,119,.07),inset 0 1px 0 #fff;
}
.benefit-icon::after,.trust-icon::after,.icon-box::after,.rail-icon::after,.mail-icon::after,.recipient-icon::after{
  content:"";
  position:absolute;
  right:-3px;
  top:-3px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--dream-cobalt);
  border:3px solid #fff;
  box-shadow:0 0 0 2px rgba(21,94,239,.10);
}

/* 4. DREAM THREAD — email-to-delivery pathway */
.dream-thread{
  position:absolute;
  right:1%;
  bottom:7px;
  width:48%;
  height:112px;
  z-index:4;
  pointer-events:none;
  overflow:visible;
  filter:drop-shadow(0 6px 12px rgba(21,94,239,.12));
}
.dream-thread .thread-base{
  fill:none;
  stroke:rgba(21,94,239,.20);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:5 7;
}
.dream-thread .thread-live{
  fill:none;
  stroke:url(#dreamThreadGradient);
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-dasharray:80 420;
  animation:dreamThreadTravel 4.2s ease-in-out infinite;
}
.dream-thread .thread-node{
  fill:#fff;
  stroke:var(--dream-cobalt);
  stroke-width:2;
}
.dream-thread .thread-node.end{stroke:var(--dream-mint);fill:#eafff7}
.dream-thread .thread-pulse{
  fill:var(--dream-cobalt);
  transform-box:fill-box;
  transform-origin:center;
  animation:dreamNodePulse 2.1s ease-in-out infinite;
}
.dream-thread .thread-pulse.end{fill:var(--dream-mint);animation-delay:.9s}
@keyframes dreamThreadTravel{0%{stroke-dashoffset:520;opacity:.2}20%{opacity:1}80%{opacity:1}100%{stroke-dashoffset:0;opacity:.25}}
@keyframes dreamNodePulse{0%,100%{transform:scale(.7);opacity:.45}50%{transform:scale(1.25);opacity:1}}

/* Product surfaces carry a quiet identity line, not another gradient card */
.product-card,.product-window,.mini-ui,.platform-ui{
  border-color:rgba(21,94,239,.14)!important;
}
.product-card::before,.product-window::before,.mini-ui::before{
  content:"";
  position:absolute;
  left:18px;right:18px;top:0;
  height:2px;
  background:var(--dream-thread);
  border-radius:0 0 99px 99px;
  opacity:.78;
  z-index:2;
  pointer-events:none;
}
.product-card,.product-window,.mini-ui{position:relative}
.sender-card{box-shadow:0 26px 70px rgba(6,22,47,.17),0 0 0 6px rgba(21,94,239,.035)!important}
.recipient-card{box-shadow:0 22px 64px rgba(6,22,47,.14),0 0 0 6px rgba(75,123,255,.035)!important}

/* 5. DREAM STATUS LANGUAGE */
.status-badge,.status,.mini-status,.delivery-chip{
  letter-spacing:-.01em;
}
.status-badge,.delivery-chip{
  box-shadow:var(--dream-halo);
}
.status-stage{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:850;
  border:1px solid rgba(21,94,239,.14);
  background:#fff;
  color:var(--dream-ink);
}
.status-stage::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dream-cobalt);box-shadow:0 0 0 4px rgba(21,94,239,.10)}
.status-stage.accepted::before{background:var(--dream-electric)}
.status-stage.routing::before{background:#6c7fa2;animation:dreamNodePulse 1.5s ease-in-out infinite}
.status-stage.delivered{color:#08764b;background:#effdf7;border-color:#bcefd9}
.status-stage.delivered::before{background:var(--dream-mint);box-shadow:0 0 0 4px rgba(34,197,139,.11)}
.status.good,.delivered{color:#078150!important}
.status.wait{color:var(--dream-cobalt)!important}
.delivery-chip{background:var(--dream-midnight)!important}
.delivery-chip span{background:var(--dream-cobalt)!important}
.delivery-chip.is-delivered span{background:var(--dream-mint)!important}
.delivery-chip.is-delivered{box-shadow:0 0 0 5px rgba(34,197,139,.08),0 12px 34px rgba(8,41,99,.13)}

/* Signature controls */
.btn-primary{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--dream-cobalt),#0A4EDB)!important;
  box-shadow:0 13px 28px rgba(21,94,239,.24),inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.btn-primary::before{
  content:"";
  position:absolute;
  top:-120%;left:-35%;
  width:30%;height:330%;
  transform:rotate(24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transition:transform .5s ease;
}
.btn-primary:hover::before{transform:translateX(420%) rotate(24deg)}
.brand{position:relative}
.brand::after{
  content:"";
  position:absolute;
  left:34px;top:1px;
  width:7px;height:7px;border-radius:50%;
  background:var(--dream-mint);
  border:2px solid #fff;
  box-shadow:0 0 0 3px rgba(34,197,139,.10);
}

/* Signature section transitions: very subtle thread at section edge */
.section.rule,.rule{
  position:relative;
}
.section.rule::before,.rule::before{
  content:"";
  position:absolute;
  left:50%;top:-1px;
  width:min(320px,42vw);height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--dream-cobalt),var(--dream-electric),transparent);
  opacity:.28;
}

/* Signature showcase page */
.signature-hero{padding:78px 0 48px;background:linear-gradient(120deg,#fff 0%,#f7faff 58%,#edf4ff 100%);overflow:hidden}
.signature-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:58px;align-items:center}
.signature-title{font-size:clamp(48px,6vw,80px);max-width:820px}
.signature-demo{min-height:390px;border-radius:28px;background:var(--dream-midnight);position:relative;overflow:hidden;padding:34px;color:#fff;box-shadow:0 35px 90px rgba(6,22,47,.22)}
.signature-demo::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 75% 20%,rgba(75,123,255,.42),transparent 40%),radial-gradient(circle at 15% 100%,rgba(34,197,139,.18),transparent 38%)}
.signature-demo>*{position:relative;z-index:1}
.signature-demo h3{font-size:29px;max-width:420px}
.signature-demo p{color:#c8d8ef;max-width:420px}
.signature-flow-card{margin-top:36px;background:#fff;color:var(--dream-ink);padding:18px;border-radius:18px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center}
.signature-flow-card .stage{padding:12px;border-radius:12px;background:var(--dream-ice);font-size:12px;font-weight:850;text-align:center}
.signature-flow-card .arrow{color:#7d9ed7}
.signature-board{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.signature-card{padding:28px;border:1px solid rgba(21,94,239,.13);border-radius:22px;background:#fff;box-shadow:0 12px 36px rgba(6,22,47,.065)}
.signature-card.wide{grid-column:1/-1}
.signature-card h3{font-size:23px}.signature-card p{color:#50617c}
.swatch-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.sig-swatch{width:88px;height:76px;border-radius:16px;padding:10px;color:#fff;font-size:10px;font-weight:850;display:flex;align-items:flex-end}.sig-swatch.light{color:var(--dream-ink);border:1px solid var(--line)}
.status-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.glyph-row{display:flex;gap:16px;align-items:center;margin-top:22px}.glyph-sample{width:58px;height:58px;display:grid;place-items:center}.glyph-sample svg{width:27px;height:27px}
.dos-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.do-card{padding:22px;border-radius:17px}.do-card.good{background:#effdf7;border:1px solid #bcefd9}.do-card.avoid{background:#fff6f6;border:1px solid #ffd8d8}.do-card ul{margin:12px 0 0;padding-left:19px;color:#455672}

@media(max-width:900px){
  .signature-grid{grid-template-columns:1fr}.signature-demo{min-height:340px}
  .dream-thread{display:none}
}
@media(max-width:760px){
  .signature-board,.dos-grid{grid-template-columns:1fr}.signature-card.wide{grid-column:auto}
  .signature-flow-card{grid-template-columns:1fr}.signature-flow-card .arrow{transform:rotate(90deg);text-align:center}
  .blue::after,.blue-text::after,.dream-sweep::after{bottom:-.08em}
}
@media(prefers-reduced-motion:reduce){.dream-thread .thread-live,.dream-thread .thread-pulse,.status-stage.routing::before{animation:none!important}}

.signature-system .section{content-visibility:visible!important;contain-intrinsic-size:auto!important}

/* Step 2: hero product cards deliberately overlap the photography (mobile/tablet only — desktop uses the side-by-side layout). */
@media(max-width:900px){
.hero-visual .product-card{position:absolute}
}