/* Teegem app chrome — marketing + dashboard/CMS.
   Brand palette: evergreen / sand / brass. Fonts: Fraunces (display) + Libre Franklin (text).
   Kept small and dependency-free; this is the product clients log into, so it should feel premium. */

:root {
  --evergreen: #10302c;
  --evergreen-2: #18443d;
  --ink: #14201d;
  --sand: #f4efe4;
  --sand-2: #efe7d6;
  --paper: #fbf8f1;
  --brass: #b08433;
  --brass-2: #c79a47;
  --line: #e2d9c6;
  --text: #2a2f2c;
  --muted: #6d7570;
  --ok: #2f6b4f;
  --ok-bg: #e6f0e9;
  --warn: #8a5a16;
  --warn-bg: #f6ecd8;
  --err: #9a3328;
  --err-bg: #f7e3df;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 18px 50px -28px rgba(16, 48, 44, .45);
  --maxw: 1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, legend {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 460;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 .4em;
}

h1 { font-size: clamp(2rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.2rem; }

em { font-style: italic; color: var(--brass); }

a { color: var(--evergreen); text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: 0 0 1rem; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .6rem;
}

.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  padding: .8em 1.3em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--evergreen);
  color: var(--sand);
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.btn:hover { background: var(--evergreen-2); text-decoration: none; transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--brass-2); outline-offset: 2px; }
.btn .ar { transition: transform .15s ease; }
.btn:hover .ar { transform: translateX(3px); }

.btn--lg { padding: 1em 1.7em; font-size: 1.02rem; }
.btn--sm { padding: .55em .95em; font-size: .85rem; }
.btn--block { width: 100%; justify-content: center; }
.btn--ink { background: var(--ink); color: var(--sand); }
.btn--ink:hover { background: #0c1714; }
.btn--ghost {
  background: transparent;
  color: var(--evergreen);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--sand-2); }
.btn--light { background: var(--sand); color: var(--evergreen); }
.btn--light:hover { background: #fff; }

/* ---------- header / footer ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 248, 241, .9);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.logo { display: inline-flex; align-items: center; gap: .55em; color: var(--evergreen); }
.logo:hover { text-decoration: none; }
.logo-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--evergreen);
  color: var(--brass-2);
}
.logo-mark svg { width: 19px; height: 19px; }
.logo-word { font-family: "Fraunces", serif; font-size: 1.35rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.logo-word.small { font-size: 1.05rem; }
.header-nav { display: flex; align-items: center; gap: 1.1rem; }
.header-nav a { font-weight: 500; font-size: .94rem; }
.header-nav__link { display: none; }
.header-nav .who { display: none; color: var(--muted); font-size: .85rem; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline { margin: 0; display: inline; }

@media (min-width: 760px) { .header-nav .who, .header-nav__link { display: inline; } }

/* account switcher (native <details> dropdown — no JS) */
.switcher { position: relative; }
.switcher__btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .42em .55em .42em .65em; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 500; color: var(--ink);
  list-style: none; max-width: 60vw;
}
.switcher__btn::-webkit-details-marker { display: none; }
.switcher__btn:hover { border-color: var(--brass); }
.switcher__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brass); flex: 0 0 auto; }
.switcher__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16ch; }
.switcher__caret { width: 11px; height: 8px; color: var(--muted); transition: transform .15s ease; flex: 0 0 auto; }
.switcher[open] .switcher__caret { transform: rotate(180deg); }
.switcher__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  min-width: 260px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.switcher__label { margin: 4px 8px 6px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.switcher__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: .55em .65em; border-radius: var(--radius-sm); font-weight: 500;
}
.switcher__item:hover { background: var(--sand-2); text-decoration: none; }
.switcher__item.is-active { background: var(--sand); }
.switcher__item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher__all { display: block; margin-top: 4px; padding: .55em .65em; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-size: .88rem; font-weight: 500; color: var(--muted); }
.switcher__all:hover { background: var(--sand-2); text-decoration: none; }

/* role chips — consistent everywhere a role is shown */
.role-chip {
  display: inline-flex; align-items: center;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .28em .65em; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.role-chip--owner   { background: var(--evergreen); color: var(--sand); }
.role-chip--manager { background: #e9e2d0; color: #6a4f17; border-color: #ddd0b0; }
.role-chip--staff   { background: var(--sand-2); color: var(--muted); border-color: var(--line); }

.site-footer { border-top: 1px solid var(--line); margin-top: 72px; background: var(--sand); }
.footer-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 28px; }
.logo--footer { color: var(--evergreen); }
.logo--footer .logo-mark { width: 28px; height: 28px; border-radius: 8px; }
.logo--footer .logo-mark svg { width: 16px; height: 16px; }

/* ---------- flashes ---------- */
.flashes { margin-top: 18px; display: grid; gap: 10px; }
.flash {
  display: flex; align-items: flex-start; gap: .7em;
  padding: .8em 1.1em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: .94rem;
}
.flash__icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 1.45em; height: 1.45em; border-radius: 50%;
  font-size: .8em; font-weight: 700; line-height: 1;
  background: currentColor;
}
.flash__icon::before { content: ""; }
.flash--success { background: var(--ok-bg); border-color: #bcd9c7; color: var(--ok); }
.flash--error   { background: var(--err-bg); border-color: #e7c2bb; color: var(--err); }
.flash--info    { background: var(--sand-2); border-color: var(--line); color: var(--ink); }
.flash .flash__icon { color: #fff; }
.flash--success .flash__icon { background: var(--ok); }
.flash--error   .flash__icon { background: var(--err); }
.flash--info    .flash__icon { background: var(--evergreen); }

/* ---------- landing ---------- */
.hero {
  background:
    radial-gradient(1200px 500px at 70% -10%, rgba(176,132,51,.12), transparent 60%),
    linear-gradient(180deg, var(--sand) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
}
.hero-inner { padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); max-width: 820px; }
.hero h1 { margin-bottom: .25em; }
.lede { font-size: clamp(1.05rem, 2vw, 1.3rem); color: #404641; max-width: 60ch; }

.url-box {
  margin-top: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  max-width: 680px;
}
.url-box--inline { margin: 8px 0 36px; }
.url-box__label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 10px; color: var(--ink); }
.url-box__row { display: flex; gap: 10px; flex-wrap: wrap; }
.url-box__row input {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 1.05rem;
  padding: .85em 1em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: inherit;
}
.url-box__row input:focus { outline: 3px solid var(--brass-2); outline-offset: 1px; border-color: var(--brass); }
.url-box__hint { margin: 12px 0 0; font-size: .88rem; color: var(--muted); }

.section-title { text-align: center; margin: 0 auto clamp(28px, 4vw, 44px); max-width: 22ch; }
.how { padding: clamp(48px, 7vw, 84px) 0; }
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.steps li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px;
}
.step-n {
  display: grid; place-items: center;
  width: 36px; height: 36px; margin-bottom: 14px;
  border-radius: 50%;
  background: var(--evergreen); color: var(--brass-2);
  font-family: "Fraunces", serif; font-size: 1.05rem;
}
.steps h3 { margin-bottom: .25em; }
.steps p { margin: 0; color: var(--muted); font-size: .95rem; }

.proof { background: var(--sand); border-block: 1px solid var(--line); padding: clamp(48px, 7vw, 84px) 0; }
.proof-inner { display: grid; gap: 38px; grid-template-columns: 1fr; align-items: center; }
.proof-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.proof-stats li {
  display: flex; align-items: baseline; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 20px;
}
.proof-stats strong { font-family: "Fraunces", serif; font-size: 1.5rem; color: var(--evergreen); min-width: 5.5ch; }
.proof-stats span { color: var(--muted); }
@media (min-width: 860px) { .proof-inner { grid-template-columns: 1.3fr 1fr; } }

.cta-band { background: var(--evergreen); color: var(--sand); text-align: center; padding: clamp(46px, 7vw, 78px) 0; }
.cta-band h2 { color: var(--sand); margin-bottom: 1em; }

/* ---------- auth ---------- */
.auth { display: grid; place-items: center; padding: clamp(36px, 6vw, 72px) 0; }
.auth-shell {
  width: 100%; max-width: 940px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); background: #fff;
}
@media (min-width: 820px) { .auth-shell { grid-template-columns: 1fr 1fr; } }
.auth-aside {
  display: none;
  padding: 44px 40px; color: var(--sand);
  background:
    radial-gradient(700px 320px at 110% -10%, rgba(199,154,71,.35), transparent 60%),
    linear-gradient(160deg, var(--evergreen) 0%, #0c2521 100%);
}
@media (min-width: 820px) { .auth-aside { display: block; } }
.auth-aside .eyebrow { color: var(--brass-2); }
.auth-aside h2 { color: var(--sand); font-size: 1.85rem; max-width: 16ch; }
.auth-aside__lede { color: rgba(244,239,228,.82); max-width: 36ch; }
.auth-aside__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.auth-aside__list li { position: relative; padding-left: 26px; color: rgba(244,239,228,.9); font-size: .95rem; }
.auth-aside__list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--brass-2); font-weight: 700;
}
.auth-card {
  width: 100%;
  background: #fff; padding: clamp(28px, 5vw, 44px);
  display: flex; flex-direction: column; justify-content: center;
}
.auth-card h1 { font-size: 1.9rem; }
.auth-card__badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ok); background: var(--ok-bg); border: 1px solid #bcd9c7;
  padding: .35em .8em; border-radius: 999px; margin-bottom: 14px;
}
.auth-card form { margin-top: 18px; }
.auth-alt { margin-top: 18px; text-align: center; font-size: .92rem; }

label { display: block; font-weight: 600; font-size: .88rem; margin: 14px 0 6px; color: var(--ink); }
input, select, textarea {
  width: 100%;
  font-family: inherit; font-size: 1rem;
  padding: .7em .85em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--brass-2); outline-offset: 1px; border-color: var(--brass); }
textarea { resize: vertical; line-height: 1.55; }
.field-hint { margin: 6px 0 0; font-size: .82rem; color: var(--muted); }
.auth-card .btn { margin-top: 22px; }

/* ---------- dashboard ---------- */
.dash { padding: clamp(34px, 5vw, 56px) 0; }
.dash-head { margin-bottom: 8px; }
.dash-head h1 { margin: 0; }
.dash-head p.muted { margin-top: .4rem; }
.dash-head--row { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }

.site-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.site-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; gap: 16px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.site-card:hover { border-color: #d6cbb2; box-shadow: var(--shadow); transform: translateY(-2px); }
.site-card__body { flex: 1; }
.site-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.site-card h3 { margin: 0 0 2px; }
.site-card__slug { margin: 4px 0 12px; font-size: .82rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.site-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pill { display: inline-block; font-size: .74rem; font-weight: 600; padding: .3em .7em; border-radius: 999px; }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--accent { background: #efe6d2; color: var(--brass); }

.empty {
  text-align: center; padding: 48px 24px;
  background: #fff; border: 1px dashed var(--line); border-radius: var(--radius);
}
.empty h3 { margin-bottom: .3em; }
.empty p { margin: 0 auto; max-width: 46ch; color: var(--muted); }
.empty--lg { padding: clamp(48px, 8vw, 84px) 24px; margin-top: 8px; }
.empty__art {
  width: 56px; height: 56px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 16px;
  background: var(--sand); color: var(--evergreen);
}
.empty__art svg { width: 28px; height: 28px; }

/* ---------- editor / CMS ---------- */
.editor { padding: clamp(28px, 4vw, 48px) 0; }
.editor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.editor-head h1 { margin: 0; }
.editor-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.review-note {
  margin: 12px 0 0; max-width: 60ch;
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid #e7d4ad; border-radius: var(--radius-sm);
  padding: .8em 1em; font-size: .9rem;
}

.editor-grid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .editor-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

.cms { display: grid; gap: 20px; }
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 22px 22px 26px; margin: 0;
}
.card legend {
  font-size: 1.05rem; padding: 0 .5em; margin-left: -.5em;
  color: var(--evergreen);
}

.thumb {
  margin-top: 10px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  width: 96px; height: 64px; object-fit: cover; display: block;
}
.thumb--hero { width: 100%; max-width: 320px; height: auto; aspect-ratio: 16/9; }

.gallery-edit { display: grid; gap: 12px; }
.gallery-edit__row { display: flex; align-items: center; gap: 12px; }
.gallery-edit__row .thumb { margin: 0; flex: 0 0 auto; }
.gallery-edit__row input { margin: 0; }

.cms-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cms-actions .muted { font-size: .86rem; }

.editor-preview { position: sticky; top: 90px; }
.editor-preview__frame {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; box-shadow: var(--shadow);
}
.editor-preview__bar { display: flex; gap: 7px; padding: 11px 14px; background: var(--sand-2); border-bottom: 1px solid var(--line); }
.editor-preview__bar span { width: 11px; height: 11px; border-radius: 50%; background: #cdbf9f; }
.editor-preview iframe { width: 100%; height: 70vh; min-height: 460px; border: 0; display: block; background: #fff; }
.preview-link { display: inline-block; margin-top: 12px; font-weight: 600; font-size: .9rem; }
.editor-preview__pending {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 2rem 1.5rem;
  min-height: 460px; height: 70vh; background: var(--sand-2, #f6f5f1);
}
.editor-preview__pending p { margin: 0; }

.site-card__pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.site-card__links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .86rem; font-weight: 500; }

/* ---------- account sub-nav ---------- */
.acct-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 26px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.acct-nav__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acct-nav__name { font-family: "Fraunces", serif; font-size: 1.15rem; color: var(--ink); }
.acct-nav__links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.acct-nav__links a {
  font-size: .9rem; font-weight: 500; padding: .42em .8em; border-radius: 999px;
  color: var(--evergreen);
}
.acct-nav__links a:hover { background: var(--sand-2); text-decoration: none; }
.acct-nav__links a.is-active { background: var(--evergreen); color: var(--sand); }
.acct-nav__links a.locked { color: var(--muted); }
.acct-nav__links a.locked .lock { font-size: .8em; }
.acct-nav__sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.acct-nav__back { color: var(--muted) !important; }

/* ---------- team / user management ---------- */
.team-grid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; margin-top: 8px; }
@media (min-width: 920px) { .team-grid { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); } }

.member-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.member {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px;
}
.member--pending { border-style: dashed; background: linear-gradient(0deg, var(--paper), #fff); }
.member__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--evergreen); color: var(--sand);
  font-family: "Fraunces", serif; font-size: 1.05rem;
}
.member--pending .avatar { background: var(--sand-2); color: var(--muted); }
.member__who { min-width: 0; }
.member__email { display: flex; align-items: center; gap: 8px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.member__note { display: block; font-size: .8rem; color: var(--brass); margin-top: 2px; }
.tag { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .18em .5em; border-radius: 999px; }
.tag--you { background: var(--sand-2); color: var(--muted); }
.member__role { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.role-form { margin: 0; display: flex; gap: 6px; align-items: center; }
.role-select { width: auto; padding: .45em 2em .45em .7em; font-size: .88rem; font-weight: 500; }
.role-select:disabled { opacity: .6; cursor: not-allowed; }
.member__lock { font-size: .78rem; color: var(--muted); font-style: italic; }
/* Solid danger button (standalone, e.g. Delete actions). */
.btn--danger { background: var(--err); color: #fff; border-color: var(--err); }
.btn--danger:hover { background: #832a21; border-color: #832a21; }
/* Ghost variant: subtle red text/border on a light background (in-list removes). */
.btn--ghost.btn--danger { background: transparent; color: var(--err); border-color: #e7c2bb; }
.btn--ghost.btn--danger:hover { background: var(--err-bg); border-color: #e7c2bb; }

.invite-card h3, .roles-key h3 { margin-bottom: .5em; }
.invite-form { display: grid; gap: 4px; margin-top: 14px; }
.invite-form .btn { margin-top: 16px; }
.roles-key { margin-top: 18px; }
.roles-key__list { margin: 0; display: grid; gap: 14px; }
.roles-key__list div { display: grid; gap: 5px; }
.roles-key__list dt { margin: 0; }
.roles-key__list dd { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.5; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- billing / plans ---------- */
.plan-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 24px; }
.plan-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px;
}
.plan-card--featured { border-color: var(--brass); box-shadow: var(--shadow); }
.plan-card--current { border-color: var(--evergreen); }
.plan-tag {
  position: absolute; top: -11px; left: 24px;
  background: var(--brass); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: .3em .8em; border-radius: 999px;
}
.plan-card h3 { margin-bottom: .2em; }
.plan-price { margin: 0 0 12px; }
.plan-price strong { font-family: "Fraunces", serif; font-size: 2rem; color: var(--evergreen); }
.plan-blurb { color: var(--muted); font-size: .92rem; min-height: 3.4em; }
.plan-features { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; flex: 1; }
.plan-features li { position: relative; padding-left: 24px; font-size: .92rem; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.plan-features li.off { color: var(--muted); }
.plan-features li.off::before { content: "–"; color: var(--muted); }
.plan-action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.plan-action form { margin: 0; }

/* ---------- integrations ---------- */
.integ-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 24px; }
.integ-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: border-color .18s ease, box-shadow .18s ease; }
.integ-card:hover { border-color: #d6cbb2; box-shadow: var(--shadow); }
.integ-card--on { border-color: #bcd9c7; background: linear-gradient(0deg, var(--ok-bg), #fff 60%); }
.integ-card--on:hover { border-color: var(--ok); }
.integ-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.integ-card__head h3 { margin: 0; flex: 1; }
.integ-mono {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--evergreen); color: var(--brass-2);
  font-family: "Fraunces", serif; font-size: 1.1rem;
}
.integ-card__blurb { color: var(--muted); font-size: .9rem; }
.integ-form { display: grid; gap: 6px; }
.integ-form .btn { justify-self: start; margin-top: 8px; }
.integ-form label { margin: 8px 0 0; }
.integ-meta { display: grid; gap: 6px; margin: 0 0 14px; font-size: .85rem; }
.integ-meta div { display: flex; gap: 8px; }
.integ-meta dt { color: var(--muted); text-transform: capitalize; min-width: 9ch; }
.integ-meta dd { margin: 0; font-family: ui-monospace, Menlo, monospace; }

/* ---------- tee sheet ---------- */
.pill { display: inline-block; font-size: .74rem; font-weight: 600; padding: .3em .7em; border-radius: 999px; background: var(--sand-2); color: var(--ink); }
.section-title--left { text-align: left; margin: 0 0 16px; max-width: none; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 8px 0 22px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.stat__n { display: block; font-family: "Fraunces", serif; font-size: 1.9rem; color: var(--evergreen); line-height: 1; }
.stat__l { display: block; margin-top: 6px; font-size: .82rem; color: var(--muted); }
.teesheet-day { display: flex; align-items: end; gap: 10px; margin: 8px 0 24px; flex-wrap: wrap; }
.teesheet-day label { margin: 0; }
.teesheet-day input { width: auto; }
.teesheet-day__spacer { flex: 1; }
.teesheet-grid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .teesheet-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.res-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.res-table th, .res-table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: top; }
.res-table th { background: var(--sand-2); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.res-time { font-weight: 600; font-family: ui-monospace, Menlo, monospace; }
.res-row--cancelled td, .res-row--no_show td { opacity: .55; }
.res-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.res-actions form { margin: 0; }
.slot-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 6px; }
.slot { display: flex; justify-content: space-between; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .88rem; }
.slot-time { font-weight: 600; font-family: ui-monospace, Menlo, monospace; }
.slot--full { opacity: .5; }
.teesheet-config { margin-top: 8px; }
.teesheet-config form { display: grid; gap: 4px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.teesheet-config .btn { justify-self: start; margin-top: 10px; }

/* ---------- staff tee-sheet day grid (quick book / block / move) ---------- */
.slot-list--grid .slot { flex-direction: column; align-items: stretch; gap: 6px; }
.slot-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.slot--blocked { background: var(--sand-2); opacity: .8; }
.slot-actions { margin: 0; }
.slot-actions summary { display: inline-flex; cursor: pointer; list-style: none; }
.slot-actions summary::-webkit-details-marker { display: none; }
.slot-form { display: grid; gap: 6px; margin-top: 8px; padding: 10px; background: var(--sand); border-radius: var(--radius-sm); }
.slot-form input, .slot-form select { width: 100%; }
.slot-form label { margin: 0; font-size: .8rem; }
.check { display: flex; align-items: center; gap: 6px; font-size: .85rem; margin: 0; }
.check--inline { display: inline-flex; margin-right: 10px; }
.check input { width: auto; margin: 0; }
.teesheet-block { margin-top: 12px; }
.teesheet-block summary { cursor: pointer; }
.block-form { display: grid; gap: 8px; margin-top: 12px; }
.weekday-pick { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; }
.block-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.block-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rate-cards input, .rate-cards select { width: 100%; }
.teesheet-setup form > .card { margin-bottom: 18px; }

/* ---------- public booking ---------- */
.book { padding: clamp(32px, 5vw, 56px) 0; }
.book-inner { max-width: 980px; }
.book-day { display: flex; align-items: end; gap: 10px; margin: 16px 0 28px; }
.book-day label { margin: 0; }
.book-day input { width: auto; }
.book-grid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .book-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.slot-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.slot-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.slot-btn:hover { border-color: var(--brass); text-decoration: none; background: var(--sand); }
.slot-btn.is-chosen { background: var(--evergreen); color: var(--sand); border-color: var(--evergreen); }
.slot-btn .slot-avail { font-size: .78rem; color: var(--muted); }
.slot-btn.is-chosen .slot-avail { color: rgba(244,239,228,.8); }
.book-form { display: grid; gap: 4px; }
.book-form legend { font-family: "Fraunces", serif; font-size: 1.1rem; color: var(--evergreen); margin-bottom: 8px; }
.book-form .btn { margin-top: 16px; }
.book-hint { padding: 28px; }

.book-confirm { text-align: center; max-width: 520px; margin: 0 auto; }
.confirm-check { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.confirm-check svg { width: 30px; height: 30px; }
.confirm-detail { text-align: left; display: grid; gap: 10px; margin: 24px 0; }
.confirm-detail div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.confirm-detail dt { color: var(--muted); margin: 0; }
.confirm-detail dd { margin: 0; font-weight: 500; }
.mono { font-family: ui-monospace, Menlo, monospace; }

/* ---------- finishing touches ---------- */
a:focus-visible,
.switcher__btn:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--brass-2);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:disabled, button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Mobile: let the header breathe; hide the email, keep the switcher + actions. */
@media (max-width: 560px) {
  .header-inner { gap: 10px; }
  .header-nav { gap: .7rem; }
  .switcher__name { max-width: 9ch; }
  .switcher__menu { position: fixed; left: 12px; right: 12px; top: 64px; min-width: 0; }
  .acct-nav { padding: 12px; }
  .dash-head--row { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .btn:hover, .site-card:hover { transform: none; }
}

/* ---------- status badge (state at a glance) ---------- */
.status-badge {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .76rem; font-weight: 600; letter-spacing: .01em;
  padding: .34em .8em; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.status-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.status-badge--info    { background: var(--sand-2);  color: var(--evergreen); border-color: var(--line); }
.status-badge--warn    { background: var(--warn-bg); color: var(--warn);      border-color: #e7d4ad; }
.status-badge--success { background: var(--ok-bg);   color: var(--ok);        border-color: #bcd9c7; }

/* ---------- progress bar ---------- */
.progress {
  height: 8px; border-radius: 999px; background: var(--sand-2);
  overflow: hidden; margin: 14px 0 4px; border: 1px solid var(--line);
}
.progress--sm { height: 6px; margin: 12px 0 0; }
.progress__bar { height: 100%; border-radius: 999px; transition: width .3s ease; }
.progress__bar--info    { background: var(--evergreen); }
.progress__bar--warn    { background: var(--brass); }
.progress__bar--success { background: var(--ok); }
.progress__caption { margin: 4px 0 0; font-size: .8rem; color: var(--muted); }

.site-card__name { color: var(--ink); }
.site-card__name:hover { color: var(--evergreen); text-decoration: none; }
.site-card__actions .grow { flex: 1; min-width: 0; }
.url-box--hero { margin-bottom: 26px; }

/* ---------- course hub ---------- */
.hub { padding: clamp(28px, 4vw, 48px) 0; }
.hub-head {
  display: grid; gap: 22px; align-items: start;
  grid-template-columns: 1fr; margin-bottom: 26px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 30px);
}
@media (min-width: 860px) { .hub-head { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.hub-head__main { min-width: 0; }
.hub-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hub-title h1 { margin: 0; }
.hub-slug { margin: 6px 0 0; font-size: .85rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }

.hub-next {
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px 18px 20px; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
}
.hub-next--done { background: var(--ok-bg); border-color: #bcd9c7; }
.hub-next__label { margin: 0 0 10px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hub-next .btn { width: 100%; justify-content: center; }
.hub-next__done { font-weight: 600; color: var(--ok); }

.hub-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .hub-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.hub-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 26px);
}
.hub-card__title { margin: 0 0 4px; font-size: 1.15rem; color: var(--evergreen); }
.hub-card__lead { margin: 0 0 18px; font-size: .92rem; }

/* checklist */
.checklist { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 2px; }
.checklist__item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-top: 1px solid var(--line);
}
.checklist__item:first-child { border-top: 0; }
.checklist__mark {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: .82rem; font-weight: 700;
  background: var(--sand-2); color: var(--muted); border: 1px solid var(--line);
}
.checklist__item.is-done .checklist__mark { background: var(--ok); color: #fff; border-color: var(--ok); }
.checklist__label { flex: 1; min-width: 0; font-weight: 500; }
.checklist__item.is-done .checklist__label { color: var(--muted); }
.checklist__cta {
  flex: 0 0 auto; font-size: .85rem; font-weight: 600; color: var(--evergreen);
  background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit;
}
.checklist__cta:hover { color: var(--brass); text-decoration: underline; }
.checklist__done-tag { flex: 0 0 auto; font-size: .74rem; font-weight: 600; color: var(--ok); }

/* iterate actions */
.iterate { display: grid; gap: 4px; }
.iterate form { margin: 6px 0 0; }
.iterate__hint { margin: 4px 0 12px; font-size: .82rem; color: var(--muted); }

/* timestamps */
.hub-meta {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 22px 0 0; padding: 18px clamp(16px, 3vw, 26px);
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius);
}
.hub-meta__item { display: flex; flex-direction: column; gap: 3px; }
.hub-meta__k { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hub-meta__v { font-weight: 500; font-size: .92rem; }

/* quick links */
.hub-links { display: flex; flex-wrap: wrap; gap: 18px; margin: 20px 2px 0; font-size: .9rem; font-weight: 500; }
.hub-link { color: var(--evergreen); }
.hub-link:hover { color: var(--brass); }
.hub-link--live { color: var(--ok); }
.hub-link--live:hover { color: var(--ok); text-decoration: underline; }

/* ---------- unpublished-changes banner (draft != live) ---------- */
.changes-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 18px; margin: 0 0 22px;
  padding: 16px clamp(16px, 3vw, 22px);
  background: var(--warn-bg); border: 1px solid #e7d4ad; border-radius: var(--radius);
}
.changes-banner__msg { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.changes-banner__msg div { display: flex; flex-direction: column; gap: 2px; }
.changes-banner__msg strong { color: var(--warn); }
.changes-banner__dot {
  flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%;
  background: var(--brass); box-shadow: 0 0 0 4px rgba(176, 132, 51, .18);
}
.changes-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 560px) {
  .changes-banner { flex-direction: column; align-items: stretch; }
  .changes-banner__actions { justify-content: flex-start; }
}

/* ---------- async-ingest build state (building / error) ---------- */
.build-state {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(28px, 5vw, 56px);
  margin: 26px auto; max-width: 640px; text-align: center;
}
.build-state h1 { margin: 0 0 12px; }
.build-state__lead { font-size: 1.05rem; margin: 0 0 10px; }
.build-state__fallback { margin-top: 18px; font-size: .9rem; }
.build-state__actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px;
}
.build-state__spinner {
  width: 40px; height: 40px; margin: 0 auto 20px; border-radius: 50%;
  border: 4px solid var(--line); border-top-color: var(--brass);
  animation: build-spin 1s linear infinite;
}
@keyframes build-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .build-state__spinner { animation: none; }
}
.build-state--error { border-color: #d9b3b3; }

/* ---------- footer nav (URL discoverability) ---------- */
.footer-nav { display: flex; gap: 18px; margin-left: auto; }
.footer-nav a { color: var(--muted); font-size: .9rem; font-weight: 500; }
.footer-nav a:hover { color: var(--ink); }
.header-nav__login { font-weight: 600; }

/* ---------- "Your links" card (discoverability) ---------- */
.links-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(18px, 3vw, 26px); margin: 0 0 26px;
}
.links-card__head { margin-bottom: 14px; }
.links-card__title { margin: 0 0 .25rem; font-size: 1.2rem; }
.links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.links-list__item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.links-list__item:first-child { border-top: 0; }
.links-list__item--hero { padding-top: 0; }
.links-list__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 240px; }
.links-list__k { font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.links-list__v { font-weight: 500; color: var(--ink); word-break: break-word; }
.links-list__v--url { font-family: "Fraunces", serif; font-size: 1.15rem; color: var(--evergreen); }
.links-list__note { font-size: .82rem; }
.links-list__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.copy-btn { cursor: pointer; }

/* ---------- subscriptions screen ---------- */
.billing .dash-head { margin-bottom: 18px; }
.sub-grid { display: grid; gap: 18px; grid-template-columns: 1.4fr 1fr; align-items: start; }
@media (max-width: 760px) { .sub-grid { grid-template-columns: 1fr; } }
.sub-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(16px, 2.6vw, 24px);
}
.sub-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sub-card__title { margin: 0; font-size: 1.1rem; }
.sub-plan__name { margin: 0; font-size: 1.05rem; font-weight: 600; }
.sub-plan__price { margin: .2rem 0 1rem; }
.sub-plan__price strong { font-family: "Fraunces", serif; font-size: 1.9rem; }
.change-plan summary { display: inline-flex; list-style: none; cursor: pointer; }
.change-plan summary::-webkit-details-marker { display: none; }
.plan-grid--compact { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
.plan-mini { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.plan-mini--current { border-color: var(--evergreen); background: var(--sand); }
.plan-mini__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plan-mini__name { font-weight: 600; }
.plan-mini__price { color: var(--muted); font-size: .9rem; }
.plan-mini__blurb { margin: .35rem 0 .6rem; font-size: .85rem; }

.line-items { list-style: none; margin: 0 0 12px; padding: 0; }
.line-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.line-item--plan .line-item__label { font-weight: 600; }
.line-item__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.line-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 8px; }
.line-total__label { font-weight: 600; }
.line-total__price { font-family: "Fraunces", serif; font-size: 1.5rem; }
.sub-cancel { margin-top: 16px; }
.sub-cancel__hint { font-size: .82rem; margin-top: 6px; }

/* ---------- add-ons ---------- */
.addons { margin-top: 28px; }
.addons__head { margin-bottom: 14px; }
.addon-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.addon-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
.addon-card--active { border-color: var(--evergreen); box-shadow: var(--shadow); }
.addon-card--locked { background: var(--sand); opacity: .85; }
.addon-card--soon { background: linear-gradient(180deg, #fff, var(--sand-2)); border-style: dashed; }
.addon-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.addon-card__label { margin: 0; font-size: 1.02rem; }
.addon-card__price { font-family: "Fraunces", serif; font-weight: 600; white-space: nowrap; }
.addon-card__blurb { font-size: .88rem; margin: 0; flex: 1 1 auto; }
.addon-card__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 4px; }
.addon-card__reason { font-size: .8rem; flex: 1 1 100%; }

/* ---------- billing history ---------- */
.sub-history { margin-top: 30px; }
.history-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .92rem; }
.history-table th { text-align: left; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.history-table td { padding: 10px; border-bottom: 1px solid var(--line); }
.history-table__id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); font-size: .85rem; }
.sub-history__note { font-size: .82rem; margin-top: 8px; }

/* ======================================================================
   MARKETING LANDING (lp-*) — ROI-forward, premium golf look.
   Evergreen / sand / brass + Fraunces. Fairway imagery vibe via CSS so the
   page ships with no binary assets but never feels like a SaaS gradient.
   ====================================================================== */

/* ---------- hero ---------- */
.lp-hero {
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(176,132,51,.14), transparent 60%),
    linear-gradient(180deg, var(--sand) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
}
.lp-hero__inner {
  display: grid; gap: clamp(32px, 5vw, 56px);
  grid-template-columns: 1fr; align-items: center;
  padding: clamp(44px, 7vw, 92px) 0 clamp(40px, 6vw, 80px);
}
@media (min-width: 940px) { .lp-hero__inner { grid-template-columns: 1.08fr .92fr; } }
.lp-hero__copy { max-width: 36rem; }
.lp-hero h1 { margin-bottom: .3em; }
.lp-hero .lede { color: #3c423d; }
.lp-hero__form { margin-top: 28px; max-width: 640px; }
.lp-hero__example { margin: 18px 0 0; }
.lp-textlink { font-weight: 600; display: inline-flex; align-items: center; gap: .4em; }
.lp-textlink .ar { transition: transform .15s ease; }
.lp-textlink:hover .ar { transform: translateX(3px); }

/* trust line under the hero CTA — wraps cleanly on a phone */
.lp-trustline {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  font-size: .82rem; font-weight: 600; color: var(--evergreen);
}
.lp-trustline li {
  display: inline-flex; align-items: center;
  padding: .4em .8em; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
}
.lp-trustline li::before {
  content: ""; width: 6px; height: 6px; margin-right: .55em;
  border-radius: 50%; background: var(--brass); flex: 0 0 auto;
}

/* browser-frame mock (hero "after" + before/after pair) */
.lp-hero__art { display: flex; justify-content: center; }
.lp-mock {
  width: 100%; max-width: 420px; margin: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.lp-mock__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: var(--sand-2); border-bottom: 1px solid var(--line);
}
.lp-mock__bar span { width: 11px; height: 11px; border-radius: 50%; background: #cdbf9f; }
.lp-mock__bar em {
  margin-left: 10px; font-style: normal; font-size: .76rem; color: var(--muted);
  font-family: ui-monospace, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-mock__shot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; min-height: 230px; padding: 30px 22px;
}
.lp-mock__shot--fairway {
  color: var(--sand);
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,.28), transparent 60%),
    linear-gradient(165deg, #1f5a3b 0%, var(--evergreen) 58%, #0c2521 100%);
}
.lp-mock__eyebrow { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-2); }
.lp-mock__title { font-family: "Fraunces", serif; font-size: 1.7rem; line-height: 1.1; color: #fff; }
.lp-mock__cta {
  margin-top: 6px; font-size: .82rem; font-weight: 600;
  padding: .55em 1.1em; border-radius: 999px; background: var(--brass); color: #fff;
}
.lp-mock__rows {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 14px 18px 18px; background: #fff; border-top: 1px solid var(--line);
}
.lp-mock__chip {
  font-size: .72rem; font-weight: 600; color: var(--evergreen);
  padding: .4em .85em; border-radius: 999px;
  background: var(--sand); border: 1px solid var(--line);
}
.lp-mock__shot--old {
  align-items: flex-start; gap: 12px; background: #e9e7e1; color: #8c8a84;
}
.lp-mock__old-h { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; letter-spacing: .05em; color: #5b5953; }
.lp-mock__old-line { width: 100%; height: 9px; border-radius: 4px; background: #d4d1c8; }
.lp-mock__old-line--short { width: 62%; }
.lp-mock__cap {
  display: block; padding: 8px 14px; font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: var(--sand); border-top: 1px solid var(--line);
}
.lp-mock__cap--after { color: var(--ok); }

/* ---------- ROI strip ---------- */
.lp-roi { background: var(--evergreen); color: var(--sand); padding: clamp(36px, 5vw, 60px) 0; }
.lp-roi__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 22px 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.lp-roi__item { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 2px solid var(--brass); }
.lp-roi__item strong { font-family: "Fraunces", serif; font-size: 1.18rem; color: #fff; font-weight: 500; }
.lp-roi__item span { color: rgba(244,239,228,.84); font-size: .92rem; }

/* ---------- why teegem vs the field (comparison) ---------- */
.lp-compare { padding: clamp(48px, 7vw, 88px) 0; }
.lp-compare__lede { text-align: center; max-width: 56ch; margin: -18px auto 28px; }
.lp-compare__takeaways {
  list-style: none; margin: 0 auto 34px; padding: 0; max-width: 880px;
  display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .lp-compare__takeaways { grid-template-columns: 1fr 1fr; } }
.lp-compare__takeaways li {
  display: flex; align-items: center; gap: 12px;
  background: var(--ok-bg); border: 1px solid #bcd9c7; border-radius: var(--radius-sm);
  padding: 14px 18px; font-weight: 600; color: var(--ink);
}
.lp-compare__takeaways li span {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: .8rem; font-weight: 700;
}

/* MOBILE-FIRST: each row is a card with data-label keys. Desktop: a real table. */
.lp-table {
  display: grid; gap: 14px; max-width: 920px; margin: 0 auto;
}
.lp-table__head { display: none; }
.lp-table__row {
  display: grid; gap: 4px 14px; grid-template-columns: 1fr;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
}
.lp-table__row span[role="cell"] { display: block; }
.lp-table__row span[data-label]::before {
  content: attr(data-label); display: block;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
.lp-table__co { font-family: "Fraunces", serif; font-size: 1.15rem; color: var(--evergreen); }
.lp-table__co[data-label]::before { color: var(--brass); }
.lp-table__row--win { border-color: var(--evergreen); box-shadow: var(--shadow); background: linear-gradient(0deg, var(--ok-bg), #fff 70%); }
.lp-table__row--win .lp-table__co { color: var(--evergreen); }
.lp-table__badge {
  display: inline-block; margin-left: .5em; vertical-align: middle;
  font-family: "Libre Franklin", sans-serif; font-size: .62rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sand);
  background: var(--brass); padding: .3em .65em; border-radius: 999px;
}

@media (min-width: 760px) {
  .lp-table { gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .lp-table__head {
    display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 14px;
    padding: 14px 22px; background: var(--evergreen); color: var(--sand);
  }
  .lp-table__head span { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .lp-table__row {
    grid-template-columns: 1fr 1.3fr 1.3fr; gap: 14px; align-items: center;
    border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
    padding: 18px 22px;
  }
  .lp-table__row span[data-label]::before { display: none; }
  .lp-table__row--win { box-shadow: none; }
}

/* ---------- before / after beat ---------- */
.lp-beat { padding: clamp(48px, 7vw, 88px) 0; }
.lp-beat__inner { display: grid; gap: clamp(28px, 5vw, 52px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .lp-beat__inner { grid-template-columns: .9fr 1.1fr; } }
.lp-beat__copy { max-width: 34rem; }
.lp-beat__pair { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; align-items: start; }
.lp-beat__pair .lp-mock { max-width: none; }
.lp-beat__pair .lp-mock__shot { min-height: 170px; padding: 22px 16px; }
.lp-beat__pair .lp-mock__title { font-size: 1.25rem; }

/* ---------- feature -> value cards ---------- */
.lp-features { background: var(--sand); border-block: 1px solid var(--line); padding: clamp(48px, 7vw, 88px) 0; }
.lp-feat-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.lp-feat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.lp-feat:hover { border-color: #d6cbb2; box-shadow: var(--shadow); transform: translateY(-2px); }
.lp-feat__ic {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: 12px; background: var(--sand); font-size: 1.35rem; line-height: 1;
}
.lp-feat h3 { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; margin-bottom: .35em; }
.lp-feat p { margin: 0; color: var(--muted); font-size: .94rem; }
.lp-feat__soon {
  font-family: "Libre Franklin", sans-serif; font-size: .62rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--brass);
  background: #efe6d2; padding: .25em .6em; border-radius: 999px;
}

/* three-step "how it works" reuses .steps; just cap to three across */
.steps--three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 980px; margin-inline: auto; }

/* ---------- pricing ---------- */
.lp-pricing { padding: clamp(48px, 7vw, 88px) 0; }
.lp-pricing__lede { text-align: center; max-width: 52ch; margin: -18px auto 36px; }
.lp-plan-grid { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 820px) { .lp-plan-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-plan {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px;
}
.lp-plan--featured { border-color: var(--evergreen); box-shadow: var(--shadow); }
.lp-plan__tag {
  position: absolute; top: -12px; left: 24px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sand); background: var(--brass); padding: .35em .8em; border-radius: 999px;
}
.lp-plan__name { margin: 0; font-size: 1.3rem; }
.lp-plan__price { margin: 2px 0 8px; }
.lp-plan__price strong { font-family: "Fraunces", serif; font-size: 2.1rem; color: var(--evergreen); font-weight: 500; }
.lp-plan__blurb { font-size: .9rem; min-height: 2.6em; }
.lp-plan__list { list-style: none; margin: 8px 0 20px; padding: 0; display: grid; gap: 9px; flex: 1 1 auto; }
.lp-plan__list li { position: relative; padding-left: 24px; font-size: .92rem; color: var(--text); }
.lp-plan__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 700; }
.lp-pricing__foot { text-align: center; max-width: 60ch; margin: 28px auto 0; font-size: .92rem; }

/* à la carte add-ons row */
.lp-pricing__addons-lede { text-align: center; margin: 34px 0 14px; font-size: .92rem; font-weight: 600; color: var(--ink); }
.lp-addons {
  list-style: none; margin: 0 auto; padding: 0; max-width: 920px;
  display: grid; gap: 10px; grid-template-columns: 1fr;
}
@media (min-width: 560px) { .lp-addons { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .lp-addons { grid-template-columns: repeat(5, 1fr); } }
.lp-addons li {
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px;
}
.lp-addons strong { font-size: .9rem; color: var(--ink); font-weight: 600; }
.lp-addons span { color: var(--brass); font-weight: 700; font-size: .88rem; }

/* ---------- built by golf people (trust) ---------- */
.lp-trust { background: var(--sand); border-block: 1px solid var(--line); padding: clamp(48px, 7vw, 88px) 0; }
.lp-trust__inner { display: grid; gap: clamp(28px, 5vw, 52px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .lp-trust__inner { grid-template-columns: 1.25fr 1fr; } }
.lp-trust h2 { max-width: 18ch; }
.lp-trust__stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lp-trust__stats li {
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px;
}
.lp-trust__stats strong { font-family: "Fraunces", serif; font-size: 1.35rem; color: var(--evergreen); font-weight: 500; }
.lp-trust__stats span { color: var(--muted); font-size: .92rem; }

/* ---------- final CTA band ---------- */
.cta-band__lede { color: rgba(244,239,228,.85); max-width: 46ch; margin: -.4em auto 1.6em; }
.url-box--onband { margin: 0 auto; background: rgba(255,255,255,.06); border-color: rgba(244,239,228,.25); }
.url-box--onband .url-box__label { color: var(--sand); }
.url-box--onband .url-box__row input { background: #fff; }

/* ---------- landing: two paths (rebuild OR from scratch) ---------- */
.lp-paths { padding: clamp(36px, 5vw, 60px) 0; }
.lp-paths__grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .lp-paths__grid { grid-template-columns: 1fr 1fr; } }
.lp-path {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; align-items: flex-start;
}
.lp-path--scratch {
  background: linear-gradient(160deg, var(--evergreen) 0%, #0c2521 100%);
  border-color: var(--evergreen); color: var(--sand);
}
.lp-path--scratch .lp-path__h { color: var(--sand); }
.lp-path--scratch .muted { color: rgba(244,239,228,.82); }
.lp-path__tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 8px;
}
.lp-path--scratch .lp-path__tag { color: var(--brass-2); }
.lp-path__h { margin-bottom: .4em; max-width: 18ch; }
.lp-path .lp-textlink, .lp-path .btn { margin-top: auto; }
.lp-hero__or { color: var(--muted); margin: 0 .5em; }

/* ---------- from-scratch: shared start scaffold ---------- */
.start { padding: clamp(30px, 5vw, 56px) 0 clamp(48px, 7vw, 80px); }
.start-head { max-width: 56ch; margin-bottom: clamp(24px, 4vw, 40px); }
.start-head h1 { margin: .15em 0 .25em; }
.start-steps {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 18px; counter-reset: step;
}
.start-steps li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .86rem; color: var(--muted); font-weight: 500;
}
.start-steps li span {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--sand); color: var(--evergreen); font-size: .82rem; font-weight: 700;
  border: 1px solid var(--line);
}
.start-steps li.is-current { color: var(--ink); }
.start-steps li.is-current span { background: var(--evergreen); color: var(--sand); border-color: var(--evergreen); }
.start-steps li.is-done span { background: var(--ok-bg); color: var(--ok); border-color: #bcd9c7; }
.start-alt { margin-top: 26px; text-align: center; }

/* ---------- vibe picker cards ---------- */
.vibe-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.vibe-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.vibe-card:hover {
  border-color: #d6cbb2; box-shadow: var(--shadow); transform: translateY(-3px);
  text-decoration: none;
}
.vibe-card:focus-visible { outline: 3px solid var(--brass-2); outline-offset: 2px; }
.vibe-card__swatch {
  position: relative; display: block; height: 120px;
  border-bottom: 3px solid; padding: 16px 16px 0;
}
.vibe-card__dot {
  display: inline-block; width: 22px; height: 22px; border-radius: 999px;
  margin-right: 7px; box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.vibe-card__bar {
  position: absolute; left: 16px; right: 16px; bottom: 0; height: 40px;
  border-radius: 8px 8px 0 0; display: flex; align-items: center; padding: 0 12px;
}
.vibe-card__bar-cta {
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .45em .8em; border-radius: 3px;
}
.vibe-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.vibe-card__name { font-family: "Fraunces", serif; font-size: 1.3rem; color: var(--ink); }
.vibe-card__blurb { color: var(--muted); font-size: .92rem; flex: 1; }
.vibe-card__pick {
  margin-top: 8px; font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--evergreen);
}
.vibe-card__pick .ar { transition: transform .15s ease; }
.vibe-card:hover .vibe-card__pick .ar { transform: translateX(3px); }

/* ---------- from-scratch details form ---------- */
.start-form { max-width: 720px; display: grid; gap: 26px; padding: clamp(22px, 4vw, 34px); }
.start-form .fs { border: 0; padding: 0; margin: 0; }
.start-form .fs legend {
  font-family: "Fraunces", serif; font-size: 1.2rem; color: var(--evergreen);
  padding: 0; margin: 0 0 8px; border-bottom: 1px solid var(--line); width: 100%; padding-bottom: 8px;
}
.start-form .opt { color: var(--muted); font-weight: 400; font-size: .82em; }
.grid-3 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.checks {
  display: grid; gap: 8px 14px; margin: 6px 0 4px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.check { display: flex; align-items: center; gap: 9px; margin: 0; font-weight: 400; cursor: pointer; }
.check input { width: auto; margin: 0; }
.start-form input[type="file"] { padding: .55em; background: #fff; cursor: pointer; }
.start-form__actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
}
.start-form__note { margin: 0; font-size: .86rem; }

/* ---------- from-scratch: the adaptive wizard ---------- */
/* Progress bar — only shown once JS upgrades the long form into a paged wizard. */
.wiz-progress { max-width: 720px; margin: 0 0 18px; }
.wiz-progress__track {
  height: 7px; border-radius: 999px; background: var(--sand-2);
  overflow: hidden; border: 1px solid var(--line);
}
.wiz-progress__bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--evergreen), var(--brass));
  border-radius: 999px; transition: width .3s ease;
}
.wiz-progress__label {
  margin: 8px 0 0; font-size: .82rem; font-weight: 600; color: var(--muted);
  letter-spacing: .01em;
}

/* Paged steps: with JS, one fieldset shows at a time; without JS they stack. */
.wiz--js .wiz-step { animation: wiz-fade .22s ease; }
@keyframes wiz-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wiz--js .wiz-step { animation: none; }
  .wiz-progress__bar { transition: none; }
}
.wiz-actions { margin-top: 4px; }
/* On the first step Back points at the looks picker; later it's a step-back button.
   It always reads as a ghost button either way — no layout shift between steps. */

/* The "what does your course have?" checklist — friendly tappable chips. */
.chips-pick {
  display: grid; gap: 10px; margin: 12px 0 2px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.chip-pick {
  position: relative; display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font-weight: 500; color: var(--text);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.chip-pick:hover { border-color: #d6cbb2; }
.chip-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-pick__box {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--line); background: var(--sand); position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.chip-pick__box::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0);
  transition: transform .15s ease;
}
.chip-pick input:checked ~ .chip-pick__box { background: var(--evergreen); border-color: var(--evergreen); }
.chip-pick input:checked ~ .chip-pick__box::after { transform: rotate(45deg) scale(1); }
.chip-pick input:checked ~ .chip-pick__label { color: var(--ink); }
.chip-pick:has(input:checked) { border-color: var(--evergreen); background: var(--ok-bg); }
.chip-pick input:focus-visible ~ .chip-pick__box { outline: 3px solid var(--brass-2); outline-offset: 2px; }
.chip-pick__label { line-height: 1.2; }

/* =========================================================================
   PLATFORM OPERATOR CONSOLE (docs/ADMIN-PORTAL.md Part 1)
   Sleek, dense, accessible — staff-facing, so technical terms are fine here.
   ========================================================================= */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- "view as" banner (operator impersonating a tenant view) ---- */
.admin-banner { background: var(--evergreen); color: var(--sand); }
.admin-banner__inner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 24px; font-size: .88rem;
}
.admin-banner__badge {
  background: var(--brass); color: #1a130a; font-weight: 600;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .28em .7em; border-radius: 999px; flex: 0 0 auto;
}
.admin-banner__text { flex: 1; min-width: 0; }
.admin-banner__text strong { font-family: ui-monospace, Menlo, monospace; font-weight: 600; }
.admin-banner__exit {
  color: var(--sand); text-decoration: underline; font-weight: 500; flex: 0 0 auto;
}
.admin-banner__exit:hover { color: #fff; }

/* ---- console sub-nav ---- */
.admin-nav {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: 4px 0 26px; padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
.admin-nav__link {
  padding: 8px 14px; border-radius: var(--radius-sm); font-weight: 500;
  font-size: .92rem; color: var(--muted);
}
.admin-nav__link:hover { background: var(--sand-2); text-decoration: none; color: var(--ink); }
.admin-nav__link.is-active { background: var(--evergreen); color: var(--sand); }
.admin-nav__link.is-active:hover { background: var(--evergreen-2); color: #fff; }
.admin-nav__role {
  margin-left: auto; font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brass);
}

/* ---- KPI cards ---- */
.kpi-grid {
  display: grid; gap: 14px; margin: 0 0 24px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.kpi {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 2px;
}
.kpi--lead { background: var(--evergreen); border-color: var(--evergreen); color: var(--sand); }
.kpi--money { background: var(--sand); }
.kpi__n {
  font-family: "Fraunces", serif; font-size: 2rem; line-height: 1; color: var(--evergreen);
}
.kpi--lead .kpi__n { color: var(--sand); }
.kpi__l { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.kpi--lead .kpi__l { color: rgba(244,239,228,.85); }
.kpi__sub { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.kpi--lead .kpi__sub { color: rgba(244,239,228,.7); }

/* ---- panels + columns ---- */
.admin-cols, .admin-detail-grid {
  display: grid; gap: 16px; margin-bottom: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .admin-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .admin-detail-grid { grid-template-columns: 1fr 1fr; } }
.admin-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px;
}
.admin-panel--full { grid-column: 1 / -1; }
.admin-panel--danger { border-color: #e7c2bb; background: var(--err-bg); }
.admin-panel__head { display: flex; justify-content: space-between; align-items: center; }
.admin-panel__title {
  font-family: "Fraunces", serif; font-size: 1.1rem; color: var(--evergreen);
  margin: 0 0 14px;
}
.admin-panel + .admin-panel__title, .breakdown + .admin-panel__title { margin-top: 18px; }

/* ---- breakdown lists (plan / add-on / billing items) ---- */
.breakdown { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 2px; }
.breakdown__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .92rem;
}
.breakdown__row:last-child { border-bottom: 0; }
.breakdown__label { color: var(--text); }
.breakdown__n { font-weight: 600; color: var(--evergreen); font-variant-numeric: tabular-nums; }

/* ---- needs attention ---- */
.attention { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.attention__row {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 9px 11px; background: var(--warn-bg); border: 1px solid #e7d4ad;
  border-radius: var(--radius-sm); font-size: .9rem;
}
.attention__slug { font-family: ui-monospace, Menlo, monospace; font-weight: 600; }
.attention__reason { color: var(--warn); }

/* ---- key/value lists ---- */
.admin-kv { display: grid; gap: 8px; margin: 0; }
.admin-kv > div { display: grid; gap: 2px; }
.admin-kv dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0; }
.admin-kv dd { margin: 0; font-size: .92rem; word-break: break-word; }
.admin-kv--meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-detail__slug { font-family: ui-monospace, Menlo, monospace; }
.admin-detail__head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-detail__plan { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.admin-detail__total { font-family: "Fraunces", serif; font-size: 1.3rem; color: var(--evergreen); }

/* ---- change-plan / danger forms ---- */
.admin-plan-form, .admin-danger-form, .staff-add { margin-top: 14px; }
.admin-plan-form label, .admin-danger-form label, .staff-add label {
  display: block; font-weight: 500; font-size: .9rem; margin-bottom: 6px;
}
.admin-plan-form__row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.admin-plan-form__row select, .admin-plan-form__row input {
  flex: 1; min-width: 0; margin: 0;
}
.admin-plan-form__row .btn { flex: 0 0 auto; white-space: nowrap; }
.admin-danger-form code { font-family: ui-monospace, Menlo, monospace; background: #fff; padding: 1px 5px; border-radius: 4px; }

/* ---- integrations summary (no secrets) ---- */
.admin-integ { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.admin-integ__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.admin-integ__row:last-child { border-bottom: 0; }
.admin-integ__name { font-weight: 500; }

/* ---- staff lists ---- */
.staff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.staff-list__row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 11px; background: var(--sand); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: .92rem;
}
.staff-list__row form { margin: 0; }

/* ---- filters bar ---- */
.admin-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 0 0 18px; padding: 14px 16px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.admin-filters__search { flex: 1 1 240px; min-width: 0; }
.admin-filters input, .admin-filters select { margin: 0; }
.admin-filters .btn { margin: 0; }

/* ---- the admin table (shared by overview audit, accounts, detail) ---- */
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line);
  font-size: .88rem; vertical-align: top;
}
.admin-table thead th {
  background: var(--sand-2); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--sand); }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table--compact th, .admin-table--compact td { padding: 8px 10px; }
.admin-table__name { display: block; font-weight: 600; color: var(--ink); }
.admin-table__name:hover { color: var(--evergreen); text-decoration: none; }
.admin-table__slug { display: block; font-size: .78rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.admin-table__owner { color: var(--text); word-break: break-word; }
.admin-table__created { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.admin-table__links { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; }
.admin-table__actions { white-space: nowrap; }
.admin-table__actions .btn { margin: 0 2px; }
.admin-table__memberships { display: flex; flex-wrap: wrap; gap: 6px; }
.membership-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  background: var(--sand); border: 1px solid var(--line); border-radius: 999px;
  font-size: .8rem; color: var(--text);
}
.membership-chip:hover { border-color: var(--brass); text-decoration: none; }

/* ---- role chips (reused from the team UI, ensure defined) ---- */
.role-chip {
  display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  padding: .2em .55em; border-radius: 999px; background: var(--sand-2); color: var(--evergreen);
  text-transform: capitalize;
}
.role-chip--owner { background: #efe6d2; color: var(--brass); }
.role-chip--manager { background: var(--ok-bg); color: var(--ok); }
.role-chip--staff { background: var(--sand-2); color: var(--muted); }

@media (max-width: 640px) {
  .admin-table__links { flex-direction: row; flex-wrap: wrap; }
}

/* ---- Lesson Manager (staff setup + public reserve) ---- */
.lessons-setup form > .card,
.lessons-setup .card { margin-bottom: 18px; }
.instructor-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.instructor-list summary { cursor: pointer; }
.instructor-form { display: grid; gap: 6px; margin-top: 10px; }
.instructor-form textarea { width: 100%; }
.availability-form { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.add-instructor { margin-top: 10px; }
.add-instructor summary { cursor: pointer; }

/* Public reserve-a-lesson: type + instructor picker cards. */
.lesson-pick { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lesson-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lesson-card:hover { border-color: var(--brass); text-decoration: none; background: var(--sand); }
.lesson-card.is-chosen { background: var(--evergreen); color: var(--sand); border-color: var(--evergreen); }
.lesson-card.is-chosen .muted, .lesson-card.is-chosen .lesson-card__meta { color: rgba(244,238,225,.82); }
.lesson-card__name { font-weight: 600; }
.lesson-card__meta { font-size: .82rem; color: var(--muted); }

/* Rendered site: Lessons & Coaching section. */
.lesson-coach__photo { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 12px; aspect-ratio: 4 / 3; }
.lesson-coach__photo img { width: 100%; height: 100%; object-fit: cover; }
.lesson-coach__title { font-weight: 600; color: var(--brass); margin: 0 0 .4em; }
.lesson-offerings { list-style: none; margin: 0 auto; padding: 0; max-width: 640px;
  display: grid; gap: 8px; }
.lesson-offering { display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lesson-offering__name { font-weight: 500; }
.lesson-offering__meta { color: var(--muted); white-space: nowrap; }