/* The setup journey is a first-class product surface. */
#relay-concept .sb-setup { max-width: 1400px; margin: auto; padding: 44px 34px 56px; }
#relay-concept .sb-setup-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:30px; }
#relay-concept .sb-setup-heading h1 { font-size:38px; margin:12px 0; }
#relay-concept .sb-setup-heading p { color:#b8cbe0; font-size:15px; line-height:1.6; }
#relay-concept .sb-setup-context { display:flex; flex-wrap:wrap; gap:10px; }
#relay-concept .sb-setup-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; list-style:none; padding:0; margin:0 0 34px; }
#relay-concept .sb-setup-step { position:relative; overflow:hidden; border:1px solid #294056; border-radius:14px; padding:20px; background:linear-gradient(145deg,#142333,#0c1823); min-width:0; }
#relay-concept .sb-step-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; }
#relay-concept .sb-step-icon { display:grid; place-items:center; width:44px; height:44px; border:1px solid #36536e; border-radius:12px; color:#8faccc; background:#193048; }
#relay-concept .sb-step-icon svg { width:23px; height:23px; }
#relay-concept .sb-step-number { color:#7994af; font:600 13px ui-monospace,monospace; letter-spacing:1px; }
#relay-concept .sb-setup-step>strong { display:block; color:#dce9f5; font-size:17px; line-height:1.35; }
#relay-concept .sb-setup-step>p { color:#adc1d5; font-size:12px; line-height:1.65; min-height:40px; margin-top:7px; }
#relay-concept .sb-step-state { display:flex; align-items:center; gap:7px; color:#98afc5; font-size:11px; font-weight:600; margin-top:17px; }
#relay-concept .sb-step-state:before { content:''; width:6px; height:6px; border-radius:50%; background:#5d7890; }
#relay-concept .sb-setup-step.is-current { background:radial-gradient(ellipse at 100% 0,#168aff32,transparent 80%),linear-gradient(145deg,#183954,#102236); border-color:#348fe0; box-shadow:0 8px 35px #0086ff13,inset 0 1px 0 #78b9ff33; }
#relay-concept .sb-setup-step.is-current:after { content:''; position:absolute; top:0; left:20px; right:20px; height:2px; background:#43acff; box-shadow:0 0 16px #168aff; }
#relay-concept .is-current .sb-step-icon { background:#0872d6; border-color:#52a7ee; color:#fff; }
#relay-concept .is-current .sb-step-state,#relay-concept .is-current .sb-step-number { color:#8fd1ff; }
#relay-concept .is-current .sb-step-state:before { background:#43b5ff; box-shadow:0 0 10px #43b5ff66; }
#relay-concept .is-complete .sb-step-icon { background:#153b35; color:#72dbc2; border-color:#2d6c5c; }
#relay-concept .is-complete .sb-step-state { color:#82d7c4; }
#relay-concept .is-complete .sb-step-state:before { background:#65d2b7; }
#relay-concept .sb-setup-layout { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:36px; align-items:start; }
#relay-concept .sb-setup .rc-setup-form { max-width:none; width:100%; margin:0; }
#relay-concept .sb-setup .sb-setup-stage { padding:30px; background:linear-gradient(145deg,#152636,#101d29); box-shadow:0 20px 55px #00000020; }
#relay-concept .sb-setup-stage>h2 { font-size:28px; line-height:1.25; margin-bottom:10px; }
#relay-concept .sb-setup-stage>p { font-size:15px; line-height:1.7; margin-bottom:24px; }
#relay-concept .sb-setup-stage .rc-field { font-size:14px; gap:9px; }
#relay-concept .sb-setup-stage :is(input,select) { min-height:49px; }
#relay-concept .sb-setup-stage .rc-primary { background:#0872d6; color:#fff; border-color:#258ce4; min-height:48px; }
#relay-concept .sb-stage-progress { display:flex; align-items:center; gap:24px; padding-bottom:21px; margin-bottom:24px; border-bottom:1px solid #2d455b; }
#relay-concept .sb-stage-progress>span { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:#8fcaff; white-space:nowrap; }
#relay-concept .sb-stage-track { height:4px; border-radius:4px; background:#243f55; flex:1; overflow:hidden; }
#relay-concept .sb-stage-track i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#0878e1,#69c8ff); }
#relay-concept .sb-preview-heading { margin:0 0 18px; }
#relay-concept .sb-preview-heading h2 { font-size:22px; margin:10px 0 6px; }
#relay-concept .sb-preview-heading p { color:#a8bfd6; font-size:13px; }
#relay-concept .sb-setup-store { border:1px solid #35516a; border-radius:14px; overflow:hidden; background:#0c1b29; box-shadow:0 16px 40px #00000026; }
#relay-concept .sb-store-browser { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; background:#162c3f; border-bottom:1px solid #2c465b; }
#relay-concept .sb-browser-dots { font-size:9px; letter-spacing:1px; color:#678aa8; white-space:nowrap; }
#relay-concept .sb-preview-domain { color:#c4dbf1; font:11px ui-monospace,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#relay-concept .sb-store-browser svg { flex-shrink:0; color:#83b4d8; width:14px; }
#relay-concept .sb-preview-world { position:relative; height:220px; background:radial-gradient(ellipse at 50% 30%,#265276,#102436 72%); display:flex; flex-direction:column; align-items:center; justify-content:end; padding:22px; isolation:isolate; }
#relay-concept .sb-preview-world:after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(transparent 42%,#0c1b29); }
#relay-concept .sb-preview-world img { position:absolute; width:95%; height:95%; object-fit:contain; top:-9%; left:2.5%; z-index:-2; filter:drop-shadow(0 10px 20px #0006); }
#relay-concept .sb-preview-world>span { font-size:9px; letter-spacing:2px; color:#8dceff; margin-bottom:8px; }
#relay-concept .sb-preview-world>strong { font-size:26px; line-height:1.25; overflow-wrap:anywhere; text-align:center; }
#relay-concept .sb-preview-package { display:flex; align-items:center; gap:12px; margin:0 18px 18px; border:1px solid #2c4961; border-radius:10px; padding:17px 14px; background:linear-gradient(120deg,#16334a,#112535); }
#relay-concept .sb-preview-package-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:10px; background:#54402355; color:#ffce77; flex-shrink:0; }
#relay-concept .sb-preview-package-icon svg { width:26px; height:26px; }
#relay-concept .sb-preview-package>div { flex:1; min-width:0; }
#relay-concept .sb-preview-package strong { display:block; font-size:15px; overflow-wrap:anywhere; }
#relay-concept .sb-preview-package small { display:block; color:#a9c3d9; font-size:10px; margin-top:5px; }
#relay-concept .sb-preview-price { font-size:15px; white-space:nowrap; }
#relay-concept .sb-preview-connections { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:17px 20px; border-top:1px solid #28445b; background:#102435; }
#relay-concept .sb-preview-connections>div { display:grid; grid-template-columns:20px 1fr; gap:5px 8px; align-items:center; font-size:11px; }
#relay-concept .sb-preview-connections svg { color:#65b7ee; grid-row:1/3; }
#relay-concept .sb-preview-connections span { color:#aec7dc; }
#relay-concept .sb-preview-connections strong { color:#d8e8f6; font-size:11px; }
#relay-concept .sb-setup-note { display:flex; gap:14px; margin-top:22px; padding:20px; border:1px solid #263f55; border-radius:12px; background:#10233488; }
#relay-concept .sb-setup-note>span { color:#7ec9ff; padding-top:2px; }
#relay-concept .sb-setup-note h3 { font-size:15px; margin:0 0 8px; }
#relay-concept .sb-setup-note p { font-size:12px; color:#b0c7db; line-height:1.75; }
@media(max-width:1100px) {
  #relay-concept .sb-setup { padding-inline:26px; }
  #relay-concept .sb-setup-step { padding:15px; }
  #relay-concept .sb-setup-step>strong { font-size:15px; }
  #relay-concept .sb-setup-layout { gap:22px; }
  #relay-concept .sb-preview-package { flex-wrap:wrap; }
}
@media(max-width:850px) {
  #relay-concept .sb-setup-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #relay-concept .sb-setup-layout { grid-template-columns:1fr; }
  #relay-concept .sb-setup-preview { max-width:620px; width:100%; margin:auto; }
}
@media(max-width:570px) {
  #relay-concept .sb-setup { padding:28px 18px 36px; }
  #relay-concept .sb-setup-heading { align-items:start; flex-direction:column; gap:15px; margin-bottom:24px; }
  #relay-concept .sb-setup-heading h1 { font-size:29px; }
  #relay-concept .sb-setup-heading p { font-size:13px; }
  #relay-concept .sb-setup-steps { grid-template-columns:1fr; gap:7px; margin-bottom:24px; }
  #relay-concept .sb-setup-step { display:grid; grid-template-columns:28px minmax(0,1fr) 24px; align-items:center; gap:0 10px; padding:8px 12px; border-radius:10px; }
  #relay-concept .sb-step-top { display:contents; }
  #relay-concept .sb-step-icon { width:28px; height:28px; border-radius:8px; grid-column:1; grid-row:1/4; }
  #relay-concept .sb-step-icon svg { width:17px; height:17px; }
  #relay-concept .sb-step-number { grid-column:3; grid-row:1; font-size:11px; }
  #relay-concept .sb-setup-step>strong { grid-column:2; grid-row:1; font-size:14px; }
  #relay-concept .sb-setup-step>p,#relay-concept .sb-step-state { display:none; }
  #relay-concept .sb-setup-step.is-current { padding-block:11px; }
  #relay-concept .sb-setup-step.is-current>p { display:block; grid-column:2/4; grid-row:2; min-height:0; font-size:11px; margin-top:3px; }
  #relay-concept .sb-setup-step.is-current .sb-step-state { display:flex; grid-column:2/4; grid-row:3; margin-top:5px; font-size:10px; }
  #relay-concept .sb-setup .sb-setup-stage { padding:20px; }
  #relay-concept .sb-setup-stage>h2 { font-size:25px; }
  #relay-concept .sb-setup-stage>p { font-size:13px; }
  #relay-concept .sb-stage-progress { gap:12px; }
  #relay-concept .sb-preview-domain { font-size:9px; }
  #relay-concept .sb-preview-connections { padding-inline:15px; gap:10px; }
}
@media(prefers-reduced-motion:no-preference) {
  #relay-concept .sb-setup-stage { animation:sb-setup-enter .3s ease-out both; }
  @keyframes sb-setup-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
}
/* Design step owns a full form and its own actual storefront preview. */
#relay-concept .sb-setup-design-stage .sb-setup-layout {grid-template-columns: minmax(0,1fr)}
#relay-concept .sb-setup-design-stage .sb-setup-preview {display:none}
#relay-concept .sb-setup-stage form[data-form=setup-design] {align-items:start}
#relay-concept .sb-setup .sb-store-preview {min-width:0;width:100%}
@media(max-width:700px){#relay-concept .sb-setup-stage form[data-form=setup-design] {grid-template-columns:minmax(0,1fr)}}