/* Focused Scopes — White label (public teaser). Forked from ownit.css, trimmed
   to the price-free surfaces this page actually uses: the brand-swap hero mock,
   who-it's-for cards, the delivery timeline, and the contact intake form.
   Builds on homepage.css shared components (nav, hero, buttons, cards, footer);
   tokens only, no raw colour. */

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

/* ---------------------------------------------------------------- Nav current page */
.nav-links a[aria-current="page"] { color: var(--accent); }
.nav-menu a[aria-current="page"] { color: var(--accent); }

/* ---------------------------------------------------------------- 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); }

/* ---------------------------------------------------------------- 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%; }
.wl-try-reset { margin-left: auto; }
.wl-try-reset button {
  font-family: inherit; font-style: normal; font-weight: var(--weight-bold); font-size: 11px;
  cursor: pointer; border: none; padding: 7px 13px; border-radius: var(--radius-pill);
  color: var(--text-secondary); background: var(--bg-card); box-shadow: var(--ring-subtle);
  transition: color var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo);
}
.wl-try-reset button:hover { color: var(--text-primary); box-shadow: var(--ring-accent); }

/* ---------------------------------------------------------------- Who it's for */
.wl-who { display: grid; grid-template-columns: repeat(3, 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); }
/* Widened from the ownit original: these labels are words ("REHAB"), not the
   two-letter monograms that page used, so the chip has to size to its text. */
.wl-who-card .ic {
  display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 12px;
  border-radius: var(--radius-pill); background: var(--accent-dim); color: var(--accent-light);
  box-shadow: var(--ring-subtle); margin-bottom: var(--space-3);
  font-size: 10.5px; font-style: normal; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-eyebrow);
}
.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; }
.wl-who-note {
  margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--ring-subtle);
  font-size: var(--step-0); color: var(--text-secondary); line-height: var(--leading-body);
}
.wl-who-note b { color: var(--text-primary); font-weight: var(--weight-bold); }

/* ---------------------------------------------------------------- What you receive */
.wl-receive-note {
  margin: var(--space-5) 0 0; font-size: 13.5px; color: var(--text-secondary);
  line-height: 1.6; max-width: var(--measure);
}
.wl-receive-note strong { color: var(--text-primary); }

/* ---------------------------------------------------------------- Timeline */
.wl-timeline { max-width: 1080px; 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 0 var(--space-5); }
.wl-timeline-num span { font-size: var(--step-0); color: var(--text-secondary); font-weight: var(--weight-medium); margin-left: 8px; }
.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-fine { font-size: 13px; color: var(--text-secondary); margin: var(--space-5) 0 0; line-height: 1.6; }

/* ---------------------------------------------------------------- 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);
}
/* The UA [hidden] rule loses to any author display rule, so every element this
   page hides with the attribute gets an explicit override right next to it. */
.wl-form[hidden] { display: none; }
.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); }
/* The caption is wrapped in its own <span> so the required asterisk stays on the
   caption line — a bare text node plus <em> would each become their own grid
   row and push the star onto a line of its own. */
.wl-form label > span { display: block; }
.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-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); }
.wl-form-fine { margin: 0; font-size: 12px; color: var(--text-muted); font-style: normal; line-height: 1.6; }
.wl-form-err { margin: 0; font-size: 13px; color: var(--red); font-weight: var(--weight-semibold); line-height: 1.6; }
.wl-form-err[hidden] { display: none; }
.wl-form-err a { color: var(--accent-light); text-decoration: underline; }

.wl-sent {
  max-width: 760px; margin-inline: auto; text-align: left;
  background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--elev-2); display: grid; gap: var(--space-3);
}
.wl-sent[hidden] { display: none; }
.wl-sent > b { font-size: var(--step-1); 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-reach { margin: var(--space-5) 0 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; }
.wl-reach a { font-weight: var(--weight-bold); }
.wl-reach .sep { color: var(--text-muted); margin: 0 8px; }

/* ---------------------------------------------------------------- Responsive */
/* The nav CTA pair is too wide for small screens; the burger menu and the 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-phases { grid-template-columns: repeat(2, 1fr); }
}
@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); }
  .wl-phases { grid-template-columns: 1fr; }
  .wl-form { padding: var(--space-5) var(--space-4); }
  .wl-form-grid { grid-template-columns: 1fr; }
  .wl-try { border-radius: var(--radius-lg); }
  .wl-try-reset { margin-left: 0; }
}