/* SermonScreens Websites onboarding: checkout stand-in and setup wizard */
*,*::before,*::after{box-sizing:border-box}
:root{--ink:#16181d;--muted:#5b616e;--line:#e3e5ea;--soft:#f5f6f8;--ok:#1d7a46;--err:#b42318;--r:14px}
html{-webkit-text-size-adjust:100%}
body.onb{margin:0;background:var(--soft);color:var(--ink);font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.2;text-wrap:balance;margin:0 0 .4em}
h1{font-size:clamp(26px,4vw,36px);letter-spacing:-.02em}
h2{font-size:20px}
p,li,small,span{text-wrap:pretty}
a{color:var(--p)}
img{max-width:100%;display:block}

/* top bar */
.onb-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:24px;padding:14px clamp(16px,3vw,32px);background:#fff;border-bottom:1px solid var(--line)}
.onb-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;white-space:nowrap}
.onb-mark{width:26px;height:26px;border-radius:8px;background:var(--p);position:relative}
.onb-mark::after{content:"";position:absolute;left:50%;top:5px;width:10px;height:16px;margin-left:-5px;background:#fff;clip-path:polygon(50% 0,100% 40%,100% 100%,0 100%,0 40%)}
.onb-later{margin-left:auto;white-space:nowrap;color:var(--muted);font-weight:600;text-decoration:none}
.onb-later:hover{color:var(--ink)}
.onb-progress{flex:1;min-width:0}
.onb-progress ol{display:flex;gap:4px;list-style:none;margin:0;padding:0;justify-content:center}
.onb-progress li{display:flex;align-items:center;min-width:0}
.onb-progress li>a,.onb-progress li>b{text-decoration:none}
.onb-progress li a{display:flex;align-items:center;color:inherit;text-decoration:none}
.onb-progress b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--soft);border:1.5px solid var(--line);font-size:13px;color:var(--muted)}
.onb-progress span{font-size:13px;color:var(--muted);margin:0 10px 0 7px;white-space:nowrap}
.onb-progress li:not(:last-child)::after{content:"";width:18px;height:1.5px;background:var(--line);margin-right:6px}
.onb-progress .is-done b{background:var(--p);border-color:var(--p);color:#fff;font-size:0}
.onb-progress .is-done b::before{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-2px) rotate(-45deg)}
.onb-progress .is-now b{border-color:var(--p);color:var(--p);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 18%,transparent)}
.onb-progress .is-now span{color:var(--ink);font-weight:600}
.onb-progress .is-skipped b{border-style:dashed}
@media (max-width:1180px){.onb-progress span{display:none}.onb-progress .is-now span{display:inline}}
@media (max-width:720px){.onb-progress{display:none}}

/* main column */
.onb-main{max-width:960px;margin:0 auto;padding:clamp(24px,5vw,56px) clamp(16px,4vw,32px) 64px}
.onb-count{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.onb-form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,4vw,44px);box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -12px rgba(16,24,40,.08)}
.onb-lead{font-size:18px;color:var(--muted);max-width:640px;margin:0 0 28px}
.onb-note{font-size:14px;color:var(--muted);margin:22px 0 0}
.onb-kicker{display:inline-block;margin:0 0 14px;padding:5px 12px;border-radius:99px;background:color-mix(in srgb,var(--p) 10%,#fff);color:var(--p);font-weight:700;font-size:13px}
.onb-alert{border-radius:12px;padding:12px 16px;margin:0 0 16px;background:#e9f6ee;color:var(--ok);font-weight:600;border:1px solid #bfe3cd}
.onb-alert.is-err{background:#fdecea;color:var(--err);border-color:#f5c2bd}

/* buttons */
.onb-actions{display:flex;align-items:center;gap:12px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.onb-gap{flex:1}
.onb-btn{appearance:none;border:0;border-radius:12px;padding:13px 22px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px}
.onb-btn.is-primary{background:var(--p);color:#fff}
.onb-btn.is-primary:hover{filter:brightness(.92)}
.onb-btn.is-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.onb-btn.is-ghost:hover{border-color:#c5c9d2}
.onb-btn.is-link{background:none;color:var(--muted);padding:13px 10px}
.onb-btn.is-link:hover{color:var(--ink);text-decoration:underline}
.onb-btn.is-big{padding:16px 28px;font-size:17px}
.onb-btn:focus-visible,.onb-theme:focus-within,.onb-drop:focus-within{outline:3px solid color-mix(in srgb,var(--p) 45%,transparent);outline-offset:2px}
@media (max-width:560px){.onb-actions .onb-btn.is-primary{width:100%;order:-1}.onb-gap{display:none}}

/* welcome */
.onb-hero h1{max-width:720px}
.onb-plan{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:12px;max-width:560px}
.onb-plan li{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:500}
.onb-plan b{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--p) 12%,#fff);color:var(--p)}

/* template cards */
.onb-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.onb-theme{position:relative;display:flex;flex-direction:column;border:2px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s,transform .15s}
.onb-theme:hover{border-color:#c5c9d2;transform:translateY(-2px)}
.onb-theme input{position:absolute;opacity:0;pointer-events:none}
.onb-theme:has(input:checked){border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 20%,transparent)}
.onb-theme:has(input:checked)::after{content:"Selected";position:absolute;top:10px;right:10px;background:var(--p);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px}
.onb-theme__img{aspect-ratio:4/3;background:var(--soft);overflow:hidden;border-bottom:1px solid var(--line)}
.onb-theme__img img{width:100%;height:100%;object-fit:cover;object-position:top}
.onb-theme__body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1}
.onb-theme__body strong{font-size:17px}
.onb-theme__body strong em{font-style:normal;font-size:12px;font-weight:600;color:var(--muted);margin-left:4px}
.onb-theme__body>span{font-size:14px;color:var(--muted);flex:1}
.onb-preview{align-self:flex-start;margin-top:8px;background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--p);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* preview dialog */
.onb-dialog{width:min(1100px,96vw);max-height:92vh;border:0;border-radius:18px;padding:0;overflow:hidden}
.onb-dialog::backdrop{background:rgba(10,12,16,.6)}
.onb-dialog__head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font-size:18px}
.onb-dialog__x{border:0;background:var(--soft);border-radius:10px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer}
.onb-dialog__body{display:grid;grid-template-columns:1fr 240px;gap:20px;padding:20px;max-height:calc(92vh - 60px);overflow:auto;background:var(--soft)}
.onb-dialog figure{margin:0}
.onb-dialog figcaption{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}
.onb-dialog img{width:100%;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.onb-dialog .is-phone img{border-radius:22px;border:6px solid #111}
@media (max-width:700px){.onb-dialog__body{grid-template-columns:1fr}.onb-dialog figure:first-child{display:none}.onb-dialog .is-phone{max-width:300px;margin:0 auto}}

/* fields */
.onb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
@media (max-width:640px){.onb-grid{grid-template-columns:1fr}}
.onb-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.onb-field>span{font-weight:600;font-size:15px}
.onb-field>span i{font-style:normal;font-weight:400;color:var(--muted);font-size:13px;margin-left:4px}
.onb-field input{font:inherit;padding:12px 14px;border:1.5px solid #d0d4dc;border-radius:10px;background:#fff;min-height:48px;width:100%}
.onb-field input:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 18%,transparent)}
.onb-field small{color:var(--muted);font-size:13px}
.onb-field small.is-ok{color:var(--ok);font-weight:700}
.onb-more{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.onb-more summary,.onb-how summary{cursor:pointer;font-weight:600;color:var(--p)}
.onb-more[open] summary{margin-bottom:16px}
.onb-check{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:15px;cursor:pointer}
.onb-check input{width:18px;height:18px;accent-color:var(--p)}
.onb-label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}

/* logo */
.onb-logo{display:grid;gap:22px;max-width:640px}
.onb-logo__bar{display:flex;align-items:center;min-height:84px;padding:16px 22px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.onb-logo__bar img{max-height:56px;width:auto}
.onb-logo__name{font-size:22px;font-weight:700}

/* upload box */
.onb-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:28px 18px;border:2px dashed #c5c9d2;border-radius:var(--r);background:var(--soft);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.onb-drop:hover,.onb-drop.is-over{border-color:var(--p);background:color-mix(in srgb,var(--p) 5%,#fff)}
.onb-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.onb-drop__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:26px;color:var(--p);margin-bottom:6px}
.onb-drop__file{font-size:13px;color:var(--muted);word-break:break-all}
.onb-drop.has-file{border-style:solid;border-color:var(--ok);background:#f1faf4}
.onb-drop.has-file .onb-drop__file{color:var(--ok);font-weight:600}
.onb-drop.is-small{padding:14px 12px}

/* photos */
.onb-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.onb-photo{display:flex;flex-direction:column;gap:6px}
.onb-photo__img{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--soft);margin-bottom:6px}
.onb-photo__img img{width:100%;height:100%;object-fit:cover}
.onb-photo__img em{position:absolute;left:10px;top:10px;font-style:normal;font-size:12px;font-weight:700;background:rgba(255,255,255,.92);padding:3px 9px;border-radius:99px}
.onb-photo__img em.is-yours{background:var(--ok);color:#fff}
.onb-photo strong{font-size:15px}
.onb-photo>span{font-size:13px;color:var(--muted);margin-bottom:4px}

/* connect */
.onb-card{border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:18px}
.onb-card h2{display:flex;align-items:center;gap:10px}
.onb-card p{color:var(--muted);margin:0 0 14px}
.onb-card.is-plain{background:var(--soft);border-color:transparent}
.onb-ico{width:28px;height:28px;border-radius:7px;flex:none}
.onb-ico.is-yt{background:#ff0033;clip-path:none;position:relative}
.onb-ico.is-yt::after{content:"";position:absolute;left:10px;top:8px;border:6px solid transparent;border-left:9px solid #fff}
.onb-ico.is-cal{background:#1a73e8;position:relative}
.onb-ico.is-cal::after{content:"31";position:absolute;inset:6px 4px 3px;background:#fff;border-radius:3px;color:#1a73e8;font-size:11px;font-weight:800;display:grid;place-items:center}
.onb-how{margin-top:12px;font-size:14px}
.onb-how ol{margin:10px 0 0;padding-left:20px;color:var(--muted)}
.onb-how li{margin-bottom:4px}

/* done */
.onb-hero.is-done{text-align:center}
.onb-hero.is-done h1,.onb-hero.is-done .onb-lead{margin-left:auto;margin-right:auto}
.onb-finish{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:8px 0 26px}
.onb-skipped{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;align-items:center;font-size:15px;padding:16px;background:var(--soft);border-radius:12px}
.onb-skipped span{color:var(--muted);width:100%}

/* busy overlay */
.onb-busy{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(255,255,255,.86);backdrop-filter:blur(2px)}
.onb-busy[hidden]{display:none}
.onb-busy div{text-align:center;max-width:320px}
.onb-busy p{font-weight:600;margin-top:16px}
.onb-spin{display:inline-block;width:44px;height:44px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--p);animation:onbspin .8s linear infinite}
@keyframes onbspin{to{transform:rotate(360deg)}}

/* checkout stand-in */
.co-demo{background:#fff4d6;color:#7a5600;text-align:center;font-size:14px;font-weight:600;padding:8px 16px}
.co{max-width:1040px;margin:0 auto;padding:clamp(24px,5vw,56px) clamp(16px,4vw,32px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:820px){.co{grid-template-columns:1fr}}
.co-list{padding-left:20px;color:var(--muted);margin:0 0 22px}
.co-list li{margin-bottom:6px}
.co-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;font-size:17px}
.co-total b{font-size:22px}
.co-form .onb-form{display:grid;gap:16px}
.co-form h2{margin:0}
.co-card{border:1.5px solid #d0d4dc;border-radius:10px;padding:10px 14px 12px;margin:0}
.co-card legend{font-weight:600;font-size:15px;padding:0 4px}
.co-fake{display:flex;gap:18px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;font-size:15px;flex-wrap:wrap}
.co-fake span:first-child{flex:1}
.co-card small{color:var(--muted);font-size:13px}
.co-pay{width:100%}
.co-sites{margin-top:28px}
.co-sites h3{font-size:16px}
.co-sites ul{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:12px;background:#fff}
.co-sites li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--line)}
.co-sites li:first-child{border-top:0}
.co-sites li>div{flex:1;min-width:0}
.co-sites li strong{display:block}
.co-sites li span{font-size:13px;color:var(--muted)}
.co-sites li a{font-weight:600;text-decoration:none}
.co-sites form{margin:0}
.co-sites .onb-btn{min-height:0;padding:6px}
.onb-photos__save{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px}
.onb-photos__save a{font-weight:600}
.onb--template .onb-main{max-width:1280px}
@media (min-width:1180px){.onb-themes{grid-template-columns:repeat(5,minmax(0,1fr))}.onb-theme__body>span{font-size:13.5px}}
.onb-auth{width:min(440px,94vw);border:0;border-radius:18px;padding:0;overflow:hidden}
.onb-auth::backdrop{background:rgba(10,12,16,.6)}
.onb-auth__head{padding:18px 22px;border-bottom:1px solid var(--line)}
.onb-auth__head strong{display:block;font-size:18px;margin-bottom:2px}
.onb-auth__head span{color:var(--muted);font-size:14px}
.onb-auth iframe{display:block;width:100%;height:440px;border:0;background:#f0f0f1}
.onb-domain{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.onb-domain .onb-field{flex:1;min-width:220px}
.onb-step-label{font-weight:600;margin:22px 0 10px}
.onb-dns{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px}
.onb-dns th,.onb-dns td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;word-break:break-word}
.onb-dns th{font-size:13px;color:var(--muted);font-weight:600}
.onb-dns th:nth-child(1),.onb-dns th:nth-child(2){width:16%}
.onb-dns code{font-size:14px;background:var(--soft);padding:2px 6px;border-radius:6px}
.onb-dns__ok{color:var(--ok);font-weight:700}
.onb-dns__bad{color:var(--err);font-weight:600}
.onb-dns__wait{color:var(--muted)}
@media (max-width:560px){.onb-dns thead{display:none}.onb-dns tr{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--line)}.onb-dns td{border:0;padding:2px 0}.onb-dns td:nth-child(3),.onb-dns td:nth-child(4){grid-column:1/-1}}
.onb-guides .onb-how{border-top:1px solid var(--line);padding:10px 0;margin:0}
.onb-ready{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:18px;padding:14px 16px;border-radius:12px;background:#e9f6ee;color:var(--ok)}
.onb-buy{list-style:none;padding:0;margin:0 0 6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.onb-buy li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.onb-buy a{font-weight:700;display:block}
.onb-buy span{font-size:13px;color:var(--muted)}
.onb-theme__links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;align-items:baseline}
.onb-theme__links a{font-size:14px;font-weight:600}
.onb-theme__links .onb-preview{margin-top:0}
.onb-ns{border:0;border-top:1px solid var(--line);padding:18px 0 0;margin:22px 0 0}
.onb-ns legend{font-weight:600;color:var(--p);padding:0}
.onb-hint{margin:6px 0 4px;font-size:14px;opacity:.75}
.onb-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 16px}
/* Colors step */
.onb-pals{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:20px 0}
.onb-pal{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #dcdcde;border-radius:14px;background:#fff;cursor:pointer}
.onb-pal>input{position:absolute;opacity:0;pointer-events:none}
.onb-pal:has(>input:checked){border-color:#111;box-shadow:0 0 0 2px #111}
.onb-pal:has(>input:focus-visible){outline:2px solid #2271b1;outline-offset:3px}
.onb-pal__demo{position:relative;display:grid;gap:8px;align-content:start;min-height:92px;padding:14px;border-radius:10px;overflow:hidden}
.onb-pal__demo b{font-size:15px}
.onb-pal__demo em{justify-self:start;font-style:normal;font-weight:600;font-size:12px;padding:6px 12px;border-radius:999px}
.onb-pal__demo i{position:absolute;right:12px;top:12px;width:18px;height:18px;border-radius:50%}
.onb-pal--own .onb-pal__demo{background:repeating-linear-gradient(135deg,#f6f7f7 0 10px,#fff 10px 20px)}
.onb-pal__picks{display:flex;gap:8px}
.onb-pal__picks input{width:44px;height:36px;padding:2px;border:1px solid #8c8f94;border-radius:8px;background:#fff;cursor:pointer}
.onb-pal__name{font-weight:600;font-size:14px}
/* Giving picker (also used in the setup wizard) */
.stg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:16px}
.stg-opt{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid #dcdcde;border-radius:12px;background:#fff;cursor:pointer}
.stg-opt input{position:absolute;opacity:0;pointer-events:none}
.stg-opt span{font-weight:600}
.stg-opt small{color:#646970;font-size:12px}
.stg-opt:has(input:checked){border-color:#2271b1;box-shadow:0 0 0 2px #2271b1}
.stg-opt:has(input:focus-visible){outline:2px solid #2271b1;outline-offset:3px}
.stg-opt--none{background:#f6f7f7}
.stg-how{padding:14px 18px;border-radius:12px;background:#f6f7f7;margin-bottom:14px}
.stg-how h3{margin:0 0 8px;font-size:14px}
.stg-how ol{margin:0 0 8px 20px}
.stg-how li{margin-bottom:4px}
.stg-note{margin:0;color:#50575e;font-size:13px}
.stg-paste{display:block}
.stg-paste span{display:block;font-weight:600;margin-bottom:6px}
.stg-paste textarea{width:100%;font-family:monospace;font-size:13px}
/* ten steps: only the current step keeps its name in the progress bar */
.onb-progress li:not(.is-now) span{display:none}
.onb-progress li:not(:last-child)::after{width:14px}
.stg-opt:has(input:checked){border-color:#111;box-shadow:0 0 0 2px #111}
.stg-paste textarea{padding:10px 12px;border-radius:10px;border:1px solid #c3c4c7}