/* Focused Scopes — Own It (white-label). Builds on homepage.css shared
   components (nav, hero, buttons, cards, footer); tokens only. */

em { font-style: italic; color: var(--accent-light); font-weight: var(--weight-semibold); }

/* ---------------------------------------------------------------- Hero mock
   The signature visual: the buyer's brand as a web app on their own domain. */
.wl-mock { max-width: 560px; margin-inline: auto; }
.wl-domain {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-style: normal; font-weight: var(--weight-bold); color: var(--text-secondary);
  padding: 6px 12px; border-radius: var(--radius-sm); background: rgba(2,55,69,0.6);
  box-shadow: var(--ring-subtle);
}
.wl-mock-body { padding: var(--space-5); }
.wl-store { display: flex; align-items: center; gap: var(--space-4); }
.wl-logo-slot {
  width: 64px; height: 64px; flex: none; border-radius: 15px;
  border: 1.5px dashed var(--accent-dark); display: grid; place-items: center;
  font-size: 10.5px; font-style: normal; font-weight: var(--weight-bold); color: var(--accent);
  text-align: center; line-height: 1.15; background: var(--accent-dim);
}
.wl-store-meta { flex: 1; min-width: 0; }
.wl-store-meta b { display: block; font-size: 16px; font-weight: var(--weight-extrabold); color: var(--text-primary); }
.wl-store-meta small { display: block; font-size: 12.5px; font-style: normal; color: var(--text-secondary); margin: 2px 0 6px; }
.wl-install { font-size: 11.5px; font-style: normal; color: var(--text-muted); font-weight: var(--weight-semibold); }
.wl-install b { color: var(--accent-light); font-weight: var(--weight-extrabold); }
.wl-open {
  flex: none; align-self: center; background: var(--grad); color: var(--bg-deep);
  font-style: normal; font-weight: var(--weight-extrabold); font-size: 12.5px;
  padding: 8px 22px; border-radius: var(--radius-pill); letter-spacing: .5px; box-shadow: var(--elev-2);
}
.wl-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.wl-chips span { font-size: 11px; color: var(--text-secondary); padding: 5px 11px;
  border-radius: var(--radius-pill); background: var(--bg-card); box-shadow: var(--ring-subtle); }

/* ---------------------------------------------------------------- Who it's for */
.wl-who { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
.wl-who-card {
  background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--elev-1);
  transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo);
}
.wl-who-card:hover { transform: var(--lift); box-shadow: var(--elev-2); }
.wl-who-card .ic {
  width: 40px; height: 40px; border-radius: 11px; background: var(--accent-dim); color: var(--accent-light);
  display: grid; place-items: center; box-shadow: var(--ring-subtle); margin-bottom: var(--space-3);
  font-size: 13px; font-style: normal; font-weight: var(--weight-extrabold);
}
.wl-who-card b { display: block; font-size: var(--step-0); font-weight: var(--weight-extrabold); color: var(--text-primary); margin-bottom: 6px; }
.wl-who-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* ---------------------------------------------------------------- Tiers (2-up) */
.wl-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); align-items: stretch;
  max-width: 940px; margin-inline: auto; margin-top: var(--space-6); }
.wl-tiers .tier-price .amt { font-size: var(--step-4); }
.wl-tiers .tier-feats strong { color: var(--text-primary); font-weight: var(--weight-bold); }
.wl-tiers .tier-feats li.also { padding-left: 0; margin-top: var(--space-2); padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle); color: var(--text-muted); }
.wl-tiers .tier-feats li.also::before { display: none; }

/* ---------------------------------------------------------------- Service modes */
.wl-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
.wl-mode {
  background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--elev-2);
  transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo);
}
.wl-mode:hover { transform: var(--lift); box-shadow: var(--elev-3); }
.wl-mode-tag { font-size: 11px; font-style: normal; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: var(--space-2); }
.wl-mode h3 { font-size: var(--step-2); font-weight: var(--weight-extrabold); color: var(--text-primary); margin: 0 0 var(--space-3); }
.wl-mode > p { font-size: var(--step-0); color: var(--text-secondary); line-height: var(--leading-body); margin: 0 0 var(--space-4); }
.wl-mode ul { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 9px; }
.wl-mode ul li { position: relative; padding-left: 20px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.wl-mode ul li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent-dim); box-shadow: var(--ring-subtle); }

/* ---------------------------------------------------------------- Strip (kept vs stripped, hard rules) */
.wl-strip {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: var(--space-7);
  box-shadow: var(--elev-2), var(--edge-top); margin-top: var(--space-6);
}
.wl-strip-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-7); }
.wl-strip-row.single { grid-template-columns: 1fr; }
.wl-strip h4 { display: flex; align-items: center; gap: 10px; font-size: var(--step-0);
  font-weight: var(--weight-extrabold); color: var(--text-primary); margin: 0 0 var(--space-4); }
.wl-strip h4::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.wl-strip .x h4::before { background: var(--red); box-shadow: 0 0 0 4px var(--red-dim); }
.wl-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.wl-strip ul li { position: relative; padding-left: 18px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
.wl-strip ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 1.5px; background: var(--text-muted); }
.wl-strip ul li strong { color: var(--text-primary); }
.wl-quote { margin: var(--space-6) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle);
  font-size: var(--step-0); color: var(--text-primary); line-height: var(--leading-body);
  text-align: center; font-weight: var(--weight-medium); }

/* ---------------------------------------------------------------- Price band */
.wl-band h2 .grad { font-style: normal; }
.wl-band .band-sub { font-size: var(--step-1); color: var(--text-primary); font-weight: var(--weight-semibold); margin: 0 0 var(--space-4); }
.wl-band .band-fine { font-size: 13px; color: var(--text-secondary); max-width: 52ch; margin-inline: auto; line-height: 1.6; }

/* ---------------------------------------------------------------- Timeline */
.wl-timeline { max-width: 720px; margin: var(--space-6) auto 0; text-align: center;
  background: var(--bg-card); border-radius: var(--radius-xl); padding: var(--space-7); box-shadow: var(--elev-2); }
.wl-timeline-num { font-size: var(--step-5); font-weight: var(--weight-black); font-style: normal;
  color: var(--accent); letter-spacing: var(--tracking-display); line-height: 1; margin: 0; }
.wl-timeline-num span { font-size: var(--step-0); color: var(--text-secondary); font-weight: var(--weight-medium); margin-left: 8px; }
.wl-timeline-text { font-size: var(--step-1); color: var(--text-primary); font-weight: var(--weight-semibold); margin: var(--space-3) 0 0; }
.wl-timeline-fine { font-size: 13px; color: var(--text-secondary); margin: var(--space-2) 0 0; line-height: 1.6; }

/* ---------------------------------------------------------------- FAQ */
.wl-faq { max-width: 880px; margin: var(--space-6) auto 0; }
.wl-faq details { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--elev-1); }
.wl-faq details + details { margin-top: var(--space-3); }
.wl-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  font-size: var(--step-0); font-weight: var(--weight-bold); color: var(--text-primary); line-height: 1.45; }
.wl-faq summary::-webkit-details-marker { display: none; }
.wl-faq summary::after { content: ""; width: 16px; height: 16px; flex: none; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease-out-expo); }
.wl-faq details[open] summary::after { transform: rotate(180deg); }
.wl-faq .a { padding: 0 var(--space-5) var(--space-5); font-size: 14px; color: var(--text-secondary); line-height: var(--leading-body); margin: 0; }
.wl-faq .a strong { color: var(--accent-light); }

/* ---------------------------------------------------------------- Responsive */
/* The nav CTA pair is too wide for small screens ("Request a discovery call"
   wraps the whole bar); the burger menu and hero repeat both actions. */
@media (max-width: 700px) { .nav-cta .btn-ghost { display: none; } }
@media (max-width: 560px) { .nav-cta .btn-primary { display: none; } }
@media (max-width: 980px) {
  .wl-who { grid-template-columns: repeat(2, 1fr); }
  .wl-tiers, .wl-modes { grid-template-columns: 1fr; }
  .wl-strip-row { grid-template-columns: 1fr; gap: var(--space-6); }
  .wl-strip { padding: var(--space-6) var(--space-5); }
}
@media (max-width: 620px) {
  .wl-who { grid-template-columns: 1fr; }
  .wl-store { flex-wrap: wrap; }
  .wl-open { align-self: flex-start; }
  .wl-timeline { padding: var(--space-6) var(--space-5); }
}

/* ================================================================ v2 (2026-07-21)
   Brand-swap demo, grouped Baseline feats, intake form, phase timeline,
   larger glowing nav logo, branded scrollbar. */

/* Nav logo sizing/glow and the brand scrollbar moved to homepage.css
   (site-wide, 2026-07-21). */

/* ---------------------------------------------------------------- Brand-swap demo */
.wl-mock .wl-open { background: var(--wl-brand, var(--accent)); }
.wl-mock .wl-logo-slot {
  border-color: var(--wl-brand, var(--accent-dark));
  color: var(--wl-brand, var(--accent));
  background: var(--wl-brand-dim, var(--accent-dim));
}
.wl-mock .wl-logo-slot.has-initials { font-size: 22px; font-weight: var(--weight-black); letter-spacing: .02em; }
.wl-mock .wl-install b { color: var(--wl-brand-light, var(--accent-light)); }

.wl-try {
  max-width: 560px; margin: var(--space-4) auto 0;
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
  padding: 8px 10px 8px var(--space-4); box-shadow: var(--ring-subtle);
}
.wl-try-field { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 200px; }
.wl-try-field span { font-size: 10.5px; font-style: normal; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.wl-try-field input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  color: var(--text-primary); font-size: 14px; font-weight: var(--weight-semibold);
  padding: 8px 0;
}
.wl-try-field input::placeholder { color: var(--text-muted); }
.wl-try-swatches { display: flex; align-items: center; gap: 7px; }
.wl-try-swatches button {
  width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: var(--c); box-shadow: var(--ring-subtle);
  transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo);
}
.wl-try-swatches button:hover { transform: scale(1.15); }
.wl-try-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 4px var(--text-primary); }
.wl-try-custom {
  position: relative; width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--bg-card); box-shadow: var(--ring-subtle);
  color: var(--text-secondary); font-size: 14px; font-weight: var(--weight-bold); font-style: normal;
}
.wl-try-custom:hover { color: var(--text-primary); box-shadow: var(--ring-accent); }
.wl-try-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- Grouped tier feats */
.tier-feats li.grp {
  padding-left: 0; margin-top: var(--space-3);
  font-size: 10px; font-style: normal; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted);
}
.tier-feats li.grp::before { display: none; }
.tier-feats li.grp:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- Phase timeline */
.wl-timeline.v2 { max-width: 1080px; text-align: center; }
.wl-timeline.v2 .wl-timeline-num { margin-bottom: var(--space-5); }
.wl-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); text-align: left; }
.wl-phase {
  background: var(--bg-primary); border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--elev-1); border-top: 2px solid var(--accent);
}
.wl-phase .ph-days { display: block; font-size: 10.5px; font-style: normal; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.wl-phase b { display: block; font-size: 14.5px; font-weight: var(--weight-extrabold); color: var(--text-primary); margin-bottom: 6px; }
.wl-phase p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; margin: 0; }
.wl-timeline.v2 .wl-timeline-fine { margin-top: var(--space-5); }

/* ---------------------------------------------------------------- Intake form */
.wl-form {
  max-width: 760px; margin-inline: auto; text-align: left;
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--radius-xl);
  padding: var(--space-6); box-shadow: var(--elev-3), var(--edge-top);
  display: grid; gap: var(--space-4);
}
.wl-form label { display: grid; gap: 6px; font-size: 11px; font-style: normal;
  font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-muted); }
.wl-form label em { color: var(--accent); font-style: normal; }
.wl-form input, .wl-form select, .wl-form textarea {
  width: 100%; box-sizing: border-box; border: none; border-radius: var(--radius);
  background: var(--bg-card); box-shadow: var(--ring-subtle);
  color: var(--text-primary); font-size: 14px; font-weight: var(--weight-medium);
  letter-spacing: normal; text-transform: none; padding: 11px 13px; outline: none;
  transition: box-shadow var(--dur) var(--ease-out-expo);
}
.wl-form input:focus, .wl-form select:focus, .wl-form textarea:focus { box-shadow: var(--ring-accent); }
.wl-form input::placeholder, .wl-form textarea::placeholder { color: var(--text-muted); }
.wl-form select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a9aa3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 36px; }
.wl-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.wl-form-segs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.seg-ctl > span { display: block; font-size: 11px; font-style: normal; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.seg-ctl > div { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill);
  background: var(--bg-card); box-shadow: var(--ring-subtle); flex-wrap: wrap; }
.seg-ctl button {
  font-family: inherit; font-style: normal; font-weight: var(--weight-bold); font-size: 12px;
  cursor: pointer; border: none; padding: 7px 13px; border-radius: var(--radius-pill);
  color: var(--text-secondary); background: transparent;
  transition: color var(--dur) var(--ease-out-expo), background var(--dur) var(--ease-out-expo);
}
.seg-ctl button:hover { color: var(--text-primary); }
.seg-ctl button[aria-pressed="true"] { background: var(--grad); color: var(--bg-deep); box-shadow: var(--elev-1); }
.wl-form-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); }
.wl-form-err { margin: 0; font-size: 13px; color: var(--red); font-weight: var(--weight-semibold); }
.wl-sent {
  max-width: 760px; margin: var(--space-4) auto 0; text-align: left;
  background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--elev-2); display: grid; gap: var(--space-3);
}
.wl-sent[hidden] { display: none; }
.wl-sent > b { font-size: var(--step-0); color: var(--accent-light); font-weight: var(--weight-extrabold); }
.wl-sent > p { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
.wl-sent textarea { width: 100%; box-sizing: border-box; border: none; border-radius: var(--radius);
  background: var(--bg-deep); box-shadow: var(--ring-subtle); color: var(--text-secondary);
  font-family: inherit; font-style: normal; font-size: 12.5px; line-height: 1.55; padding: var(--space-3); resize: vertical; }
.wl-sent .btn { justify-self: start; }

/* ---------------------------------------------------------------- Price band trim */
.price-card.wl-band { padding-block: var(--space-7); }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 980px) {
  .wl-phases { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .wl-phases { grid-template-columns: 1fr; }
  .wl-form { padding: var(--space-5) var(--space-4); }
  .wl-form-grid, .wl-form-segs { grid-template-columns: 1fr; }
  .wl-try { border-radius: var(--radius-lg); }
}