/* ============================================================
   Project Go: Website Manager (CMS Design v1, builder-aligned)
   Tokens, chrome, and components mirror the Website Builder.
   ============================================================ */
:root{
  --navy:#08103E;--navy-soft:#132643;--blue:#2042E1;--blue-bright:#3948FF;--blue-tint:#F1F2FF;--blue-mist:#CCCEFF;
  /* One secondary gray, matching the builder exactly. This used to be a much lighter value here,
     2.38:1 on white, which is the one sweep eight removed from the builder for being unreadable,
     and the two products' --slate-text were two different grays. */
  --green:#69BF4A;--green-text:#3E7A2A;--ink:#161616;--charcoal:#303651;--slate:#667080;--slate-text:var(--slate);
  --error-text:#C0272D;
  --line:#E0E4E5;--line-soft:#E6E8F0;--bg:#F4F6F9;--surface:#FFFFFF;--error:#E13D3D;--amber:#F59E0B;
  --fd:'Lexend',system-ui,sans-serif;--fb:'Public Sans',system-ui,sans-serif;--fe:'Rubik',system-ui,sans-serif;
  --r-sm:8px;--r-md:12px;--r-lg:16px;
  --elev2:0 8px 16px rgba(0,0,0,.12);--elevb:0 4px 12px rgba(32,66,225,.25);
  --ease:cubic-bezier(.2,.7,.2,1);--dur:220ms;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.4 var(--fb);color:var(--ink);background:var(--bg);display:flex;flex-direction:column;height:100vh;overflow:hidden}
.hidden{display:none!important}
button{font-family:var(--fd)}

/* ---------- top bar (verbatim from the builder) ---------- */
#top{height:58px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:10px;padding:0 14px 0 16px;flex:none}
#top .brand{display:flex;align-items:center;gap:12px;min-width:0}
#top .brand img{height:30px;display:block;filter:brightness(0) invert(1)}
#wbTag{font:600 8.5px var(--fe);letter-spacing:.22em;color:var(--blue-mist);opacity:.85}
#top .vdiv{width:1px;height:24px;background:rgba(255,255,255,.18);flex:none}
#siteName{font:600 14px var(--fd);color:#fff;white-space:nowrap}
#statusPill{border-radius:999px;padding:5px 13px;font:600 11px var(--fe);letter-spacing:.06em;white-space:nowrap;text-transform:uppercase}
#statusPill.draft{background:var(--navy-soft);border:1px solid rgba(255,255,255,.1);color:#F5C36B}
#statusPill.live{background:rgba(105,191,74,.16);border:1px solid rgba(105,191,74,.35);color:#9FE07F}
#top .grow{flex:1}
#hostState{font:400 12px var(--fd);color:#8E96B8;white-space:nowrap}
.ibtn{background:transparent;color:#C6CCE8;border:none;border-radius:var(--r-sm);width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ibtn:hover{background:rgba(255,255,255,.12);color:#fff}
#devtoggle{display:flex;background:var(--navy-soft);border-radius:var(--r-sm);padding:2px;gap:2px}
#devtoggle .ibtn{width:32px;height:30px;border-radius:6px}
#devtoggle .ibtn.sel{background:var(--blue);color:#fff}
#builderBtn{background:var(--blue);color:#fff;border:none;border-radius:var(--r-sm);padding:9px 18px;font:600 13px var(--fd);cursor:pointer;box-shadow:var(--elevb);display:inline-flex;align-items:center;gap:7px}
#builderBtn:hover{background:var(--blue-bright)}

/* ---------- layout ---------- */
#main{flex:1;display:flex;min-height:0;position:relative}
#side{width:272px;flex:none;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;transition:margin var(--dur) var(--ease);position:relative}
#side.closed{margin-left:-272px}
.sideinner{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-bottom:12px}
#sideOpen{position:absolute;left:10px;top:12px;z-index:40;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);width:32px;height:32px;cursor:pointer;box-shadow:var(--elev2);color:var(--charcoal);font-size:15px}
.shead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px;font:600 14px var(--fd);color:var(--navy)}
.shead button{background:none;border:none;color:var(--slate-text);cursor:pointer;font-size:15px;padding:4px 6px;border-radius:6px}
.shead button:hover{background:var(--bg);color:var(--charcoal)}
.sgroup{font:600 10.5px var(--fe);letter-spacing:.12em;color:var(--slate-text);padding:16px 18px 6px;text-transform:uppercase}
.prow{display:flex;align-items:center;gap:9px;margin:1px 10px;padding:8px 8px 8px 12px;border-radius:var(--r-sm);cursor:pointer;position:relative;border-left:3px solid transparent}
.prow:hover{background:var(--bg)}
.prow.active{background:var(--blue-tint);border-left-color:var(--blue)}
.prow .icon{width:15px;color:var(--slate-text);flex:none;display:inline-flex}
.prow.active .icon{color:var(--blue)}
.prow .nm{flex:1;font:500 13.5px var(--fd);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow{display:flex;align-items:center;gap:10px;margin:1px 10px;padding:9px 12px;border-radius:var(--r-sm);cursor:pointer;position:relative}
.crow:hover{background:var(--bg)}
.crow .icon{color:var(--blue);display:inline-flex;flex:none;width:16px}
.crow .nm{flex:1;font:500 13.5px var(--fd);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .nm small{display:block;font:400 11px var(--fb);color:var(--slate-text)}
.crow .cnt{font:600 11px var(--fe);background:var(--blue-tint);color:var(--blue);border-radius:999px;padding:3px 9px}
.crow .off{font:600 9.5px var(--fe);letter-spacing:.08em;background:#EEF0F4;color:var(--slate-text);border-radius:4px;padding:2.5px 6px}
.crow .ext{color:var(--slate-text);display:inline-flex;flex:none}
.scard{margin:auto 14px 14px;background:var(--blue-tint);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:12px 14px;font:400 12px/1.55 var(--fb);color:var(--charcoal);flex:none}
.donut{width:30px;height:30px;flex:none}
.donut circle{fill:none;stroke-width:3.4}

/* ---------- subpanel (slides over the side panel) ---------- */
.subpanel{position:absolute;inset:0;background:var(--surface);transform:translateX(100%);transition:transform var(--dur) var(--ease);overflow-y:auto;z-index:5}
.subpanel.open{transform:translateX(0)}
.sp-head{display:flex;align-items:center;gap:6px;padding:12px 12px 10px;border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:var(--surface);z-index:2}
.sp-back{background:none;border:none;color:var(--slate-text);cursor:pointer;width:28px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.sp-back:hover{background:var(--bg);color:var(--charcoal)}
.sp-title{font:600 14px var(--fd);color:var(--navy);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-body{padding:14px 16px 40px}
.note{font:400 11.5px/1.5 var(--fb);color:var(--charcoal);opacity:.75}
.scard.inpanel{margin:0 0 14px;display:block}

/* ---------- fields / toggles (verbatim vocabulary) ---------- */
.fld{margin-bottom:12px}
/* font-variant-caps, not text-transform. Chromium computes an accessible name from the rendered
   text, so text-transform:uppercase put "CHURCH NAME required", "PHONE optional", "EMAIL optional"
   and "TEMPORARY WEB ADDRESS" into the accessibility tree: some screen readers spell an all-capital
   word letter by letter and all of them change prosody for one. Driven with the full AX tree in
   sweep seventeen. all-small-caps renders capitals and leaves the name in sentence case, and it is
   the same fix the published filter labels need. The size is nudged up because small caps render
   smaller than the same point size in capitals. */
.fld label{display:block;font:600 12px var(--fe);letter-spacing:.06em;color:var(--charcoal);margin-bottom:5px;font-variant-caps:all-small-caps}
/* every text-like input rather than a list of four types: tel, url, number, search and password
   were left out, so the phone field on the first screen was an unstyled native control */
.fld input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]),.fld textarea,.fld select{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;font:13.5px var(--fb);color:var(--ink);background-color:#FBFCFE}
/* background-color, not the shorthand: the shorthand resets background-image, which is what
   supplies a select its chevron */
/* :focus:not(:focus-visible), and :where() for the type guards. As written, this rule's
   outline:none won the outline fight against the sheet's only focus rule, bare :focus-visible at
   (0,1,0), while its own two replacement declarations LOST to the base field rule three lines
   above, because each of that rule's five :not([type=...]) guards adds a class-level unit and took
   it to (0,6,1). So the rule that removed the indicator won and the rule that would have replaced
   it lost, and every text field in onboarding, starting with Church name, had no focus indicator
   at all: a flat WCAG 2.2 SC 2.4.7 failure on the first screen a church ever types into. The
   builder has the same base rule and survives only because it also carries an explicit
   .fld :is(input,textarea,select):focus-visible ring. Sweep fourteen. */
.fld input:focus:not(:focus-visible),.fld textarea:focus:not(:focus-visible),.fld select:focus:not(:focus-visible){outline:none;border-color:var(--blue);background-color:#fff}
.fld :is(input,textarea,select):focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue);background-color:#fff}
.fld .sub{font:400 11.5px var(--fb);color:var(--slate-text);margin-top:4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.tglrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0}
.tglrow span{font:500 13px var(--fd);color:var(--ink)}
.tglrow .hint{display:block;font:400 11px var(--fb);color:var(--slate-text)}
.tgl{position:relative;width:34px;height:19px;flex:none}
.tgl input{opacity:0;width:0;height:0}
.tgl i{position:absolute;inset:0;background:#CBD0D8;border-radius:19px;transition:.15s;cursor:pointer}
.tgl i:before{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tgl input:checked + i{background:var(--blue)}
.tgl input:checked + i:before{transform:translateX(15px)}
.menuitem{display:block;width:100%;text-align:left;background:none;border:none;border-radius:var(--r-sm);padding:9px 10px;font:500 13px var(--fd);color:var(--ink);cursor:pointer}
.menuitem:hover{background:var(--bg)}
.linklike{background:none;border:none;color:var(--blue);font:600 12.5px var(--fd);cursor:pointer;padding:0}
.linklike:hover{text-decoration:underline}

/* ---------- buttons (builder vocabulary) ---------- */
.btn{border:none;border-radius:var(--r-sm);padding:10px 18px;font:600 13px var(--fd);cursor:pointer;background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.btn.primary:disabled{background:var(--blue-mist);color:var(--navy);opacity:.75;cursor:not-allowed}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (hover:none){.tpl-acts{opacity:1;position:static;background:none;flex-direction:row;justify-content:center;padding:10px 0}}

/* The three user preferences the builder and every published page answer, and which this sheet
   answered none of: fourteen transitions with no prefers-reduced-motion block, and under Windows
   High Contrast a church could not see which of the three onboarding steps it was on, which
   template it had chosen or which palette, because all three states are a background fill or a
   box-shadow and forced colors drops both. Sweep fourteen. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (forced-colors: active){
  .onb-step.active,.tpl-card.selected,.palcard.sel,.dcard.sel{outline:3px solid Highlight;outline-offset:-3px}
  .palcard .dots i,.palcard .sw{forced-color-adjust:none}
  .modal,.card,.tpl-card,.palcard,.fset{border:1px solid CanvasText}
  .btn,.menuitem,.linklike{border:1px solid CanvasText}
}
@media (prefers-contrast: more){
  :root{--line:#8E96A3;--slate-text:#4A5260}
  .btn,.menuitem,.tpl-card,.palcard,.fset{border:1px solid currentColor}
  .tgl i{border:1px solid #333}
}
.onb-colors{display:grid;grid-template-columns:290px 1fr;gap:22px;align-items:start}
@media (max-width:720px){
  .onb-grid{grid-template-columns:1fr!important}
  .onb-colors{grid-template-columns:1fr}
  /* .onb-step.active i below has higher specificity than this ever did, so the label kept
     rendering while the 110px reserve that kept it clear of the next circle was removed: at 390 it
     ran through both later circles and was clipped, and at 320 steps two and three vanished. */
  .onb-steps .onb-step i,.onb-steps .onb-step.active i{display:none!important}
  .onb-step.active{margin-right:0!important}
  .onb-shell{height:auto;min-height:100%;padding:12px}
  /* the brand lockup would not give way, so the step row was pushed past the shell's own edge and
     clipped: at 320 two of the three steps were simply not on the screen */
  .onb-head{padding:14px 16px;gap:12px}
  /* overflow:hidden on a 42px box around 94px of logo cut 52px off the wordmark, so the first
     screen a church sees read "Pro". Let the logo shrink with the box instead of being cropped. */
  .onb-brand{min-width:0;flex:0 1 auto;overflow:hidden}
  .onb-brand img{height:auto;max-height:30px;width:auto;max-width:100%;object-fit:contain}
  .onb-brand em{display:none}
  .onb-steps{gap:16px;flex:0 0 auto}
  .tpl-grid{grid-template-columns:1fr!important}
  .buy-card{padding:20px 18px}
}
.btn.primary{background:var(--blue);color:#fff;box-shadow:var(--elevb)}
.btn.primary:hover{background:var(--blue-bright)}
.btn.primary:disabled{background:var(--blue-mist);box-shadow:none;cursor:default}
.btn.ghost{background:var(--bg);color:var(--charcoal)}
.btn.ghost:hover{background:var(--line-soft)}
.btn.danger{background:var(--error);color:#fff}
.btn.block{width:100%}
.btn.sm{padding:7px 13px;font:600 12px var(--fd)}

/* ---------- palette / design cards ---------- */
.palcard{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:var(--r-md);padding:10px 12px;margin-bottom:8px;cursor:pointer;width:100%;background:#fff;text-align:left}
.palcard:hover{border-color:var(--blue-mist)}
.palcard.sel{border-color:var(--blue);background:var(--blue-tint)}
.palcard .dots{display:flex;gap:4px}
.palcard .dots i{width:16px;height:16px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.12)}
.palcard b{font:600 12.5px var(--fd);color:var(--ink);display:block}
.palcard .pd{font:400 11.5px var(--fb);color:var(--slate-text)}
.dcard{border:1.5px solid var(--line);border-radius:var(--r-md);padding:13px 14px;margin-bottom:10px;background:#fff;cursor:pointer;transition:border-color var(--dur)}
.dcard:hover{border-color:var(--blue-mist)}
.dcard.sel{border-color:var(--blue);background:var(--blue-tint)}
.dcard h4{margin:0 0 3px;font:600 13.5px var(--fd);color:var(--navy)}
.dcard p{margin:0;font:400 12px/1.5 var(--fb);color:var(--slate-text)}
.swatch-row{display:flex;height:26px;border-radius:var(--r-sm);overflow:hidden;margin:9px 0 7px;box-shadow:inset 0 0 0 1px rgba(8,16,62,.08)}
.swatch-row i{flex:1}
.font-sample .fs-d{font-size:18px;color:var(--navy);font-family:var(--fd)}
.font-sample .fs-b{font-size:12px;color:var(--slate-text)}

/* ---------- checklist / overview ---------- */
.ovhero{background:linear-gradient(120deg,var(--navy),#1B2C68);color:#fff;border-radius:var(--r-md);padding:16px;margin-bottom:14px}
.ovhero h3{margin:0 0 4px;font:600 15px var(--fd);color:#fff}
.ovhero p{margin:0;font:400 12px/1.5 var(--fb);color:var(--blue-mist)}
.ovhero .progress{height:6px;background:rgba(255,255,255,.18);border-radius:6px;margin-top:12px;overflow:hidden}
.ovhero .progress i{display:block;height:100%;background:var(--green);border-radius:6px;transition:width .3s}
.ovhero small{display:block;margin-top:6px;font:400 11px var(--fd);color:var(--blue-mist)}
.check-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;padding:9px 8px;border-radius:var(--r-sm);font:500 13px var(--fd);color:var(--ink);cursor:pointer}
.check-item:hover{background:var(--bg)}
.check-item .ck{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.check-item.done .ck{background:var(--green);border-color:var(--green)}
.check-item.done span{color:var(--slate-text);text-decoration:line-through}
.statrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.statcard{border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px 11px;background:#fff}
.statcard b{display:block;font:600 16px var(--fd);color:var(--navy)}
.statcard span{font:400 11px var(--fb);color:var(--slate-text)}

/* ---------- stage ---------- */
#stage{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:14px 16px 16px;position:relative;overflow:hidden}
#viewport{width:100%;max-width:1500px;height:100%;background:#fff;border-radius:10px;box-shadow:0 10px 34px rgba(8,16,62,.14);overflow:hidden;transition:max-width .28s var(--ease);position:relative}
#viewport.tablet{max-width:842px}
#viewport.mobile{max-width:402px}
#frame{width:100%;height:100%;border:none;display:block;background:#fff}
#toast{position:absolute;bottom:22px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--navy);color:#fff;border-radius:19px;padding:11px 22px;font:500 13px/1.5 var(--fd);opacity:0;pointer-events:none;transition:all .25s var(--ease);z-index:60;box-shadow:0 12px 28px rgba(8,16,62,.35);max-width:82%;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- popovers ---------- */
.pop{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 18px 44px rgba(8,16,62,.18);padding:10px;display:none;min-width:230px;max-width:330px}
.pop.open{display:block}

/* ---------- modals ---------- */
#modalBack{position:fixed;inset:0;background:rgba(8,16,62,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
#modalBack.open{display:flex}
.modal{background:var(--surface);border-radius:var(--r-lg);max-width:560px;width:100%;padding:24px 26px;box-shadow:0 30px 70px rgba(8,16,62,.35);max-height:92vh;overflow:auto}
.modal.wide{max-width:760px}
.modal h3{margin:0 0 4px;font:600 17px var(--fd);color:var(--navy)}
.modal .msub{font:400 13px var(--fb);color:var(--charcoal);opacity:.8;margin:0 0 16px}
.mrow{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap;align-items:center}
.mrow .spacer{flex:1}
.mgrList{border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden;margin-bottom:4px}
.mgrow{display:flex;align-items:center;gap:11px;padding:10px 13px;background:#fff}
.mgrow + .mgrow{border-top:1px solid var(--line-soft)}
.mgrow .th{width:32px;height:32px;border-radius:var(--r-sm);background:var(--blue-tint);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;font:600 13px var(--fd);flex:none}
.mgrow .mn{flex:1;min-width:0}
.mgrow .mn b{display:block;font:600 12.5px var(--fd);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mgrow .mn span{font:400 11.5px var(--fb);color:var(--slate-text)}
.mgrow .tag{font:600 10px var(--fe);border-radius:999px;padding:3px 8px;letter-spacing:.04em}
.mgrow .tag.pub{background:#E9F7E3;color:#2E7D14}
.mgrow .tag.draft{background:#FBF1DC;color:#8a6d2f}
.serp{border:1px solid var(--line-soft);border-radius:var(--r-md);padding:12px 14px;margin-top:6px;background:#fff}
.serp .s-url{font-size:11.5px;color:#1a6b30}
.serp .s-title{font-size:15.5px;color:#1a0dab;font-weight:500;margin:2px 0;font-family:arial,sans-serif}
.serp .s-desc{font-size:12.5px;color:#4d5156;line-height:1.5;font-family:arial,sans-serif}
.seo-meter{height:5px;border-radius:5px;background:var(--bg);overflow:hidden;margin-top:6px}
.seo-meter i{display:block;height:100%;border-radius:5px;transition:all .2s}

/* ---------- template gallery ---------- */
.gallery{position:fixed;inset:0;z-index:65;background:var(--bg);display:flex;flex-direction:column}
.gal-head{display:flex;align-items:center;gap:14px;padding:12px 22px;background:var(--navy);color:#fff}
.gal-head h3{margin:0;font:600 15px var(--fd);flex:1;color:#fff}
.gal-head .btn.ghost{background:rgba(255,255,255,.1);color:#fff}
.gal-head .btn.ghost:hover{background:rgba(255,255,255,.18)}
.gal-body{flex:1;overflow-y:auto;padding:24px}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;max-width:1180px;margin:0 auto}
.tpl-card{border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;transition:all var(--dur) var(--ease);position:relative}
.tpl-card:hover{box-shadow:var(--elev2);transform:translateY(-2px)}
.tpl-card.selected{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.tpl-thumb{height:205px;overflow:hidden;position:relative;background:var(--bg);cursor:pointer}
.tpl-thumb iframe{width:1280px;height:960px;transform:scale(0.2578);transform-origin:0 0;border:0;pointer-events:none}
.tpl-thumb .tpl-zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,16,62,0);transition:background var(--dur)}
.tpl-thumb .tpl-zoom span{opacity:0;background:#fff;border-radius:var(--r-sm);padding:8px 14px;font:600 12.5px var(--fd);color:var(--navy);box-shadow:var(--elev2);transition:opacity var(--dur)}
.tpl-thumb:hover .tpl-zoom{background:rgba(8,16,62,.28)}
.tpl-thumb:hover .tpl-zoom span{opacity:1}
.tpl-info{padding:13px 15px 15px}
.tpl-name{font:600 14.5px var(--fd);color:var(--navy);display:flex;align-items:center;gap:8px}
.tpl-badge{font:600 9.5px var(--fe);background:var(--blue-tint);color:var(--blue);border-radius:999px;padding:2.5px 8px;letter-spacing:.06em}
.tpl-vibe{color:var(--charcoal);opacity:.78;color:var(--slate-text);font:400 12px/1.5 var(--fb);margin:5px 0 12px}
.tpl-row{display:flex;align-items:center;justify-content:space-between}
.pal-dots{display:flex;gap:6px}
.pal-dot{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer;overflow:hidden;display:flex;padding:0;background:none}
.pal-dot i{flex:1}
.pal-dot.active{box-shadow:0 0 0 2px var(--blue)}
/* full preview */
/* the preview iframe is decoration: it swallowed every click aimed at the card behind it, so the
   one action on this screen looked broken unless you found the hover overlay */
.tpl-thumb iframe{pointer-events:none}
.tpl-thumb{cursor:pointer}
.tpl-acts{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;transition:opacity .16s;background:rgba(14,20,38,.42)}
.tpl-card:hover .tpl-acts,.tpl-card:focus-within .tpl-acts{opacity:1}
.tpl-acts .btn{min-width:186px;padding:11px 20px;font:600 13.5px var(--fd);box-shadow:0 6px 18px rgba(8,14,30,.28)}
.tpl-acts .btn:not(.primary){background:#fff;color:var(--navy);border:1px solid #fff}
.buy-wrap{position:fixed;inset:0;z-index:80;background:rgba(16,22,40,.55);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:36px 20px}
.buy-card{position:relative;background:#fff;border-radius:16px;max-width:620px;width:100%;padding:28px 30px 26px;box-shadow:0 24px 70px rgba(10,16,32,.3)}
.buy-card h2{margin:0 0 4px;font:600 22px var(--fd);color:var(--navy)}
.buy-sub{margin:0 0 18px;font:14px/1.6 var(--fb);color:var(--charcoal);opacity:.8}
.buy-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--slate-text);font-size:17px;line-height:1;cursor:pointer}
.buy-sec{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 12px}
.buy-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:5px;font:600 14.5px var(--fd);color:var(--navy)}
.buy-price{font:500 12.5px var(--fd);color:var(--charcoal);background:var(--bg);border-radius:14px;padding:3px 10px;white-space:nowrap}
.buy-total{font:600 16px var(--fd);color:var(--navy)}
.buy-row{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);cursor:pointer}
.buy-row input{margin-top:4px;flex:none}
.buy-row b{font:600 13.5px var(--fd);color:var(--navy)}
.gal-preview{position:fixed;inset:0;z-index:66;background:var(--navy);display:flex;flex-direction:column}
.galp-bar{display:flex;align-items:center;gap:14px;padding:11px 20px;color:#fff}
.galp-bar .name{font:600 15px var(--fd)}
.galp-bar .pals{display:flex;gap:8px;margin-left:6px}
.galp-bar .spacer{flex:1}
.galp-bar .btn.ghost{background:rgba(255,255,255,.1);color:#fff}
.galp-bar .btn.ghost:hover{background:rgba(255,255,255,.18)}
.galp-frame{flex:1;margin:0 20px 20px;border-radius:10px;overflow:hidden;background:#fff}
.galp-frame iframe{width:100%;height:100%;border:0}

/* ---------- onboarding ---------- */
.onb{position:fixed;inset:0;z-index:60;background:var(--navy);display:flex}
.onb::before{content:"";position:absolute;inset:0;
  background:radial-gradient(900px 500px at 85% -10%,rgba(57,72,255,.35),transparent 60%),
             radial-gradient(700px 480px at -10% 110%,rgba(16,192,161,.18),transparent 55%)}
/* The content column is 760px inside a 1120px shell, so a laptop showed 280px of empty white on
   the right. The shell is now the width of what is actually in it. */
.onb-shell{position:relative;margin:auto;width:min(880px,calc(100% - 48px));height:min(780px,calc(100% - 48px));background:var(--surface);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 70px rgba(8,16,62,.5)}
.onb-head{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:1px solid var(--line-soft)}
.onb-brand{display:flex;align-items:center;gap:12px}
.onb-brand img{height:30px}
.onb-brand em{font:400 12.5px var(--fd);font-style:normal;color:var(--slate-text);padding-left:12px;border-left:1px solid var(--line)}
.onb-steps{display:flex;gap:26px}
.onb-step{display:flex;align-items:center;justify-content:center;gap:8px;font:600 12px var(--fd);color:var(--slate-text);width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);position:relative}
.onb-step i{position:absolute;left:34px;top:50%;transform:translateY(-50%);white-space:nowrap;font-style:normal;display:none;font-weight:500;color:var(--slate-text)}
.onb-step.active{border-color:var(--blue);background:var(--blue);color:#fff;margin-right:110px}
.onb-step.active i{display:block;color:var(--navy)}
/* Only the current step was ever named, so a church could see it was on step one of three and had
   no way to find out what steps two and three were. Wide enough, all three are named. */
/* The label is absolutely positioned, so the gap to the next circle is what reserves room for it.
   The last one has no next circle, which is exactly where sweep ten's version overflowed the card:
   nothing reserved space for "Pick your colors" and it was clipped. Short labels plus a measured
   gap now fit inside the 880px shell with room to spare. */
@media(min-width:1000px){
  .onb-steps{gap:0}
  .onb-step i{display:block}
  .onb-step{margin-right:104px}
  .onb-step:last-child{margin-right:58px}
  .onb-step.active{margin-right:104px}
  .onb-step:last-child.active{margin-right:58px}
}
.onb-step.done{border-color:var(--green-text);color:var(--green-text)}
.onb-body{flex:1;overflow-y:auto;padding:32px 40px}
.onb-foot{display:flex;justify-content:space-between;padding:16px 32px;border-top:1px solid var(--line-soft);background:#FBFCFE}
.onb-title{margin:0 0 6px;font:600 24px var(--fd);color:var(--navy)}
.onb-sub{color:var(--charcoal);opacity:.78;font:400 14px/1.55 var(--fb);margin:0 0 26px;max-width:640px}
.onb-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px;max-width:760px}
.onb-grid .full{grid-column:1/-1}
.onb-next3{max-width:760px;margin:34px 0 0;padding:20px 22px;background:var(--bg,#F5F7FB);border:1px solid var(--line-soft);border-radius:12px}
.onb-next3 b{display:block;font:600 12px var(--fd);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:10px}
.onb-next3 ul{margin:0;padding-left:18px;list-style:disc;color:var(--charcoal);font:400 13.5px/1.7 var(--fb)}
.onb-next3 li{margin-bottom:4px}
.onb-grid label .req,.onb-grid label .opt{font:500 10.5px var(--fd);letter-spacing:.04em;text-transform:none;margin-left:6px}
.onb-grid label .req{color:#8A4A3A}
.onb-grid label .opt{color:var(--slate-text)}
/* --slate used to be far too light here, 2.38:1 on white, on the first screen every church sees */
/* .subhost styled the onboarding field's ".project-go.com" suffix, which named a hostname that
   does not resolve while every church is served from one shared host. The suffix is gone (sweep
   nineteen) and the rule goes with it; the responsive rule below is kept because the flex row it
   wraps is still there. */
@media (max-width:720px){
  /* 105 of the row's 318px went to the suffix, leaving a 130px box holding a 242px address */
  .onb-grid .fld.full>div:has(>#obSub){flex-wrap:wrap}
  .subhost{flex-basis:100%;margin-top:2px}
}
.times-row{display:grid;grid-template-columns:1fr 130px 34px;gap:8px;margin-bottom:8px}
.icon-x{border:none;background:none;color:var(--slate-text);font-size:16px;cursor:pointer}
.icon-x:hover{color:var(--error)}

/* ---- v3: embedded builder ---- */
.builderwrap{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;flex-direction:column}
.bw-bar{height:44px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:12px;padding:0 14px;flex:none}
.bw-back{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 14px;font:600 12px var(--fd);cursor:pointer;transition:background var(--dur) var(--ease)}
.bw-back:hover{background:rgba(255,255,255,.22)}
.bw-div{width:1px;height:20px;background:rgba(255,255,255,.16)}
.bw-name{font:600 13px var(--fd);color:#C6CCE8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bw-note{font:500 11.5px var(--fe);letter-spacing:.04em;color:#8C94B8;white-space:nowrap}
.bw-frame{flex:1;width:100%;border:0;background:#fff}

/* ---- v3: checklist why-lines ---- */
.check-item .ck-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.check-item .ck-t small{font:400 11.5px var(--fb);color:var(--slate-text)}
.check-item.done .ck-t small{display:none}

/* ---- v3: domain status + record row ---- */
.domstat{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;margin:12px 0;font:500 12.5px var(--fb);color:var(--charcoal);flex-wrap:wrap}
.domstat b{font:600 12.5px var(--fd);color:var(--ink)}
.domstat .dot{width:9px;height:9px;border-radius:50%;flex:none}
.domstat.pending .dot{background:#F5C36B;box-shadow:0 0 0 3px rgba(245,195,107,.25)}
.domstat.live .dot{background:#4CAF50;box-shadow:0 0 0 3px rgba(76,175,80,.22)}
.recrow{display:flex;align-items:center;gap:9px;background:#FBFCFE;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;margin-bottom:10px;font:600 12px var(--fe)}
.recrow .rk{background:var(--blue-tint);color:var(--blue);border-radius:5px;padding:3px 7px;letter-spacing:.05em}
.recrow .rh{color:var(--charcoal)}
.recrow .rv{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- v3.1: coming-soon template card ---- */
.tpl-card.ghost{border-style:dashed;background:transparent;box-shadow:none;cursor:default}
.tpl-card.ghost:hover{transform:none;box-shadow:none}
.tpl-thumb.ghost{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 12px,#F4F6FA 12px,#F4F6FA 24px);border-bottom:1px dashed var(--line)}
.tpl-thumb.ghost span{font:600 13px var(--fd);color:var(--slate-text);text-align:center;line-height:1.5;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 18px}
.tpl-card.ghost .tpl-name{color:var(--slate-text)}

/* ---- v3.2: step chips keep their numbers ---- */
.onb-step .stepck{position:absolute;top:-5px;right:-5px;width:13px;height:13px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin:0}
.onb-step .stepck svg{width:8px;height:8px}
.pricecard{max-width:640px;background:var(--blue-tint);border:1px solid var(--blue-mist);border-radius:var(--r-md);padding:16px 18px;font:500 13px/1.55 var(--fb);color:var(--navy);margin:0 0 22px}
.pc-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px}
.pc-actions .btn{padding:11px 20px;font:600 13px var(--fd);line-height:1}

/* aria-disabled, not disabled: it is focusable and it answers, so the WCAG exemption for disabled
   controls does not apply and blanket opacity put it at 2.53:1. A real muted pair instead. */
/* :hover as well, and it has to be here rather than three lines below the rule it corrects,
   because .btn.primary:hover at (0,3,0) beat .btn.is-disabled at (0,2,0) and is-disabled sets
   cursor:not-allowed without pointer-events:none, so the element still takes hover. A disabled
   primary button therefore computed rgb(74,81,100) on rgb(57,72,255), measured at 1.34:1,
   exactly while the cursor was on it: the word Purchase vanished into the button under the
   church's own pointer at the moment the refusal appeared. #onbNext escaped only because an id
   selector had been bolted onto the same rule. Both users of .is-disabled are #pkGo, the
   Purchase button. .btn.is-disabled:hover is (0,3,0) and sits after line 173, so it wins.
   Measured after: 6.54:1. Sweep twenty-one. */
.btn.is-disabled,.btn.is-disabled:hover,#onbNext.is-disabled{opacity:1;background:#E7E9F2;border-color:#CBD0E0;color:#4A5164;cursor:not-allowed;box-shadow:none}
.onb-steps{list-style:none;margin:0;padding:0}
/* The last screen before payment, at phone widths. .buy-price never wrapped, so the license pill ran
   78px past its own box at 320 and 38px at 360 (the commonest Android width), and at 320 the Member
   Platform row was cut at the screen edge mid-word and the overlay scrolled sideways. Below 480px the
   pill wraps and the head lets it drop under its heading. At the END of the file, after the base
   rules it overrides (trap 66). Sweep twenty-eight. */
@media (max-width:480px){.buy-head{flex-wrap:wrap}.buy-price{white-space:normal}.buy-row>span{min-width:0}}