/* =================================================================
   Dental Deals — Marketing Site Shared CSS
   Extends colors_and_type.css with site-level chrome, layout, and
   component primitives reused across all pages. Intended to drop
   into Rails/Tailwind: tokens map to existing CSS variables, class
   names are flat and BEM-ish to keep the ERB port mechanical.
   ================================================================= */

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #fff;
  color: var(--base-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- layout ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 1024px) {
  .wrap, .wrap-narrow { padding: 0 24px; }
}
@media (max-width: 600px) {
  .wrap, .wrap-narrow { padding: 0 18px; }
}
@media (max-width: 380px) {
  .wrap, .wrap-narrow { padding: 0 14px; }
}

section { position: relative; }
.bg-offwhite { background: #fafaf9; }
.bg-cream { background: var(--color-brand-cream); }
.bg-ink { background: var(--color-gray-950); color: #fff; }

/* ---------- type utilities ---------- */
.eyebrow {
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .12em;
  text-transform: uppercase; color: var(--base-text-tertiary);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-brand-green);
}
.eyebrow--plain::before { display: none; }
.eyebrow--ink { color: rgba(255,255,255,.7); }

.display {
  font-size: clamp(44px, 6.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: var(--fw-bold);
  color: var(--color-gray-950);
  margin: 0;
  text-wrap: balance;
}
.display-md { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; font-weight: var(--fw-bold); color: var(--color-gray-950); margin: 0; text-wrap: balance; }
.display-sm { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.025em; font-weight: var(--fw-bold); color: var(--color-gray-950); margin: 0; }
.lede { font-size: var(--text-xl); line-height: 1.55; color: var(--base-text-secondary); max-width: 580px; text-wrap: pretty; }
.lede-lg { font-size: var(--text-xl); line-height: 1.5; color: var(--base-text-secondary); max-width: 640px; text-wrap: pretty; }
.text-muted { color: var(--base-text-tertiary); }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: 8px;
  font-size: var(--text-md); font-weight: var(--fw-semibold); letter-spacing: -0.005em;
  border: 1px solid rgba(10,10,10,.12);
  background: #fff; color: var(--color-gray-950);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.25) inset, 0 1px 2px 0 rgba(0,0,0,.04);
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--color-gray-50); }
.btn svg { width: 16px; height: 16px; stroke-width: 2; }
.btn-lg { height: 52px; padding: 0 22px; font-size: var(--text-lg); border-radius: 10px; }
.btn-sm { height: 36px; padding: 0 14px; font-size: var(--text-base); border-radius: 6px; }
.btn-primary {
  background: var(--color-gray-950); color: #fff; border-color: var(--color-gray-950);
}
.btn-primary:hover { background: var(--color-gray-800); border-color: var(--color-gray-800); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.25); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
/* btn-ghost defaults to white text for the dark sections (data, final-cta).
   The hero sits on a light photo-overlay, so the ghost CTA there needs dark
   text and a dark hairline border instead. Scoped to the hero so the dark
   sections stay untouched. */
.hero__cta .btn-ghost { color: var(--color-gray-950); border-color: rgba(10,10,10,.16); }
.hero__cta .btn-ghost:hover { background: var(--color-gray-50); border-color: rgba(10,10,10,.28); }
.btn-link {
  background: transparent; border: 0; box-shadow: none; padding: 0; height: auto;
  color: var(--color-gray-950); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: color-mix(in oklab, currentColor, transparent 70%);
}
.btn-link:hover { text-decoration-color: currentColor; background: transparent; }
.btn-disabled-wrapper {
  display: inline-block;
  cursor: not-allowed;
  position: relative;
}
.btn-disabled-wrapper .btn {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
  user-select: none;
}
.btn-disabled-wrapper::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gray-950);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.btn-disabled-wrapper:hover::after {
  opacity: 1;
}

/* ---------- pills / chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px; border-radius: 9999px;
  font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase;
  background: var(--color-gray-100); color: var(--color-gray-800);
}
.pill--active { background: #ecfdf5; color: #065f46; }
.pill--offer  { background: #fff7ed; color: #9a3412; }
.pill--deal   { background: var(--color-gray-950); color: #fff; }
.pill--sold   { background: #f5f5f5; color: var(--base-text-tertiary); text-decoration: line-through; }
.pill--navy   { background: #eef2f9; color: var(--color-brand-navy); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 6px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  background: #fff; color: var(--color-gray-800);
  border: 1px solid var(--base-border-tertiary);
}

/* ---------- cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--base-border-tertiary);
  border-radius: 12px;
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.card-flat { background: #fff; border: 1px solid var(--base-border-tertiary); border-radius: 12px; }

/* ---------- stats ---------- */
.stat { padding: 18px 20px; border: 1px solid var(--base-border-tertiary); border-radius: 10px; background: #fff; }
.stat .k { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--base-text-tertiary); margin-bottom: 8px; }
.stat .v { font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--color-gray-950); font-variant-numeric: tabular-nums; }
.stat .d { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-green-700); margin-top: 4px; }
.stat .d.down { color: var(--color-red-700); }

/* ---------- app chrome (impersonation + nav) — matches dashboard sticky header behavior ---------- */
.marketing-chrome {
  position: sticky;
  top: 0;
  z-index: 50;
}

.marketing-chrome .site-nav {
  /* Parent is sticky; avoid nested sticky so the bar + nav move as one unit */
  position: static;
  top: auto;
}

/* ---------- nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--base-border-tertiary);
}
.site-nav__inner {
  height: 68px; display: flex; align-items: center; justify-content: space-between;
}
.site-nav__brand { display: flex; align-items: center; gap: 36px; }
.site-nav__brand img { height: 22px; }
.site-nav__links { position: relative; display: flex; align-items: center; gap: 4px; }
/* Sliding capsule indicator — rests behind the active tab, follows hover/focus.
   Animates only left/width (top/height snap), per design_handoff_navbar. */
.site-nav__pill {
  position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0;
  border-radius: var(--radius-lg);
  background: var(--color-gray-100);
  opacity: 0; pointer-events: none;
  transition: left .38s cubic-bezier(.5,.05,.2,1), width .38s cubic-bezier(.5,.05,.2,1);
}
.site-nav__pill.is-ready { opacity: 1; }
.site-nav__links a {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; height: 44px; padding: 0 16px;
  border-radius: var(--radius-lg);
  font-size: var(--text-lg); font-weight: var(--fw-medium); color: var(--color-gray-500);
  white-space: nowrap;
  transition: color .2s ease;
}
.site-nav__links a:hover { color: var(--color-gray-800); }
.site-nav__links a.is-active { color: var(--color-gray-950); font-weight: var(--fw-semibold); }
.site-nav__cta { display: flex; align-items: center; gap: 10px; }

/* User menu — matches app dropdown-menu/menu-component visually */
.site-nav__user-menu { position: relative; list-style: none; }
.site-nav__user-menu > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px;
}
.site-nav__user-menu > summary::-webkit-details-marker { display: none; }
.site-nav__user-menu > summary:hover { background: var(--base-bg-hover); }
.site-nav__user-menu__trigger-text {
  display: flex; flex-direction: column; align-items: flex-end;
}
.site-nav__user-menu__name {
  font-size: var(--text-md); font-weight: var(--fw-medium); line-height: 20px;
  color: var(--base-text); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 120px;
}
.site-nav__user-menu__role {
  font-size: var(--text-sm); color: var(--base-text-tertiary); line-height: 16px;
}
.site-nav__user-menu__avatar {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.site-nav__user-menu__dropdown {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--background); border: 1px solid var(--base-border-tertiary);
  border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  min-width: 200px; z-index: 200; overflow: hidden;
}
.site-nav__user-menu__dropdown ul {
  list-style: none; margin: 0; padding: 8px 0;
}
.site-nav__user-menu__dropdown li { padding: 0; }
.site-nav__user-menu__dropdown li form { margin: 0; }
.site-nav__user-menu__dropdown li a,
.site-nav__user-menu__dropdown li form button {
  display: block; width: 100%; text-align: left;
  padding: 6px 24px; font-size: var(--text-md); font-weight: var(--fw-regular); line-height: 24px;
  color: var(--base-text); text-decoration: none;
  background: none; border: none; cursor: pointer;
}
.site-nav__user-menu__dropdown li a:hover,
.site-nav__user-menu__dropdown li form button:hover {
  background: var(--base-bg-hover); color: var(--base-text-secondary);
}

/* Sign-in pill */
.site-nav__auth-pair {
  display: flex; align-items: center;
  border: 1px solid rgba(10,10,10,.12);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.site-nav__auth-link {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 16px;
  font-size: var(--text-md); font-weight: var(--fw-semibold); letter-spacing: -0.005em;
  color: var(--color-gray-700);
  white-space: nowrap;
  transition: background .12s, color .12s;
  text-decoration: none;
}
.site-nav__auth-link:hover { background: var(--color-gray-50); color: var(--color-gray-950); }
.site-nav__auth-divider { width: 1px; align-self: stretch; background: rgba(10,10,10,.12); flex-shrink: 0; }
.site-nav__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; pointer-events: none;
}
.site-nav__progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--color-brand-navy), var(--color-brand-green));
  transition: width .08s linear;
}
/* Mobile drawer + hamburger */
.site-nav__toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--base-border-tertiary);
  border-radius: 8px; padding: 0; cursor: pointer;
  flex-direction: column; gap: 4px;
}
.site-nav__toggle__bar {
  display: block; width: 18px; height: 2px;
  background: var(--color-gray-950); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.site-nav.is-open .site-nav__toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav.is-open .site-nav__toggle__bar:nth-child(2) { opacity: 0; }
.site-nav.is-open .site-nav__toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-nav__drawer {
  display: none;
  border-top: 1px solid var(--base-border-tertiary);
  background: #fff;
  padding: 16px 0 24px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.site-nav.is-open .site-nav__drawer { display: block; }
.site-nav__drawer__links { display: flex; flex-direction: column; padding: 0 20px; }
.site-nav__drawer__links a {
  padding: 14px 4px; font-size: var(--text-lg); font-weight: var(--fw-semibold);
  color: var(--color-gray-950);
  border-bottom: 1px solid var(--base-border-tertiary);
}
.site-nav__drawer__links a:last-child { border-bottom: 0; }
.site-nav__drawer__links a.is-active { color: var(--color-brand-green); }
.site-nav__drawer__cta {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px 0;
}
.site-nav__drawer__cta .btn { width: 100%; justify-content: center; }

@media (max-width: 1024px) {
  .site-nav__inner { height: 64px; }
  .site-nav__brand { gap: 0; }
  .site-nav__links { display: none; }
  .site-nav__cta .site-nav__list,
  .site-nav__cta .site-nav__user-menu { display: none; }
  .site-nav__cta .site-nav__auth-pair { display: inline-flex; }
  .site-nav__cta .site-nav__auth-link { height: 40px; padding: 0 12px; font-size: var(--text-base); }
  .site-nav__toggle { display: inline-flex; }
}
/* On open, prevent body scroll under drawer */
body.site-nav-locked { overflow: hidden; }

/* Auth pages — login, sign-up, password set/reset. Shared chrome: a thin top
   bar with just the brand mark, then a vertically-centered card on a soft
   gray-50 page bg. */
.auth-body { background: var(--color-gray-50); min-height: 100vh; }
.auth-top {
  display: flex; align-items: center;
  padding: 20px 32px;
  background: var(--color-gray-50);
}
.auth-top__logo { display: inline-flex; align-items: center; }
.auth-top__logo img { height: 28px; width: auto; }
.auth-main {
  min-height: calc(100vh - 68px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px 64px;
  background: var(--color-gray-50);
}
@media (max-width: 640px) {
  .auth-top { padding: 16px 20px; }
  .auth-top__logo img { height: 24px; }
}

/* Auth icon circle */
.auth-icon-circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(34,197,94,.12);
  display: flex; align-items: center; justify-content: center;
}
.auth-icon-circle__icon { width: 28px; height: 28px; color: var(--color-brand-green); }

/* Shared auth form primitives */
.auth-field { margin-bottom: 16px; }
.auth-label { display: block; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--color-gray-700); margin-bottom: 6px; }
.auth-input {
  display: block; width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid rgba(10,10,10,.14); border-radius: 8px;
  font-size: var(--text-lg); color: var(--color-gray-950); background: #fff;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.auth-input:focus { border-color: var(--color-brand-green); box-shadow: 0 0 0 3px rgba(34,197,94,.12); }
.auth-input::placeholder { color: var(--color-gray-400); }
.auth-submit {
  display: block; width: 100%; height: 48px; margin-top: 8px;
  background: var(--color-gray-950); color: #fff; border: none;
  border-radius: 8px; font-size: var(--text-lg); font-weight: var(--fw-semibold);
  letter-spacing: -0.005em; cursor: pointer; transition: background .15s;
}
.auth-submit:hover { background: #111; }

/* Role picker — radio cards used on the sign-up step-1 screen. */
.role-pick { display: block; cursor: pointer; }
.role-pick__inner {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border: 1px solid var(--color-gray-300); border-radius: 12px;
  background: #fff; transition: border-color .15s, background .15s, box-shadow .15s;
}
.role-pick__icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--color-gray-100); color: var(--color-gray-700);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.role-pick__check {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-gray-950); color: #fff;
  display: none; align-items: center; justify-content: center; flex-shrink: 0;
}
.role-pick:has(:checked) .role-pick__inner,
.role-pick--locked .role-pick__inner {
  border-color: var(--color-gray-950); background: var(--color-gray-50);
  box-shadow: 0 0 0 3px rgba(20,20,20,.06);
}
.role-pick:has(:checked) .role-pick__icon,
.role-pick--locked .role-pick__icon { background: var(--color-gray-950); color: #fff; }
.role-pick:has(:checked) .role-pick__check,
.role-pick__check--on { display: flex; }
.role-pick--locked { cursor: default; }

/* Step dots — sign-up flow progress indicator. */
.step-dots { display: flex; gap: 6px; }
.step-dots__dot { flex: 1; height: 4px; border-radius: 999px; background: var(--color-gray-300); }
.step-dots__dot--active { background: var(--color-gray-950); }
.step-dots__dot--done { background: var(--color-green-700, oklch(52.7% .154 150.069)); }

/* Email chip on sign-up step 2. */
.email-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px; border-radius: 999px;
  background: var(--color-gray-100); border: 1px solid var(--color-gray-300);
  font-size: var(--text-base); color: var(--color-gray-800);
  max-width: 100%;
}
.email-chip__email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-chip__change {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); padding: 4px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--color-gray-300); color: var(--color-gray-800);
  cursor: pointer; text-decoration: none;
}
.email-chip__change:hover { background: var(--color-gray-50); }

/* ---------- footer ---------- */
.site-foot {
  background: var(--color-gray-950); color: rgba(255,255,255,.7);
  padding: 72px 0 32px;
  font-size: var(--text-md);
}
.site-foot__grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 48px; margin-bottom: 56px; }
.site-foot__brand p { max-width: 320px; line-height: 1.55; color: rgba(255,255,255,.6); margin: 16px 0 0; }
.site-foot__brand img { height: 24px; filter: invert(1); }
.site-foot h5 {
  color: #fff; font-size: var(--text-sm); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .1em; margin: 0 0 18px;
}
.site-foot a { display: block; padding: 5px 0; color: rgba(255,255,255,.6); font-weight: var(--fw-medium); }
.site-foot a:hover { color: #fff; }
.site-foot__bottom {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 24px; font-size: var(--text-sm); color: rgba(255,255,255,.45);
}
.site-foot__legal { display: flex; gap: 24px; }

@media (max-width: 900px) {
  .site-foot { padding: 56px 0 28px; }
  .site-foot__grid { grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 40px; }
  .site-foot__brand { grid-column: 1 / -1; }
  .site-foot__brand p { max-width: 520px; }
}
@media (max-width: 540px) {
  .site-foot__grid { grid-template-columns: 1fr; gap: 28px; }
  .site-foot__bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
  .site-foot__legal { flex-wrap: wrap; gap: 16px; }
}

/* ---------- generic section blocks ---------- */
.section { padding: 104px 0; }
.section--sm { padding: 64px 0; }
.section--lg { padding: 140px 0; }
.section-head { max-width: 720px; margin-bottom: 56px; }
@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .section--sm { padding: 48px 0; }
  .section--lg { padding: 80px 0; }
  .section-head { margin-bottom: 32px; }
  .display { font-size: clamp(32px, 8vw, 44px); }
  .display-md { font-size: clamp(26px, 6.5vw, 36px); }
  .display-sm { font-size: clamp(22px, 5.5vw, 28px); }
}
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { margin: 0 0 16px; }

/* ---------- cta block ---------- */
.cta-block {
  background: var(--color-gray-950); color: #fff;
  border-radius: 16px; padding: 72px 56px;
  position: relative; overflow: hidden;
}
@media (max-width: 760px) {
  .cta-block { padding: 48px 24px; border-radius: 14px; }
}
.cta-block h2 { color: #fff; margin: 0 0 16px; }
.cta-block p { color: rgba(255,255,255,.7); max-width: 560px; margin: 0 0 32px; font-size: var(--text-lg); }
.cta-block .btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- page header hero (non-landing pages) ---------- */
.page-hero { padding: 120px 0 80px; border-bottom: 1px solid var(--base-border-tertiary); }
.page-hero h1 { margin: 16px 0 20px; }
.page-hero .lede { font-size: var(--text-xl); }
@media (max-width: 760px) {
  .page-hero { padding: 56px 0 48px; }
  .page-hero .lede, .page-hero .lede-lg { font-size: var(--text-lg); }
}

/* ---------- grids helper ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
}

/* ---------- selection ---------- */
::selection { background: var(--color-gray-950); color: #fff; }

/* ---------- focus ring ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--base-border-focus); outline-offset: 2px; border-radius: 4px;
}

/* ---------- impersonation banner (exact copy from tailwind/components/alert.css) ---------- */
.banner {
  background: var(--base-bg-base);
  color: var(--base-text-secondary);
  padding: 16px;
  display: flex;
  align-items: center;
  font-size: var(--text-md);
  line-height: 20px;
  justify-content: center;
  gap: 8px;

  & svg {
    height: 20px;
    width: 20px;
    color: var(--base-icon);
    flex-shrink: 0;
  }

  & h4 a, & p a {
    display: inline;
    margin-right: 0px;
  }

  & p {
    font-weight: var(--fw-regular);
    color: var(--base-text-secondary);
  }

  &.banner-impersonate {
    background: var(--bg-danger-hover);
    color: var(--text-on-danger);

    & a {
      color: var(--text-on-danger);
    }

    & > * + * {
      margin-left: 8px;
    }
  }
}

/* Marketing resets `a { text-decoration: none }`; restore Tailwind-style underline from the helper */
.banner.banner-impersonate a.underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/*
  Log out uses Jumpstart `btn btn-secondary btn-small` (see flash_helper.rb).
  Mirror app/assets/tailwind/components/buttons.css here — marketing pages do not load `tailwind.css`.
*/
.banner.banner-impersonate .btn {
  display: inline-flex;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-lg);
  box-shadow:
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    oklab(0.999994 0.0000455678 0.0000200868 / 0.2) 0px 1px 0px 0px inset;
  font-weight: var(--fw-semibold);
  line-height: 20px;
  font-size: var(--text-sm);
  height: calc(var(--spacing) * 10);
  padding-inline: calc(var(--spacing) * 4);
  border: 1px solid #0000001a;
  background: var(--bg-secondary);
  color: var(--text-on-secondary);
  white-space: nowrap;
}

.banner.banner-impersonate .btn:hover {
  cursor: pointer;
  background: var(--bg-secondary-hover);
  color: var(--text-on-secondary-hover);
}

.banner.banner-impersonate .btn:focus-visible {
  outline: 2px solid var(--base-border-focus);
  outline-offset: 2px;
}

.banner.banner-impersonate .btn:disabled {
  opacity: 60%;
  cursor: not-allowed;
}

.banner.banner-impersonate .btn:disabled:hover {
  background: var(--bg-secondary);
  color: var(--text-on-secondary);
}

.banner.banner-impersonate .btn.btn-small,
.banner.banner-impersonate .btn.btn-sm {
  height: calc(var(--spacing) * 8);
  padding-inline: calc(var(--spacing) * 3);
}

/* ── Terms-of-service acceptance row (shared/_terms_acceptance_checkbox) ──
   Self-contained, PLAIN CSS (no @layer, no :where/:has/CSS-nesting) so it
   renders identically on every browser AND in every layout that hosts the
   partial (auth, onboarding, native). The app's normal checkbox styling lives
   in the Tailwind v4 bundle, which wraps everything in `@layer` — and `@layer`
   is dropped whole by WebKit < 15.4 (the Hotwire Native iOS WKWebView / older
   Safari the seller-invite sign-up runs in). When that happens the checkbox
   fell back to the native control and stacked above its label. This component
   draws the box itself so the acceptance row never depends on `@layer`.
   Un-layered rules also outrank layered ones, so this wins on modern browsers
   too → one consistent render everywhere. Tokens come from
   marketing/colors_and_type.css (loaded on the same layouts); fallbacks keep
   it correct even if a token is missing. */
.tos-accept {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 24px;
}

.tos-accept input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  padding: 0;
  border: 1px solid var(--base-border-secondary, #9ca3af);
  border-radius: 4px;
  background-color: var(--base-bg-base, #fff);
  cursor: pointer;
  position: relative;
}

.tos-accept input[type="checkbox"]:checked {
  background-color: var(--bg-primary, #205e3a);
  border-color: var(--bg-primary, #205e3a);
}

/* Border-drawn checkmark — no SVG/mask, so it renders on every WebKit. */
.tos-accept input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tos-accept input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--base-border-focus, #2563eb);
  outline-offset: 2px;
}

.tos-accept label {
  margin: 0;
  color: var(--base-text, #1f2937);
  font-size: var(--text-md);
  line-height: 22px;
  font-weight: 400;
  cursor: pointer;
}

/* Required marker (the box is always required); plain CSS so it shows even
   where Tailwind's `.form-group:has(:required)` asterisk is dropped. */
.tos-accept label::after {
  content: " *";
  color: var(--icon-on-danger-secondary, #dc2626);
}

.tos-accept a {
  color: inherit;
  text-decoration: underline;
}