/* Store Pickup Alert only (layouts/stock). SnapDub never loads this file. */
:root { --bg:#000; --panel:#141416; --line:#2a2a2e; --ink:#f5f5f7; --ink-2:#a1a1a6; --ink-3:#6e6e73; --green:#30d158; --radius:18px; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.sp-wrap { max-width:980px; margin:0 auto; padding:0 16px; }
.sp-nav { display:flex; justify-content:space-between; align-items:center; height:56px; }
.sp-brand { display:flex; gap:8px; align-items:center; font-weight:600; text-decoration:none; font-size:15px; }
.sp-brand__dot { width:22px; height:22px; border-radius:6px; background:url("/stock-icon.svg") center/cover; box-shadow:0 0 0 1px var(--line); }
.sp-nav a.sp-link { font-size:14px; text-decoration:none; color:var(--ink-2); }
.sp-hero { text-align:center; padding:64px 0 32px; }
.sp-hero h1 { font-size:clamp(34px,6vw,60px); line-height:1.05; letter-spacing:-0.02em; margin:0 auto 18px; max-width:760px; }
.sp-hero p { color:var(--ink-2); font-size:clamp(16px,2.2vw,19px); max-width:640px; margin:0 auto 26px; line-height:1.45; }
.sp-cta-row { display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; }
.sp-btn { display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 24px; border-radius:999px; background:var(--ink); color:#000; font-weight:600; font-size:16px; text-decoration:none; border:0; cursor:pointer; }
.sp-btn--block { width:100%; }
.sp-btn[disabled] { opacity:.4; cursor:default; }
.sp-small { font-size:13px; color:var(--ink-3); }
.sp-section { padding-top:56px; padding-bottom:56px; border-top:1px solid var(--line); }
.sp-section h2 { font-size:clamp(26px,4vw,38px); letter-spacing:-0.01em; margin:0 0 10px; }
.sp-section .sp-lead { color:var(--ink-2); margin:0 0 28px; font-size:17px; line-height:1.5; }
.sp-toast { background:rgba(40,40,44,.92); border-radius:16px; padding:12px 14px; display:flex; gap:12px; text-align:left; max-width:360px; margin:0 auto; }
.sp-toast__icon { width:36px; height:36px; border-radius:9px; background:url("/stock-icon.svg") center/cover; flex:none; }
.sp-toast__meta { font-size:12px; color:var(--ink-3); display:flex; justify-content:space-between; }
.sp-toast__title { font-size:14px; font-weight:600; }
.sp-toast__body { font-size:14px; color:var(--ink-2); }
.sp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sp-stat { background:var(--panel); border-radius:var(--radius); padding:20px; }
.sp-stat b { display:block; font-size:30px; letter-spacing:-0.01em; }
.sp-stat span { color:var(--ink-2); font-size:14px; }
.sp-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sp-step { background:var(--panel); border-radius:var(--radius); padding:22px; }
.sp-step i { font-style:normal; display:inline-flex; width:28px; height:28px; border-radius:50%; background:var(--ink); color:#000; align-items:center; justify-content:center; font-weight:700; margin-bottom:12px; }
.sp-step h3 { margin:0 0 6px; font-size:18px; }
.sp-step p { margin:0; color:var(--ink-2); line-height:1.45; }
.sp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.sp-card { background:var(--panel); border-radius:14px; padding:16px; text-decoration:none; display:block; border:1px solid transparent; }
.sp-card:hover { border-color:var(--line); }
.sp-card b { display:block; font-size:16px; }
.sp-card span { color:var(--ink-2); font-size:14px; }
.sp-badge { display:inline-block; font-size:12px; font-weight:600; padding:3px 8px; border-radius:999px; margin-top:8px; background:#1d3b25; color:var(--green); }
.sp-badge--off { background:#2a2a2e; color:var(--ink-2); }
.sp-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sp-plan { background:var(--panel); border-radius:var(--radius); padding:24px; text-align:center; border:1px solid transparent; cursor:pointer; min-width:0; }
.sp-plan.is-on { border-color:var(--ink); }
.sp-plan b { font-size:38px; }
.sp-plan small { color:var(--ink-2); }
.sp-faq details { border-bottom:1px solid var(--line); padding:16px 0; }
.sp-faq summary { cursor:pointer; font-size:17px; font-weight:600; list-style:none; }
.sp-faq p { color:var(--ink-2); line-height:1.5; margin:10px 0 0; }
.sp-footer { padding:40px 0 60px; color:var(--ink-3); font-size:13px; border-top:1px solid var(--line); }
.sp-list { columns:3 220px; font-size:14px; color:var(--ink-2); }
.sp-list h4 { color:var(--ink); margin:14px 0 6px; break-after:avoid; font-size:15px; }
.sp-list div { break-inside:avoid; margin:0 0 4px; }
.sp-table { width:100%; border-collapse:collapse; font-size:14px; }
.sp-table td,.sp-table th { padding:10px 6px; border-bottom:1px solid var(--line); text-align:left; }
.sp-flash { background:var(--panel); border-radius:12px; padding:12px 16px; margin:12px 0; font-size:14px; }
/* wizard */
.sp-wizard { max-width:420px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; padding:12px 16px 20px; }
.sp-wizard__top { display:flex; align-items:center; gap:14px; height:40px; }
.sp-wizard__back { background:none; border:0; color:var(--ink); font-size:22px; cursor:pointer; padding:0 4px; }
.sp-progress { flex:1; height:3px; background:var(--line); border-radius:3px; overflow:hidden; }
.sp-progress i { display:block; height:100%; background:var(--ink); transition:width .25s; }
.sp-wizard h1 { font-size:28px; margin:22px 0 6px; letter-spacing:-0.01em; }
.sp-wizard .sp-sub { color:var(--ink-2); margin:0 0 18px; font-size:15px; }
.sp-wizard__body { flex:1; }
.sp-option { display:flex; justify-content:space-between; align-items:center; width:100%; padding:16px; margin-bottom:8px; border-radius:14px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:16px; cursor:pointer; text-align:left; }
.sp-option.is-on { border-color:var(--ink); }
.sp-option small { color:var(--ink-2); font-size:13px; }
.sp-swatches { display:flex; gap:14px; justify-content:center; margin:24px 0; }
.sp-swatch { width:34px; height:34px; border-radius:50%; border:2px solid var(--line); cursor:pointer; }
.sp-swatch.is-on { border-color:var(--green); }
.sp-input, .sp-select { width:100%; height:50px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--ink); padding:0 14px; font-size:16px; margin-bottom:10px; }
.sp-check { display:flex; gap:12px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; cursor:pointer; }
.sp-check input { width:20px; height:20px; accent-color:var(--green); }
.sp-summary { background:var(--panel); border-radius:14px; padding:14px; margin-bottom:14px; font-size:14px; }
/* The wizard column is narrow at every width: Starter and Plus side by side, Max full width below. */
.sp-wizard .sp-plans { grid-template-columns:1fr 1fr; }
.sp-wizard .sp-plans .sp-plan:last-child { grid-column:span 2; }
.sp-wizard .sp-plan { padding:20px 12px; }
.sp-skip { display:block; text-align:center; color:var(--ink-2); margin-top:14px; font-size:14px; background:none; border:0; cursor:pointer; text-decoration:underline; width:100%; }
[hidden] { display:none !important; }
@media (max-width:640px) {
  .sp-stats, .sp-steps { grid-template-columns:1fr; }
  .sp-plans { grid-template-columns:1fr 1fr; }
  .sp-plans .sp-plan:last-child { grid-column:span 2; }
}