/* =============================================================================
   Tint Shop Sites — adaptive onboarding ("build my site")
   Brand-matched to the marketing site: carbon black + hot tint orange.
   No dependencies.
   ========================================================================== */
:root{
  --bg-0:#0a0d0f; --bg-1:#0f1418; --bg-2:#141b21;
  --line:#26313a; --line-2:#33414c;
  --ink:#eef3f5; --ink-soft:#a9b6bf; --ink-dim:#6c7b86;
  --accent:#ff5a36; --accent-2:#ffb38a; --glass:#0ea5a4; --good:#3ddc97;
  --radius:18px; --radius-sm:12px; --maxw:980px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 30px 70px -28px rgba(0,0,0,.85);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh;
  background:
    radial-gradient(1100px 560px at 80% -10%, rgba(255,90,54,.13), transparent 60%),
    radial-gradient(840px 640px at -5% 6%, rgba(14,165,164,.07), transparent 55%),
    var(--bg-0);
  color:var(--ink);
  font-family:"Public Sans", system-ui, sans-serif;
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.ob-top{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,4vw,40px);
}
.ob-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.ob-brand-word{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; letter-spacing:-.01em; font-size:18px}
.ob-top-right{display:flex; align-items:center; gap:16px}
.ob-save{
  font-family:"DM Mono",monospace; font-size:11px; color:var(--good);
  opacity:0; transition:opacity .4s var(--ease);
  display:inline-flex; align-items:center; gap:6px;
}
.ob-save.show{opacity:.9}
.ob-save::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--good)}
.ob-exit{font-size:13px; color:var(--ink-dim); text-decoration:none}
.ob-exit:hover{color:var(--ink-soft)}

/* ── progress ────────────────────────────────────────────────────────────── */
.ob-progress{position:relative; z-index:3; height:3px; background:var(--line); margin:0 clamp(16px,4vw,40px)}
.ob-progress-bar{height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:3px; transition:width .55s var(--ease)}

/* ── stage ───────────────────────────────────────────────────────────────── */
.ob-stage{
  position:relative; z-index:2; flex:1;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:clamp(24px,5vw,56px) clamp(16px,4vw,40px) 40px;
}
.ob-step{animation:obIn .5s var(--ease)}
.ob-step.leaving{animation:obOut .28s var(--ease) forwards}
@keyframes obIn{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
@keyframes obOut{to{opacity:0; transform:translateY(-12px)}}

.ob-eyebrow{
  font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 14px;
  display:flex; align-items:center; gap:9px;
}
.ob-eyebrow::before{content:""; width:22px; height:2px; background:var(--accent); border-radius:2px}
.ob-title{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:clamp(28px,4.6vw,46px); line-height:1.04; letter-spacing:-.02em; margin:0 0 12px;
}
.ob-sub{color:var(--ink-soft); font-size:clamp(15px,1.7vw,18px); max-width:60ch; margin:0 0 30px}

/* ── tile grid (multi/single select) ─────────────────────────────────────── */
.ob-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ob-tile{
  position:relative; text-align:left; cursor:pointer;
  background:var(--bg-1); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:20px 18px 18px; color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease);
  display:flex; flex-direction:column; gap:8px; min-height:128px;
}
.ob-tile:hover{border-color:var(--line-2); transform:translateY(-2px)}
.ob-tile.sel{border-color:var(--accent); background:linear-gradient(180deg,rgba(255,90,54,.10),var(--bg-1))}
.ob-tile-ico{font-size:26px; line-height:1}
.ob-tile-ico svg{width:30px; height:30px; display:block}
.ob-tile-name{font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:18px}
.ob-tile-desc{font-size:13.5px; color:var(--ink-soft); line-height:1.45}
.ob-tile-check{
  position:absolute; top:14px; right:14px; width:24px; height:24px; border-radius:50%;
  border:1.5px solid var(--line-2); display:grid; place-items:center;
  transition:all .2s var(--ease); color:#0a0d0f;
}
.ob-tile.sel .ob-tile-check{background:var(--accent); border-color:var(--accent)}
.ob-tile-check svg{width:13px; height:13px; opacity:0; transition:opacity .2s}
.ob-tile.sel .ob-tile-check svg{opacity:1}

/* ── form fields ─────────────────────────────────────────────────────────── */
.ob-form{display:grid; gap:18px; max-width:680px; grid-template-columns:1fr 1fr}
.ob-field{display:flex; flex-direction:column; gap:7px}
.ob-field.col-2{grid-column:span 2}
.ob-label{font-size:13.5px; color:var(--ink-soft); font-weight:600; display:flex; gap:7px; align-items:center}
.ob-label .opt{font-weight:400; color:var(--ink-dim); font-size:12px}
.ob-input{
  background:var(--bg-1); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  color:var(--ink); font:inherit; font-size:16px; padding:13px 14px;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.ob-input::placeholder{color:var(--ink-dim)}
.ob-input:focus{outline:none; border-color:var(--accent); background:var(--bg-2)}
.ob-input.bad{border-color:#e0534b}
.ob-hint{font-size:12.5px; color:var(--ink-dim)}
.ob-err{font-size:12.5px; color:#e0816f; min-height:1em}

/* small inline pills (e.g. service area chips) */
.ob-chips{display:flex; flex-wrap:wrap; gap:9px}
.ob-chip{
  cursor:pointer; padding:9px 15px; border-radius:999px; font-size:14px;
  background:var(--bg-1); border:1.5px solid var(--line); color:var(--ink-soft);
  transition:all .18s var(--ease);
}
.ob-chip:hover{border-color:var(--line-2)}
.ob-chip.sel{border-color:var(--accent); color:var(--ink); background:rgba(255,90,54,.10)}

/* ── template gallery (final) ────────────────────────────────────────────── */
.ob-tpls{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.ob-tpl{
  position:relative; border:1.5px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--bg-1); cursor:pointer;
  transition:border-color .2s var(--ease), transform .14s var(--ease);
}
.ob-tpl:hover{transform:translateY(-3px); border-color:var(--line-2)}
.ob-tpl.sel{border-color:var(--accent)}
/* faux-site mockup thumbnail (tinted per template via --tpa) */
.ob-tpl-shot{height:170px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#121922,#0b0f13); padding:13px}
.ob-tpl-shot .mk-nav{position:absolute; top:11px; left:13px; right:13px; height:9px; border-radius:3px;
  background:rgba(255,255,255,.12)}
.ob-tpl-shot .mk-nav::after{content:""; position:absolute; right:0; top:0; width:34px; height:9px; border-radius:3px;
  background:var(--tpa); opacity:.9}
.ob-tpl-shot .mk-hero{position:absolute; top:30px; left:13px; right:13px; height:74px; border-radius:7px;
  background:radial-gradient(130% 150% at 78% 0%, var(--tpa), transparent 62%), linear-gradient(180deg,#1b242d,#11181e);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.ob-tpl-shot .mk-h1{position:absolute; top:14px; left:16px; width:54%; height:11px; border-radius:3px;
  background:rgba(255,255,255,.9)}
.ob-tpl-shot .mk-h2{position:absolute; top:31px; left:16px; width:38%; height:7px; border-radius:3px;
  background:rgba(255,255,255,.45)}
.ob-tpl-shot .mk-btn{position:absolute; bottom:14px; left:16px; width:62px; height:14px; border-radius:4px;
  background:var(--tpa)}
.ob-tpl-shot .mk-cards{position:absolute; left:13px; right:13px; bottom:13px; display:flex; gap:8px}
.ob-tpl-shot .mk-cards i{flex:1; height:34px; border-radius:6px;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.ob-tpl-shot::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(8,11,13,.35))}
.ob-tpl-body{padding:15px 17px 17px}
.ob-tpl-name{font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:18px; display:flex; align-items:center; gap:9px}
.ob-tpl-desc{font-size:13.5px; color:var(--ink-soft); margin-top:5px}
.ob-tpl-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.ob-tpl-tag{font-family:"DM Mono",monospace; font-size:10.5px; color:var(--ink-dim);
  border:1px solid var(--line); border-radius:6px; padding:3px 7px; text-transform:uppercase; letter-spacing:.04em}
.ob-badge{
  font-family:"DM Mono",monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  background:var(--accent); color:#0a0d0f; padding:3px 8px; border-radius:6px; font-weight:500;
}
.ob-tpl-pick{
  position:absolute; top:12px; right:12px; z-index:2; width:26px; height:26px; border-radius:50%;
  background:rgba(8,11,13,.6); border:1.5px solid rgba(255,255,255,.25); display:grid; place-items:center;
  color:#0a0d0f; transition:all .2s var(--ease);
}
.ob-tpl.sel .ob-tpl-pick{background:var(--accent); border-color:var(--accent)}
.ob-tpl-pick svg{width:14px; height:14px; opacity:0; transition:opacity .2s}
.ob-tpl.sel .ob-tpl-pick svg{opacity:1}

/* ── review / summary chips on final ─────────────────────────────────────── */
.ob-recap{
  display:flex; flex-wrap:wrap; gap:8px; margin:-12px 0 26px;
}
.ob-recap-chip{
  font-size:12.5px; color:var(--ink-soft);
  background:var(--bg-1); border:1px solid var(--line); border-radius:999px; padding:5px 12px;
}
.ob-recap-chip b{color:var(--ink); font-weight:600}

/* ── done screen ─────────────────────────────────────────────────────────── */
.ob-done{max-width:620px; text-align:center; margin:6vh auto 0}
.ob-done-ring{
  width:78px; height:78px; border-radius:50%; margin:0 auto 22px; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, rgba(255,90,54,.22), transparent 70%);
  border:1.5px solid rgba(255,90,54,.5);
}
.ob-done-ring svg{width:34px; height:34px; color:var(--accent)}
.ob-done .ob-btn-solid{margin-top:26px}

/* ── footer / nav ────────────────────────────────────────────────────────── */
.ob-foot{
  position:sticky; bottom:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,40px);
  background:linear-gradient(180deg,transparent,rgba(10,13,15,.92) 38%);
  backdrop-filter:blur(6px);
}
.ob-foot-meta{font-family:"DM Mono",monospace; font-size:12px; color:var(--ink-dim); display:flex; gap:8px}
.ob-foot-dot{opacity:.5}
.ob-btn{
  font:inherit; font-weight:600; font-size:15px; cursor:pointer; border-radius:999px;
  padding:12px 24px; border:1.5px solid transparent; transition:all .18s var(--ease);
}
.ob-btn-solid{background:var(--accent); color:#0a0d0f; border-color:var(--accent)}
.ob-btn-solid:hover{filter:brightness(1.07); transform:translateY(-1px)}
.ob-btn-solid:disabled{opacity:.4; cursor:not-allowed; transform:none; filter:none}
.ob-btn-ghost{background:transparent; color:var(--ink-soft); border-color:var(--line)}
.ob-btn-ghost:hover{border-color:var(--line-2); color:var(--ink)}
.ob-btn-ghost:disabled{opacity:0; pointer-events:none}

@media (max-width:620px){
  .ob-form{grid-template-columns:1fr}
  .ob-field.col-2{grid-column:span 1}
  .ob-foot-meta{display:none}
  .ob-btn{padding:12px 18px}
}