/* Trainer-X design system — Arabic-first, RTL, mobile-first.
   Tokens are the single source of truth; see docs/DESIGN_SYSTEM.md. */

:root {
  /* Color */
  --chalk: #F4F5F1;      /* page */
  --paper: #FFFFFF;      /* surfaces */
  --ink: #13202E;        /* text, strong UI */
  --ink-2: #3E4A57;      /* secondary text */
  --muted: #66717C;      /* tertiary text */
  --line: #DCDFD7;       /* borders */
  --line-2: #ECEEE8;     /* subtle fills */
  --pitch: #0E6B57;      /* primary */
  --pitch-dark: #0A5546;
  --pitch-tint: #E3F0EB;
  --volt: #D9EE3B;       /* accent: progress, highlight. Never for text on white */
  --ok: #0E7A4F;  --ok-tint: #E2F3EA;
  --warn: #9A6412; --warn-tint: #FBF0DA;
  --bad: #B7322B; --bad-tint: #FBE6E4;
  --info: #2C5596; --info-tint: #E5ECF7;

  /* Type */
  --font-ui: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
  --fs-xs: .78rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.15rem;
  --fs-xl: 1.4rem; --fs-2xl: 1.85rem; --fs-3xl: clamp(2.1rem, 6vw, 3.4rem);

  /* Space (4pt) & shape */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
  --shadow: 0 1px 0 rgba(19, 32, 46, .04), 0 6px 18px -10px rgba(19, 32, 46, .18);
  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--pitch);
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--chalk); color: var(--ink);
  font: 400 var(--fs-md)/1.7 var(--font-ui);
  font-feature-settings: "kern"; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--pitch); text-underline-offset: 3px; }
a:hover { color: var(--pitch-dark); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; margin: 0 0 var(--s3); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s4); max-width: 68ch; }
.num, .money { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4); }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; }
.grid { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 720px) and (max-width: 979px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
.skip { position: absolute; inset-inline-start: var(--s3); top: -60px; background: var(--ink); color: #fff; padding: var(--s2) var(--s3); border-radius: var(--r-sm); z-index: 50; }
.skip:focus { top: var(--s3); }

.mt-1{margin-top:var(--s1)}.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--s2)}.mb-4{margin-bottom:var(--s4)}
.p-menu{padding:8px 12px}.ta-c{text-align:center}.nowrap{white-space:nowrap}.ltr{direction:ltr;unicode-bidi:isolate}.mx-auto{margin-inline:auto}.max-sm{max-width:560px}.max-md{max-width:760px}
.inline{display:inline}
/* ---------- Announcement & header ---------- */
.announce { background: var(--ink); color: #fff; font-size: var(--fs-sm); text-align: center; padding: var(--s2) var(--s4); }
.sandbox-bar { background: var(--warn-tint); color: var(--warn); font-size: var(--fs-xs); text-align: center; padding: 6px var(--s4); border-bottom: 1px solid #EBD6AA; }
.site-header { background: rgba(244, 245, 241, .92); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s4); height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--ink); direction: ltr; }
.brand img { width: 34px; height: 34px; }
.brand b { font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; letter-spacing: -.02em; }
.brand b i { font-style: normal; color: var(--pitch); }
.nav { display: none; gap: var(--s1); margin-inline-start: var(--s4); }
.nav a { color: var(--ink-2); text-decoration: none; padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--line-2); color: var(--ink); }
.header-actions { margin-inline-start: auto; display: flex; gap: var(--s2); align-items: center; }
@media (min-width: 1100px) { .nav { display: flex; } }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); color: var(--ink); text-decoration: none; }
.icon-btn:hover { background: var(--line-2); }
.icon-btn .dot { position: absolute; top: 6px; inset-inline-end: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-family: var(--font-display); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; inset-inline-end: 0; top: 48px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); min-width: 220px; padding: var(--s2); z-index: 30; }
.menu-panel a, .menu-panel button { display: block; width: 100%; text-align: start; padding: var(--s2) var(--s3); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.menu-panel a:hover, .menu-panel button:hover { background: var(--line-2); }
.avatar-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--pitch); color: #fff; font-family: var(--font-display); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s5);
  border-radius: var(--r-pill); border: 1.5px solid transparent; font: 600 var(--fs-md)/1 var(--font-ui); cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--pitch); color: #fff; }
.btn-primary:hover { background: var(--pitch-dark); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-danger { background: transparent; color: var(--bad); border-color: #E9B9B4; }
.btn-danger:hover { background: var(--bad-tint); color: var(--bad); }
.btn-sm { min-height: 36px; padding: 0 var(--s4); font-size: var(--fs-sm); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; color: var(--pitch); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; }
.field + .field { margin-top: var(--s4); }
label, .label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.hint { font-size: var(--fs-xs); color: var(--muted); }
.error { font-size: var(--fs-xs); color: var(--bad); font-weight: 600; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date],
input[type=time], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-md); font: inherit; transition: border-color .15s; }
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
input:hover, select:hover, textarea:hover { border-color: #BFC4B9; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pitch); box-shadow: 0 0 0 3px var(--pitch-tint); }
.invalid input, .invalid select, .invalid textarea { border-color: var(--bad); }
input[dir=ltr] { text-align: left; }
.check { display: flex; gap: var(--s2); align-items: flex-start; font-weight: 500; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--pitch); flex: none; }
.choice-grid { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip-input { position: relative; }
.chip-input input { position: absolute; opacity: 0; }
.chip-input span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--paper); cursor: pointer; font-weight: 500; font-size: var(--fs-sm); }
.chip-input input:checked + span { background: var(--pitch-tint); border-color: var(--pitch); color: var(--pitch-dark); }
.chip-input input:focus-visible + span { box-shadow: var(--focus); }

/* ---------- Surfaces ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }
.card-tight { padding: var(--s4); }
.panel-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); }
.panel-title h2, .panel-title h3 { margin: 0; }
.divider { height: 1px; background: var(--line); margin: var(--s5) 0; border: 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s5); margin: 0; }
.kv dt { color: var(--muted); font-size: var(--fs-sm); }
.kv dd { margin: 0; font-weight: 500; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; background: var(--line-2); color: var(--ink-2); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.tone-ok { background: var(--ok-tint); color: var(--ok); }
.tone-warn { background: var(--warn-tint); color: var(--warn); }
.tone-bad { background: var(--bad-tint); color: var(--bad); }
.tone-info { background: var(--info-tint); color: var(--info); }
.tone-done { background: var(--ink); color: #fff; }
.tone-muted { background: var(--line-2); color: var(--muted); }
.demo-tag { background: #FFF6CC; color: #7A5D00; }
.verified { color: var(--pitch); display: inline-flex; gap: 4px; align-items: center; font-weight: 600; font-size: var(--fs-sm); }

/* ---------- Alerts / flash ---------- */
.flash { border-radius: var(--r-md); padding: var(--s3) var(--s4); margin: var(--s4) 0; font-weight: 500; border: 1px solid; display: flex; gap: var(--s3); align-items: flex-start; }
.flash-ok { background: var(--ok-tint); color: var(--ok); border-color: #BFE2CF; }
.flash-bad { background: var(--bad-tint); color: var(--bad); border-color: #F0C2BD; }
.flash-info { background: var(--info-tint); color: var(--info); border-color: #C7D5EE; }
.flash-warn { background: var(--warn-tint); color: var(--warn); border-color: #EBD6AA; }
.callout { border-inline-start: 4px solid var(--pitch); background: var(--pitch-tint); padding: var(--s3) var(--s4); border-radius: var(--r-sm); }
.callout.warn { border-color: var(--warn); background: var(--warn-tint); }
.callout.bad { border-color: var(--bad); background: var(--bad-tint); }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: var(--s7) var(--s4); border: 1.5px dashed var(--line); border-radius: var(--r-lg); background: var(--paper); }
.empty svg { margin: 0 auto var(--s3); color: var(--muted); }
.empty h3 { margin-bottom: var(--s2); }
.empty p { margin-inline: auto; color: var(--muted); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
th { font-weight: 600; color: var(--muted); background: #FAFBF8; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.money, th.money { text-align: end; white-space: nowrap; }
tbody tr:hover { background: #FBFCFA; }
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: end; margin-bottom: var(--s4); }
.filters .field { margin: 0; min-width: 140px; flex: 1 1 140px; }
.filters .field + .field { margin: 0; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line); margin-bottom: var(--s5); overflow-x: auto; }
.tabs a { padding: var(--s3) var(--s4); color: var(--muted); text-decoration: none; font-weight: 600; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--ink); border-color: var(--pitch); }
.tabs .count { font-family: var(--font-display); font-size: var(--fs-xs); background: var(--line-2); border-radius: 10px; padding: 1px 7px; margin-inline-start: 4px; }

/* ---------- Home ---------- */
.hero { padding: var(--s7) 0 var(--s6); position: relative; overflow: hidden; }
.hero h1 { font-size: var(--fs-3xl); max-width: 15ch; margin-bottom: var(--s4); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.hero .lead { font-size: var(--fs-lg); color: var(--ink-2); max-width: 54ch; }
.hero-mark { position: absolute; inset-inline-end: -60px; top: 10px; width: 420px; opacity: .07; pointer-events: none; display: none; }
@media (min-width: 980px) { .hero-mark { display: block; } }
.finder { background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-lg); padding: var(--s3); display: grid; gap: var(--s2); margin-top: var(--s5); max-width: 880px; box-shadow: 6px 6px 0 var(--ink); }
.finder label { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; padding-inline-start: 4px; }
.finder select { border: 0; background: var(--line-2); min-height: 48px; }
@media (min-width: 760px) { .finder { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; padding: var(--s3) var(--s3) var(--s3) var(--s3); } .finder .btn { min-height: 48px; } }
.trust-line { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s5); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; }
.trust-line span { display: inline-flex; gap: 6px; align-items: center; }
.section { padding-block: var(--s7); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.section-head h2 { font-size: var(--fs-2xl); margin: 0; }
.section-head p { margin: var(--s2) 0 0; color: var(--muted); }
.cat-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .cat-list { grid-template-columns: 1fr 1fr; column-gap: var(--s6); } }
.cat-row { display: flex; gap: var(--s4); align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.cat-row:hover h3 { color: var(--pitch); }
.cat-row h3 { margin: 0; font-size: var(--fs-lg); }
.cat-row p { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.cat-row .count { margin-inline-start: auto; font-family: var(--font-display); color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.steps { counter-reset: step; display: grid; gap: var(--s5); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { list-style: none; position: relative; padding-top: var(--s6); }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; top: 0; inset-inline-start: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); color: var(--pitch); }
.steps li::after { content: ""; position: absolute; top: 18px; inset-inline-start: 34px; inset-inline-end: 0; height: 2px; background: var(--line); }
.steps h3 { font-size: var(--fs-md); margin-bottom: var(--s1); }
.steps p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.band { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: var(--s6); display: grid; gap: var(--s4); }
.band h2 { color: #fff; font-size: var(--fs-2xl); }
.band p { color: #C9D0D8; }
@media (min-width: 860px) { .band { grid-template-columns: 1.4fr 1fr; align-items: center; padding: var(--s7); } }
.band .btn-primary { background: var(--volt); color: var(--ink); }
.band .btn-primary:hover { background: #fff; color: var(--ink); }
.band ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); color: #E2E7EC; }
.band li::before { content: "✓"; color: var(--volt); margin-inline-end: var(--s2); font-weight: 700; }
details.faq { border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
details.faq summary { cursor: pointer; font-weight: 600; font-size: var(--fs-md); list-style: none; display: flex; justify-content: space-between; gap: var(--s3); }
details.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.4rem; line-height: 1; color: var(--pitch); }
details.faq[open] summary::after { content: "−"; }
details.faq p { margin: var(--s3) 0 0; color: var(--ink-2); }

/* ---------- Trainer cards ---------- */
.trainer-grid { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .trainer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .trainer-grid { grid-template-columns: repeat(3, 1fr); } }
.t-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: grid; gap: var(--s3); position: relative; transition: border-color .15s; }
.t-card:hover { border-color: #AEB4A8; }
.t-card .top { display: flex; gap: var(--s3); align-items: center; }
.t-card h3 { font-size: var(--fs-md); margin: 0; }
.t-card h3 a { color: var(--ink); text-decoration: none; }
.t-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.t-card .fav { position: relative; z-index: 2; margin-inline-start: auto; }
.t-card .meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); color: var(--muted); font-size: var(--fs-sm); }
.t-card .foot { display: flex; justify-content: space-between; align-items: end; border-top: 1px solid var(--line-2); padding-top: var(--s3); }
.price b { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; }
.price small { color: var(--muted); font-size: var(--fs-xs); display: block; }
.face { width: 56px; height: 56px; border-radius: 16px; flex: none; object-fit: cover; background: var(--pitch-tint); color: var(--pitch-dark); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.face.lg { width: 104px; height: 104px; border-radius: 26px; font-size: 2rem; }
.rating { display: inline-flex; gap: 4px; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); }
.rating svg { color: #C99A06; }
.mode-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mode-pills span { font-size: var(--fs-xs); padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink-2); }

/* ---------- Explore ---------- */
.explore { display: grid; gap: var(--s5); padding: var(--s5) 0 var(--s7); }
@media (min-width: 980px) { .explore { grid-template-columns: 280px 1fr; align-items: start; } .filter-panel { position: sticky; top: 84px; } }
.filter-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); }
.filter-panel .field + .field { margin-top: var(--s3); }
.filter-toggle { display: block; }
@media (min-width: 980px) { .filter-toggle summary { display: none; } .filter-toggle > .filter-panel { display: block; } }
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.pager { display: flex; gap: var(--s2); justify-content: center; margin-top: var(--s5); }

/* ---------- Profile ---------- */
.profile-head { display: grid; gap: var(--s5); padding: var(--s6) 0 var(--s5); }
@media (min-width: 860px) { .profile-head { grid-template-columns: auto 1fr; align-items: center; } }
.profile-layout { display: grid; gap: var(--s5); padding-bottom: var(--s8); }
@media (min-width: 980px) { .profile-layout { grid-template-columns: 1fr 360px; align-items: start; } .profile-aside { position: sticky; top: 84px; } }
.service { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); display: grid; gap: var(--s2); background: var(--paper); }
.service + .service { margin-top: var(--s3); }
.service .row { justify-content: space-between; }
.bar-row { display: grid; grid-template-columns: 34px 1fr 30px; gap: var(--s2); align-items: center; font-size: var(--fs-sm); }
.bar { height: 8px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); }
.w0{width:0}.w5{width:5%}.w10{width:10%}.w20{width:20%}.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w90{width:90%}.w100{width:100%}
.review { padding: var(--s4) 0; border-bottom: 1px solid var(--line-2); }

/* ---------- Booking ---------- */
.book-layout { display: grid; gap: var(--s5); padding: var(--s5) 0 var(--s8); }
@media (min-width: 980px) { .book-layout { grid-template-columns: 1fr 360px; align-items: start; } .book-layout aside { position: sticky; top: 84px; } }
.days { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); scroll-snap-type: x mandatory; }
.day-tab { scroll-snap-align: start; flex: none; min-width: 74px; text-align: center; border: 1.5px solid var(--line); border-radius: var(--r-md); padding: var(--s2) var(--s2); background: var(--paper); cursor: pointer; font: inherit; color: var(--ink); }
.day-tab b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); }
.day-tab small { color: var(--muted); font-size: var(--fs-xs); }
.day-tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.day-tab[aria-selected="true"] small { color: #C9D0D8; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; }
.slot span { display: block; text-align: center; padding: 10px 6px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper); cursor: pointer; font-family: var(--font-display); font-weight: 500; }
.slot input:checked + span { background: var(--pitch); border-color: var(--pitch); color: #fff; }
.slot input:focus-visible + span { box-shadow: var(--focus); }
.day-panel[hidden] { display: none; }
.summary-line { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; }
.summary-line.total { border-top: 1.5px solid var(--ink); margin-top: var(--s2); padding-top: var(--s3); font-weight: 700; font-size: var(--fs-lg); }
.timer { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.pay-methods { display: flex; gap: var(--s2); flex-wrap: wrap; }
.pay-methods span { font-size: var(--fs-xs); font-weight: 700; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; color: var(--ink-2); direction: ltr; }
.steps-mini { display: flex; gap: var(--s2); font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--s4); flex-wrap: wrap; }
.steps-mini span { display: inline-flex; align-items: center; gap: 6px; }
.steps-mini span b { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--line-2); font-family: var(--font-display); }
.steps-mini .on { color: var(--ink); font-weight: 600; }
.steps-mini .on b { background: var(--ink); color: #fff; }
.steps-mini .done b { background: var(--pitch); color: #fff; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding-inline-start: 22px; padding-bottom: var(--s3); font-size: var(--fs-sm); }
.timeline li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--pitch); }
.timeline li::after { content: ""; position: absolute; inset-inline-start: 7px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.result-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--s3); }

/* ---------- App shell (dashboards) ---------- */
.shell { display: grid; gap: var(--s5); padding-block: var(--s5) calc(var(--s8) + 20px); }
@media (min-width: 980px) { .shell { grid-template-columns: 236px 1fr; padding-block-end: var(--s8); align-items: start; } }
.side { display: none; }
@media (min-width: 980px) {
  .side { display: block; position: sticky; top: 84px; }
  .side nav { display: grid; gap: 2px; }
  .side a { display: flex; gap: var(--s3); align-items: center; padding: 10px var(--s3); border-radius: var(--r-md); color: var(--ink-2); text-decoration: none; font-weight: 500; }
  .side a:hover { background: var(--line-2); color: var(--ink); }
  .side a[aria-current="page"] { background: var(--ink); color: #fff; }
  .side .group { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; padding: var(--s4) var(--s3) var(--s1); }
}
.side a .n { margin-inline-start: auto; background: var(--bad); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 7px; font-family: var(--font-display); }
.tabbar { position: fixed; bottom: 0; inset-inline: 0; z-index: 25; background: var(--paper); border-top: 1px solid var(--line); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { display: grid; justify-items: center; gap: 2px; padding: 8px 2px 6px; font-size: 11px; color: var(--muted); text-decoration: none; font-weight: 600; }
.tabbar a[aria-current="page"] { color: var(--pitch); }
@media (min-width: 980px) { .tabbar { display: none; } }
.admin-nav-mobile { display: flex; gap: var(--s1); overflow-x: auto; margin-bottom: var(--s2); padding-bottom: var(--s1); }
.admin-nav-mobile a { flex: none; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.admin-nav-mobile a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (min-width: 980px) { .admin-nav-mobile { display: none; } }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }
.page-head h1 { margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--muted); }

/* ---------- KPI ---------- */
.kpis { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
@media (min-width: 980px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); }
.kpi .v { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.kpi .l { color: var(--muted); font-size: var(--fs-sm); }
.kpi .d { color: var(--muted); font-size: var(--fs-xs); margin-top: var(--s1); line-height: 1.5; }
.kpi.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.kpi.primary .l, .kpi.primary .d { color: #C9D0D8; }
.chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s2); align-items: end; height: 140px; padding-top: var(--s3); }
.chart .col { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: flex-end; height: 100%; }
.chart .bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.chart .colbar { width: 100%; max-width: 38px; background: var(--pitch); border-radius: 6px 6px 0 0; min-height: 2px; }
.chart .colbar.h0{height:2px}
.chart small { font-size: 10px; color: var(--muted); font-family: var(--font-display); }
.chart .val { font-size: 11px; font-family: var(--font-display); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.checklist li { display: flex; gap: var(--s2); align-items: center; font-size: var(--fs-sm); }
.checklist .yes { color: var(--ok); }
.checklist .no { color: var(--muted); }
.list-item { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--ink); }
.list-item:last-child { border-bottom: 0; }
.date-box { width: 52px; flex: none; text-align: center; border-radius: var(--r-md); background: var(--line-2); padding: 6px 0; line-height: 1.2; }
.date-box b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); }
.date-box small { font-size: 11px; color: var(--muted); }

/* ---------- Auth ---------- */
.auth { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: var(--s6) var(--s4); }
.auth .card { width: 100%; max-width: 440px; }
.role-switch { display: grid; grid-template-columns: 1fr 1fr; background: var(--line-2); border-radius: var(--r-pill); padding: 4px; margin-bottom: var(--s5); }
.role-switch a { text-align: center; padding: 8px; border-radius: var(--r-pill); text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); }
.role-switch a[aria-current="page"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--s7) 0 var(--s6); margin-top: var(--s7); color: var(--ink-2); font-size: var(--fs-sm); }
.site-footer .cols { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .site-footer .cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer h4 { font-size: var(--fs-sm); margin-bottom: var(--s2); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--pitch); text-decoration: underline; }
.has-tabbar .site-footer { padding-bottom: 96px; }

/* ---------- Sandbox gateway ---------- */
.gw { max-width: 440px; margin: var(--s7) auto; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); padding: var(--s5); }
.gw-head { direction: ltr; display: flex; justify-content: space-between; font-family: var(--font-display); font-size: var(--fs-sm); color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer, .tabbar, .side, .btn { display: none !important; } body { background: #fff; } }

.hp0{height:2%}.hp10{height:10%}.hp20{height:20%}.hp30{height:30%}.hp40{height:40%}.hp50{height:50%}.hp60{height:60%}.hp70{height:70%}.hp80{height:80%}.hp90{height:90%}.hp100{height:100%}

.mobile-cta { position: fixed; bottom: 0; inset-inline: 0; z-index: 25; background: var(--paper); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); }
.has-cta .site-footer { padding-bottom: 110px; }
@media (min-width: 980px) { .mobile-cta { display: none; } .has-cta .site-footer { padding-bottom: var(--s6); } }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.book-layout > *, .shell > *, .profile-layout > *, .explore > *, .grid > * { min-width: 0; }
html, body { overflow-x: hidden; }

/* ---------- Notifications dropdown ---------- */
.notif-menu summary { list-style: none; }
.notif-panel { width: min(360px, calc(100vw - 32px)); padding: 0; max-height: 70vh; overflow-y: auto; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: var(--paper); }
.notif-group { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; padding: 10px 16px 4px; }
.notif-menu .notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; border-radius: 0; text-decoration: none; color: var(--ink); }
.notif-item:hover { background: var(--line-2); }
.notif-item.is-new { background: var(--pitch-tint); }
.notif-item.is-new:hover { background: #D6EAE2; }
.notif-item span:last-child { display: grid; gap: 2px; min-width: 0; }
.notif-item b { font-size: var(--fs-sm); }
.notif-item small { color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.5; }
.notif-item time { color: var(--muted); font-size: 11px; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pitch); margin-top: 7px; flex: none; }
.notif-dot.read { background: var(--line); }
.notif-empty { padding: 16px; color: var(--muted); font-size: var(--fs-sm); margin: 0; }
@media (max-width: 520px) { .notif-menu { position: static; } .notif-panel { inset-inline: 16px; top: 60px; position: absolute; width: auto; } }

/* ---------- Support tickets ---------- */
.ticket-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.progress-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s2); counter-reset: ps; }
.progress-steps li { flex: 1; position: relative; padding-top: 14px; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.progress-steps li::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 5px; border-radius: 3px; background: var(--line); }
.progress-steps li.done { color: var(--ink); }
.progress-steps li.done::before { background: var(--pitch); }
.progress-steps li.on { color: var(--ink); }
.progress-steps li.on::before { background: linear-gradient(to left, var(--pitch) 50%, var(--line) 50%); }
.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.msg { max-width: 85%; padding: var(--s3) var(--s4); border-radius: var(--r-lg); background: var(--line-2); }
.msg p { margin: 4px 0 0; white-space: pre-line; }
.msg.me { justify-self: start; background: var(--pitch-tint); border-start-start-radius: 4px; }
.msg.staff { justify-self: end; background: var(--paper); border: 1px solid var(--line); border-start-end-radius: 4px; }
.msg-meta { display: flex; gap: var(--s3); align-items: baseline; font-size: var(--fs-xs); }
.msg-meta time { color: var(--muted); }

/* ---------- Preferences ---------- */
.pref-step { display: flex; gap: var(--s4); align-items: flex-start; }
.pref-num { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; flex: none; }
.goal-grid { display: grid; gap: var(--s2); grid-template-columns: 1fr; margin-top: var(--s3); }
@media (min-width: 640px) { .goal-grid { grid-template-columns: 1fr 1fr; } }
.goal { position: relative; }
.goal input { position: absolute; opacity: 0; }
.goal span { display: grid; gap: 2px; padding: var(--s3) var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; background: var(--paper); }
.goal small { color: var(--muted); font-size: var(--fs-xs); }
.goal input:checked + span { border-color: var(--pitch); background: var(--pitch-tint); box-shadow: inset 0 0 0 1px var(--pitch); }
.goal input:focus-visible + span { box-shadow: var(--focus); }
@media (max-width: 560px) { .pref-step { flex-direction: column; } }

/* ---------- Trainer onboarding wizard ---------- */
.onb { display: grid; gap: var(--s5); padding-block: var(--s5) var(--s8); }
@media (min-width: 980px) { .onb { grid-template-columns: 270px 1fr; align-items: start; } .onb-side { position: sticky; top: 84px; } }
.onb-main { min-width: 0; max-width: 820px; }
.onb-intro { display: grid; gap: 4px; margin-bottom: var(--s4); }
.meter { height: 8px; background: var(--line-2); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 100%; background: var(--pitch); border-radius: 4px; }
.meter.big { height: 12px; margin-bottom: var(--s4); }
.stepper { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: 2px; }
.stepper a { display: flex; gap: var(--s3); align-items: center; padding: 9px var(--s3); border-radius: var(--r-md); color: var(--ink-2); text-decoration: none; font-weight: 500; }
.stepper a:hover { background: var(--line-2); }
.stepper .dot { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-family: var(--font-display); font-size: var(--fs-xs); flex: none; background: var(--paper); }
.stepper .done .dot { background: var(--pitch); border-color: var(--pitch); color: #fff; }
.stepper .current a { background: var(--ink); color: #fff; }
.stepper .current .dot { border-color: #fff; color: var(--ink); }
@media (max-width: 979px) {
  .stepper { display: flex; overflow-x: auto; gap: var(--s2); padding-bottom: var(--s2); }
  .stepper a { white-space: nowrap; border: 1px solid var(--line); background: var(--paper); padding: 6px 12px; font-size: var(--fs-sm); }
  .stepper li:not(.current) a { color: var(--muted); }
}
.onb-actions { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-2); }
.photo-row { display: flex; gap: var(--s4); align-items: flex-start; }
@media (max-width: 560px) { .photo-row { flex-direction: column; } }
.thumbs { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); }
.gallery-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.g-item { display: grid; gap: 6px; }
.g-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); }
.g-item input:not([type]) { min-height: 36px; padding: 6px 10px; font-size: var(--fs-sm); }
.drop { display: grid; justify-items: center; gap: 4px; padding: var(--s5); border: 1.5px dashed #BFC4B9; border-radius: var(--r-lg); background: #FAFBF8; cursor: pointer; text-align: center; color: var(--ink-2); }
.drop:hover { border-color: var(--pitch); color: var(--pitch); }
.drop small { color: var(--muted); font-weight: 400; }
.sr-only-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sr-only-file:focus-visible + .thumbs, .drop:focus-within { box-shadow: var(--focus); }
.tag-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 48px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.tag-box:focus-within { border-color: var(--pitch); box-shadow: 0 0 0 3px var(--pitch-tint); }
.tag-list { display: contents; }
.tag-box [data-tag-input] { border: 0; min-height: 34px; padding: 0 4px; flex: 1; min-width: 140px; box-shadow: none; width: auto; }
.tag-box [data-tag-input]:focus { box-shadow: none; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; background: var(--pitch-tint); color: var(--pitch-dark); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; }
.tag-x { border: 0; background: transparent; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; }
.tag-x:hover { background: rgba(14,107,87,.15); }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--s2); }
.chip-btn { border: 1px dashed #BFC4B9; background: transparent; border-radius: var(--r-pill); padding: 4px 10px; font: inherit; font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; }
.chip-btn:hover { border-color: var(--pitch); color: var(--pitch); }
[data-tags]:not(.js) .tag-box, [data-tags]:not(.js) .suggest { display: none; }
.verify-badges { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
.vb { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); color: var(--muted); }
.vb span { display: grid; }
.vb b { color: var(--ink); }
.vb.ok { border-color: #BFE2CF; background: var(--ok-tint); color: var(--ok); }
.week { display: grid; gap: var(--s2); }
.week-row { display: grid; grid-template-columns: 130px 1fr auto 1fr; gap: var(--s2); align-items: center; }
@media (max-width: 520px) { .week-row { grid-template-columns: 1fr 1fr; } .week-row .muted { display: none; } .week-row label { grid-column: 1 / -1; } }
.tips { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; font-size: var(--fs-sm); }
.w0{width:0}.w10{width:10%}

/* ---------- Insights & offers ---------- */
.seg { display: inline-flex; background: var(--line-2); border-radius: var(--r-pill); padding: 4px; }
.seg a { padding: 6px 14px; border-radius: var(--r-pill); text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); }
.seg a[aria-current="page"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.delta { font-size: var(--fs-xs); font-family: var(--font-display); margin-inline-start: 4px; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--bad); }
.kpi.primary .delta.up { color: var(--volt); }
.funnel { display: grid; gap: var(--s3); }
.funnel > div { display: grid; grid-template-columns: 120px 1fr 48px; gap: var(--s3); align-items: center; font-size: var(--fs-sm); }
.funnel .bar { height: 22px; background: var(--line-2); border-radius: 6px; display: block; overflow: hidden; }
.funnel .bar b { display: block; height: 100%; background: var(--pitch); border-radius: 6px; }
.funnel .bar b.min { min-width: 6px; }
.funnel .num { text-align: end; font-weight: 600; }
.bar-row.wide { grid-template-columns: 70px 1fr 30px; margin-bottom: 6px; }
.checklist.cols { grid-template-columns: 1fr; }
@media (min-width: 720px) { .checklist.cols { grid-template-columns: 1fr 1fr; } }
.offer-types { display: grid; gap: var(--s2); }
@media (min-width: 720px) { .offer-types { grid-template-columns: repeat(3, 1fr); } }
.offer-pill { display: inline-flex; gap: 6px; align-items: center; background: var(--volt); color: var(--ink); font-weight: 700; font-size: var(--fs-xs); padding: 3px 10px; border-radius: var(--r-pill); }
.price s { color: var(--muted); font-size: var(--fs-sm); margin-inline-end: 6px; }

.summary-line.discount { color: var(--ok); font-weight: 600; }
.sm-select { width: auto; min-height: 36px; padding: 4px 10px; }
.coupon summary { cursor: pointer; color: var(--pitch); }
.discount-note { color: var(--ok); font-weight: 600; }

/* ---------- Profile trust, gallery, matching ---------- */
.trust-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.trust { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.trust.on { color: var(--pitch-dark); border-color: #BFE2CF; background: var(--ok-tint); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s2); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); }
.gallery figcaption { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.skills .tag { padding: 4px 12px; }
.match { font-size: var(--fs-xs); color: var(--pitch-dark); background: var(--pitch-tint); border-radius: var(--r-sm); padding: 6px 10px; line-height: 1.5; }
.match b { font-size: var(--fs-sm); }
.match-card { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; background: var(--pitch-tint); border-color: #BFE2CF; }
.match-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1; font-size: var(--fs-sm); min-width: 200px; }
.match-card li { display: flex; gap: 6px; align-items: center; color: var(--pitch-dark); }
.match-score { display: grid; text-align: center; }
.match-score b { font-size: var(--fs-2xl); color: var(--pitch-dark); }
.match-score small { color: var(--ink-2); font-size: var(--fs-xs); }
.band.light { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.band.light h2 { color: var(--ink); }
.band.light p { color: var(--ink-2); }
.pt-0 { padding-top: 0; }
.role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s5); }
.role-cards a { display: grid; gap: 2px; padding: var(--s3) var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--ink-2); background: var(--paper); }
.role-cards a svg { color: var(--muted); margin-bottom: 4px; }
.role-cards a small { color: var(--muted); font-size: var(--fs-xs); }
.role-cards a[aria-current="page"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.role-cards a[aria-current="page"] svg { color: var(--pitch); }
.mini-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 var(--s2); font-size: var(--fs-xs); color: var(--muted); counter-reset: ms; flex-wrap: wrap; }
.mini-steps li { counter-increment: ms; }
.mini-steps li::before { content: counter(ms); display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--line-2); margin-inline-end: 4px; font-family: var(--font-display); }
.mini-steps li + li::after { content: ""; }
.mini-steps li.on { color: var(--ink); font-weight: 600; }
.mini-steps li.on::before { background: var(--ink); color: #fff; }
.onb > *, .onb-side, .stepper { min-width: 0; }
.onb { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .onb { grid-template-columns: 270px minmax(0, 1fr); } }

/* =====================================================================================
   THEMES — Material 3 (Google) light / dark / auto. "classic" = the rules above, untouched.
   Material tokens are derived from the brand seed #0E6B57 (tonal palette).
   ===================================================================================== */
html[data-theme^="material"] {
  --chalk: #F4F8F5; --paper: #FFFFFF; --ink: #171D1B; --ink-2: #3F4946; --muted: #6F7975;
  --line: #DCE5E0; --line-2: #E9EFEB; --outline: #6F7975;
  --pitch: #006B5A; --pitch-dark: #005143; --pitch-tint: #D4EDE5; --on-pitch: #FFFFFF;
  --volt: #C7E7FF;
  --pri-c: #A6F0DA; --on-pri-c: #00201A; --sec-c: #CDE8DF; --on-sec-c: #072019; --ter-c: #C7E7FF; --on-ter-c: #001E2E;
  --s-low: #EFF5F1; --s-c: #E9EFEB; --s-high: #E3EAE6; --err: #BA1A1A;
  --ok: #146C43; --ok-tint: #D3F0DF; --warn: #7A5900; --warn-tint: #FFEFC7; --bad: #BA1A1A; --bad-tint: #FFDAD6;
  --info: #2C5596; --info-tint: #DCE6FF;
  --font-ui: "Roboto", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Roboto", "Noto Sans Arabic", "Segoe UI", sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.18), 0 1px 3px 1px rgba(0,0,0,.08);
  --shadow-2: 0 1px 2px rgba(0,0,0,.2), 0 2px 6px 2px rgba(0,0,0,.1);
  --focus: 0 0 0 3px color-mix(in srgb, var(--pitch) 35%, transparent);
  color-scheme: light;
}
html[data-theme="material-dark"] {
  --chalk: #0E1513; --paper: #1A211F; --ink: #DEE4E0; --ink-2: #BFC9C4; --muted: #89938E;
  --line: #3F4946; --line-2: #252B29; --outline: #89938E;
  --pitch: #5FDBBF; --pitch-dark: #7FF8DB; --pitch-tint: #1F3A33; --on-pitch: #00382E; --volt: #2A4A5F;
  --pri-c: #005143; --on-pri-c: #7FF8DB; --sec-c: #334B44; --on-sec-c: #CDE8DF; --ter-c: #2A4A5F; --on-ter-c: #C7E7FF;
  --s-low: #171D1B; --s-c: #1B211F; --s-high: #252B29; --err: #FFB4AB;
  --ok: #7DDBA3; --ok-tint: #13362A; --warn: #F2C46A; --warn-tint: #3B2E10; --bad: #FFB4AB; --bad-tint: #5C1A16;
  --info: #A8C8FF; --info-tint: #1B3354; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="material-auto"] {
    --chalk: #0E1513; --paper: #1A211F; --ink: #DEE4E0; --ink-2: #BFC9C4; --muted: #89938E;
    --line: #3F4946; --line-2: #252B29; --outline: #89938E;
    --pitch: #5FDBBF; --pitch-dark: #7FF8DB; --pitch-tint: #1F3A33; --on-pitch: #00382E; --volt: #2A4A5F;
    --pri-c: #005143; --on-pri-c: #7FF8DB; --sec-c: #334B44; --on-sec-c: #CDE8DF; --ter-c: #2A4A5F; --on-ter-c: #C7E7FF;
    --s-low: #171D1B; --s-c: #1B211F; --s-high: #252B29; --err: #FFB4AB;
    --ok: #7DDBA3; --ok-tint: #13362A; --warn: #F2C46A; --warn-tint: #3B2E10; --bad: #FFB4AB; --bad-tint: #5C1A16;
    --info: #A8C8FF; --info-tint: #1B3354; color-scheme: dark;
  }
  html[data-theme="material-auto"] .logo-light { display: none; }
  html[data-theme="material-auto"] .logo-dark { display: inline; }
}
.logo-dark { display: none; }
html[data-theme="material-dark"] .logo-light { display: none; }
html[data-theme="material-dark"] .logo-dark { display: inline; }

/* ---- Material components ---- */
[data-theme^="material"] h1, [data-theme^="material"] h2, [data-theme^="material"] h3 { font-weight: 500; letter-spacing: 0; }
[data-theme^="material"] .hero h1 { font-weight: 500; letter-spacing: -.01em; }
[data-theme^="material"] .site-header { background: var(--chalk); border-bottom: 1px solid transparent; backdrop-filter: none; }
[data-theme^="material"] .brand b { font-weight: 500; }
[data-theme^="material"] .nav a { border-radius: 20px; font-weight: 500; }
[data-theme^="material"] .nav a:hover, [data-theme^="material"] .nav a[aria-current="page"] { background: var(--sec-c); color: var(--on-sec-c); }
[data-theme^="material"] .icon-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
[data-theme^="material"] .avatar-btn { background: var(--pitch); color: var(--on-pitch); }
[data-theme^="material"] .menu-panel { border: 0; border-radius: 12px; box-shadow: var(--shadow-2); background: var(--s-c); }
[data-theme^="material"] .menu-panel a:hover, [data-theme^="material"] .menu-panel button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
[data-theme^="material"] .notif-head { background: var(--s-c); border-color: var(--line); }
[data-theme^="material"] .notif-item.is-new { background: var(--sec-c); }
[data-theme^="material"] .notif-item.is-new:hover { background: color-mix(in srgb, var(--sec-c) 85%, var(--ink)); }
/* buttons: filled / tonal / outlined / text */
[data-theme^="material"] .btn { min-height: 40px; padding: 0 24px; border-radius: 20px; font-weight: 500; letter-spacing: .01em; border-width: 1px; }
[data-theme^="material"] .btn-sm { min-height: 36px; padding: 0 16px; }
[data-theme^="material"] .btn-primary { background: var(--pitch); color: var(--on-pitch); }
[data-theme^="material"] .btn-primary:hover { background: var(--pitch); color: var(--on-pitch); box-shadow: var(--shadow); filter: brightness(1.06); }
[data-theme^="material"] .btn-dark { background: var(--sec-c); color: var(--on-sec-c); }
[data-theme^="material"] .btn-dark:hover { background: var(--sec-c); color: var(--on-sec-c); box-shadow: var(--shadow); }
[data-theme^="material"] .btn-ghost { background: transparent; color: var(--pitch); border-color: var(--outline); }
[data-theme^="material"] .btn-ghost:hover { background: color-mix(in srgb, var(--pitch) 8%, transparent); color: var(--pitch); border-color: var(--outline); }
[data-theme^="material"] .btn-danger { color: var(--err); border-color: var(--outline); }
[data-theme^="material"] .btn-danger:hover { background: color-mix(in srgb, var(--err) 8%, transparent); color: var(--err); }
[data-theme^="material"] .linkish { color: var(--pitch); }
/* fields: outlined text fields */
[data-theme^="material"] input:not([type=checkbox]):not([type=radio]):not([type=file]), [data-theme^="material"] select, [data-theme^="material"] textarea {
  border: 1px solid var(--outline); border-radius: 4px; background: var(--paper); color: var(--ink); min-height: 48px; }
[data-theme^="material"] input:hover, [data-theme^="material"] select:hover, [data-theme^="material"] textarea:hover { border-color: var(--ink); }
[data-theme^="material"] input:focus, [data-theme^="material"] select:focus, [data-theme^="material"] textarea:focus { border-color: var(--pitch); box-shadow: inset 0 0 0 1px var(--pitch); }
[data-theme^="material"] .invalid input, [data-theme^="material"] .invalid select, [data-theme^="material"] .invalid textarea { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
[data-theme^="material"] label, [data-theme^="material"] .label { font-weight: 500; }
[data-theme^="material"] .check input, [data-theme^="material"] input[type=radio] { accent-color: var(--pitch); }
/* chips & selection */
[data-theme^="material"] .chip-input span { border-radius: 8px; border: 1px solid var(--outline); padding: 6px 14px; background: transparent; color: var(--ink-2); }
[data-theme^="material"] .chip-input input:checked + span { background: var(--sec-c); color: var(--on-sec-c); border-color: transparent; }
[data-theme^="material"] .chip-input input:checked + span::before { content: "✓ "; }
[data-theme^="material"] .goal span, [data-theme^="material"] .theme-card, [data-theme^="material"] .mode-opt > span { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
[data-theme^="material"] .goal input:checked + span, [data-theme^="material"] .mode-opt input:checked + span, [data-theme^="material"] .theme-opt input:checked + .theme-card { background: var(--sec-c); border-color: var(--pitch); box-shadow: inset 0 0 0 1px var(--pitch); }
[data-theme^="material"] .chip-btn { border-radius: 8px; border-style: solid; border-color: var(--line); }
[data-theme^="material"] .tag { background: var(--sec-c); color: var(--on-sec-c); border-radius: 8px; }
/* surfaces */
[data-theme^="material"] .card, [data-theme^="material"] .t-card, [data-theme^="material"] .service, [data-theme^="material"] .filter-panel { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
[data-theme^="material"] .t-card:hover { border-color: var(--line); box-shadow: var(--shadow); }
[data-theme^="material"] .kpi { border: 0; border-radius: 16px; background: var(--s-low); }
[data-theme^="material"] .kpi.primary { background: var(--pri-c); color: var(--on-pri-c); }
[data-theme^="material"] .kpi.primary .l, [data-theme^="material"] .kpi.primary .d { color: color-mix(in srgb, var(--on-pri-c) 80%, transparent); }
[data-theme^="material"] .kpi.primary .delta.up { color: var(--on-pri-c); }
[data-theme^="material"] .table-wrap { border-radius: 12px; border-color: var(--line); background: var(--paper); }
[data-theme^="material"] th { background: var(--s-low); color: var(--ink-2); font-weight: 500; }
[data-theme^="material"] td { border-color: var(--line-2); }
[data-theme^="material"] tbody tr:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
[data-theme^="material"] .empty { border: 0; background: var(--s-low); border-radius: 16px; }
[data-theme^="material"] .flash { border: 0; border-radius: 12px; }
[data-theme^="material"] .callout { border-inline-start: 0; border-radius: 12px; background: var(--sec-c); color: var(--on-sec-c); }
[data-theme^="material"] .callout.warn { background: var(--warn-tint); color: var(--ink); }
[data-theme^="material"] .callout.bad { background: var(--bad-tint); color: var(--ink); }
[data-theme^="material"] .badge { border-radius: 8px; font-weight: 500; }
[data-theme^="material"] .tone-done { background: var(--sec-c); color: var(--on-sec-c); }
[data-theme^="material"] .demo-tag { background: var(--ter-c); color: var(--on-ter-c); }
[data-theme^="material"] .face { background: var(--pri-c); color: var(--on-pri-c); border-radius: 50%; }
[data-theme^="material"] .date-box { background: var(--s-c); border-radius: 12px; }
[data-theme^="material"] .divider, [data-theme^="material"] hr { background: var(--line); }
/* hero search bar (Google-style pill) */
[data-theme^="material"] .finder { border: 0; border-radius: 28px; box-shadow: var(--shadow-2); background: var(--paper); padding: 12px; }
[data-theme^="material"] .finder select { border: 0; border-radius: 20px; background: var(--s-c); min-height: 48px; }
[data-theme^="material"] .finder .btn { min-height: 48px; border-radius: 24px; }
[data-theme^="material"] .hero-mark { opacity: .05; }
[data-theme^="material"] .band { background: var(--pri-c); color: var(--on-pri-c); border-radius: 28px; }
[data-theme^="material"] .band h2 { color: var(--on-pri-c); }
[data-theme^="material"] .band p, [data-theme^="material"] .band ul { color: color-mix(in srgb, var(--on-pri-c) 85%, transparent); }
[data-theme^="material"] .band li::before { color: var(--pitch); }
[data-theme^="material"] .band .btn-primary { background: var(--pitch); color: var(--on-pitch); }
[data-theme^="material"] .band.light { background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
[data-theme^="material"] .band.light h2 { color: var(--ink); }
[data-theme^="material"] .band.light p { color: var(--ink-2); }
[data-theme^="material"] .steps li::before { color: var(--pitch); }
[data-theme^="material"] .cat-row { border-color: var(--line); }
/* navigation: drawer, rail chips, bottom bar, tabs */
[data-theme^="material"] .side a { border-radius: 28px; min-height: 48px; padding-inline: 16px; color: var(--ink-2); font-weight: 500; }
[data-theme^="material"] .side a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
[data-theme^="material"] .side a[aria-current="page"] { background: var(--sec-c); color: var(--on-sec-c); font-weight: 600; }
[data-theme^="material"] .side .n { background: var(--err); color: #fff; }
[data-theme^="material"] .tabbar { background: var(--s-c); border-top: 0; }
[data-theme^="material"] .tabbar a { color: var(--ink-2); font-weight: 500; gap: 4px; padding-top: 12px; }
[data-theme^="material"] .tabbar a svg { box-sizing: content-box; padding: 4px 20px; border-radius: 16px; }
[data-theme^="material"] .tabbar a[aria-current="page"] { color: var(--ink); }
[data-theme^="material"] .tabbar a[aria-current="page"] svg { background: var(--sec-c); color: var(--on-sec-c); }
[data-theme^="material"] .admin-nav-mobile a { border-radius: 8px; border-color: var(--outline); background: transparent; color: var(--ink-2); font-weight: 500; }
[data-theme^="material"] .admin-nav-mobile a[aria-current="page"] { background: var(--sec-c); color: var(--on-sec-c); border-color: transparent; }
[data-theme^="material"] .tabs { border-color: var(--line); }
[data-theme^="material"] .tabs a { font-weight: 500; border-bottom-width: 3px; border-radius: 3px 3px 0 0; }
[data-theme^="material"] .tabs a[aria-current="page"] { color: var(--pitch); border-color: var(--pitch); }
[data-theme^="material"] .seg, [data-theme^="material"] .role-switch { background: transparent; border: 1px solid var(--outline); padding: 0; overflow: hidden; }
[data-theme^="material"] .seg a { border-radius: 0; }
[data-theme^="material"] .seg a[aria-current="page"] { background: var(--sec-c); color: var(--on-sec-c); box-shadow: none; }
[data-theme^="material"] .role-cards a { border-radius: 12px; border: 1px solid var(--line); }
[data-theme^="material"] .role-cards a[aria-current="page"] { background: var(--sec-c); color: var(--on-sec-c); border-color: var(--pitch); box-shadow: inset 0 0 0 1px var(--pitch); }
[data-theme^="material"] .stepper .current a { background: var(--sec-c); color: var(--on-sec-c); }
[data-theme^="material"] .stepper .current .dot { border-color: var(--on-sec-c); color: var(--on-sec-c); background: transparent; }
[data-theme^="material"] .stepper .done .dot { background: var(--pitch); border-color: var(--pitch); color: var(--on-pitch); }
[data-theme^="material"] .stepper a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
[data-theme^="material"] .mini-steps li.on::before, [data-theme^="material"] .steps-mini .on b, [data-theme^="material"] .pref-num { background: var(--pitch); color: var(--on-pitch); }
/* booking */
[data-theme^="material"] .day-tab { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
[data-theme^="material"] .day-tab[aria-selected="true"] { background: var(--sec-c); color: var(--on-sec-c); border-color: transparent; }
[data-theme^="material"] .day-tab[aria-selected="true"] small { color: var(--on-sec-c); }
[data-theme^="material"] .slot span { border: 1px solid var(--outline); border-radius: 8px; background: var(--paper); }
[data-theme^="material"] .slot input:checked + span { background: var(--pitch); border-color: var(--pitch); color: var(--on-pitch); }
[data-theme^="material"] .summary-line.total { border-top: 1px solid var(--line); }
[data-theme^="material"] .mobile-cta { background: var(--s-c); border-top: 0; }
[data-theme^="material"] .pay-methods span { border-color: var(--line); border-radius: 6px; }
/* data viz & misc */
[data-theme^="material"] .chart .colbar, [data-theme^="material"] .meter i, [data-theme^="material"] .funnel .bar b { background: var(--pitch); }
[data-theme^="material"] .bar i { background: var(--pitch); }
[data-theme^="material"] .meter, [data-theme^="material"] .bar, [data-theme^="material"] .funnel .bar { background: var(--s-high); }
[data-theme^="material"] .offer-pill, [data-theme^="material"] .match { background: var(--ter-c); color: var(--on-ter-c); }
[data-theme^="material"] .match-card, [data-theme^="material"] .trust.on { background: var(--sec-c); color: var(--on-sec-c); border-color: transparent; }
[data-theme^="material"] .match-card li, [data-theme^="material"] .match-score b { color: var(--on-sec-c); }
[data-theme^="material"] .trust { border-radius: 8px; border-color: var(--line); background: var(--paper); }
[data-theme^="material"] .msg.me { background: var(--sec-c); color: var(--on-sec-c); }
[data-theme^="material"] .msg.staff { background: var(--paper); border-color: var(--line); }
[data-theme^="material"] .drop { background: var(--s-low); border-color: var(--outline); border-radius: 16px; }
[data-theme^="material"] .tag-box { border: 1px solid var(--outline); border-radius: 4px; background: var(--paper); }
[data-theme^="material"] .site-footer { background: var(--s-low); border-top: 0; }
[data-theme^="material"] .site-footer a { color: var(--ink-2); }
[data-theme^="material"] .sandbox-bar { background: var(--warn-tint); color: var(--warn); border-color: transparent; }
[data-theme^="material"] .gw { background: var(--paper); border-color: var(--line); }
[data-theme^="material"] details.faq { border-color: var(--line); }
[data-theme^="material"] .skip { background: var(--pitch); color: var(--on-pitch); }

/* ---------- Theme & mode pickers ---------- */
.theme-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); margin-top: var(--s2); }
@media (min-width: 720px) { .theme-grid { grid-template-columns: repeat(4, 1fr); } }
.theme-picker.compact .theme-grid { grid-template-columns: repeat(2, 1fr); }
.theme-opt { position: relative; display: block; }
.theme-opt input { position: absolute; opacity: 0; }
.theme-card { display: grid; gap: 4px; padding: 8px 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper); cursor: pointer; height: 100%; }
.theme-card img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--line); background: var(--line-2); }
.theme-card b { font-size: var(--fs-sm); margin-top: 4px; }
.theme-card small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.theme-opt input:checked + .theme-card { border-color: var(--pitch); box-shadow: inset 0 0 0 1px var(--pitch); }
.theme-opt input:focus-visible + .theme-card { box-shadow: var(--focus); }
.mode-grid { display: grid; gap: var(--s3); margin-top: var(--s2); }
@media (min-width: 640px) { .mode-grid { grid-template-columns: 1fr 1fr; } }
.mode-opt { position: relative; display: block; }
.mode-opt input { position: absolute; opacity: 0; }
.mode-opt > span { display: grid; gap: 4px; padding: var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper); cursor: pointer; height: 100%; }
.mode-opt small { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.mode-opt em { font-style: normal; color: var(--muted); font-size: var(--fs-xs); }
.mode-ico { color: var(--pitch); }
.mode-opt input:checked + span { border-color: var(--pitch); box-shadow: inset 0 0 0 1px var(--pitch); background: var(--pitch-tint); }
.mode-opt input:focus-visible + span { box-shadow: var(--focus); }
.appearance-step { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.appearance-step summary { cursor: pointer; list-style: none; }
.appearance-step summary span { display: grid; }
.appearance-step summary small { color: var(--muted); font-size: var(--fs-xs); }
.auth .card:has(.appearance-step[open]) { max-width: 640px; }
/* top-bar view-mode switch (segmented) */
.mode-toggle-form { display: inline-flex; }
.mode-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; background: var(--paper); cursor: pointer; font: inherit; }
.mode-toggle .seg-o { padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.mode-toggle .seg-o.on { background: var(--ink); color: var(--paper); }
[data-theme^="material"] .mode-toggle { border-color: var(--outline); background: transparent; }
[data-theme^="material"] .mode-toggle .seg-o.on { background: var(--sec-c); color: var(--on-sec-c); }
@media (max-width: 420px) { .mode-toggle .seg-o { padding: 4px 7px; } .hide-sm { display: none; } }

/* ---------- View modes ---------- */
[data-mode="simple"] .adv { display: none !important; }
[data-mode="advanced"] .simple-only { display: none !important; }
[data-mode="simple"] body { font-size: 1.0625rem; }
[data-mode="simple"] .btn { min-height: 48px; }
[data-mode="simple"] .btn-sm { min-height: 42px; }
[data-mode="simple"] .list-item { padding-block: var(--s4); }
details.more-filters > summary { cursor: pointer; color: var(--pitch); font-weight: 600; font-size: var(--fs-sm); margin-top: var(--s3); }

/* ---------- Decision bar (accept / decline) ---------- */
.decide { display: grid; gap: var(--s3); }
.decide .btn-primary { width: 100%; }
@media (min-width: 640px) { .decide { grid-template-columns: auto 1fr; align-items: start; } .decide .btn-primary { width: auto; } }
.decline > summary { list-style: none; display: flex; width: 100%; }
@media (min-width: 640px) { .decline > summary { display: inline-flex; width: auto; } }
.decline > summary::-webkit-details-marker { display: none; }
.decline[open] > summary { display: none; }
.decline form { display: grid; gap: var(--s2); }
.decline .row { justify-content: flex-start; }
.brand b { white-space: nowrap; }
@media (max-width: 440px) {
  .site-header .wrap { gap: var(--s2); }
  .header-actions { gap: 6px; }
  .header-actions .btn-dark { display: none; }
  .brand img { width: 30px; height: 30px; }
  .brand b { font-size: 1.1rem; }
}

/* ---- Legal pages ---------------------------------------------------------------------- */
.legal-layout { display: grid; gap: var(--s6); }
.legal-layout > * { min-width: 0; }
@media (min-width: 980px) { .legal-layout { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; } .legal-side { position: sticky; top: 88px; } .legal-toc-mobile { display: none; } }
@media (max-width: 979px) { .legal-side .legal-toc:first-child { display: none; } }
.legal-doc { max-width: 760px; }
.legal-body { font-size: var(--fs-md); line-height: 1.95; }
.legal-body p { margin: 0 0 var(--s3); }
.legal-h { display: flex; gap: var(--s3); align-items: baseline; margin: var(--s7) 0 var(--s3); font-size: var(--fs-xl); scroll-margin-top: 90px; }
.legal-n { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--pitch-tint); color: var(--pitch-dark); font-size: var(--fs-sm); font-weight: 700; }
.legal-body h3 { font-size: var(--fs-lg); margin: var(--s5) 0 var(--s2); }
.legal-list { margin: 0 0 var(--s3); padding-inline-start: 1.3em; display: grid; gap: 6px; }
.legal-list li::marker { color: var(--pitch); }
.legal-note { border-inline-start: 4px solid var(--pitch); background: var(--pitch-tint); padding: var(--s3) var(--s4); border-radius: var(--r-sm); margin: var(--s4) 0; font-size: var(--fs-sm); line-height: 1.8; }
.legal-toc h4 { font-size: var(--fs-sm); margin-bottom: var(--s2); }
.legal-toc ol, .legal-toc ul, .legal-toc-mobile ol { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 4px; font-size: var(--fs-sm); }
.legal-toc a, .legal-toc-mobile a { color: var(--ink-2); text-decoration: none; }
.legal-toc a:hover { color: var(--pitch); text-decoration: underline; }
.legal-toc-mobile { margin: var(--s4) 0; }
.legal-toc-mobile summary { cursor: pointer; font-weight: 600; }
.legal-toc-mobile ol { margin-top: var(--s3); }
.legal-hub { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.legal-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.legal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.legal-card b { color: var(--ink); }
.terms-card.terms-locked { border-color: var(--warn); }
.terms-box { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); }
.terms-box.invalid { border-color: var(--bad); }
.terms-box .indent { margin-inline-start: 30px; max-width: 360px; }

/* ---- Footer trust bar & social -------------------------------------------------------- */
.social-links { display: flex !important; flex-wrap: wrap; gap: var(--s2) !important; }
.social-links a { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; font-size: var(--fs-xs); font-weight: 600; }
.social-links a:hover { border-color: var(--pitch); text-decoration: none !important; }
.trust-bar { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 900px) { .trust-bar { grid-template-columns: auto 1fr auto; } }
.trust-badge { display: inline-flex; gap: var(--s3); align-items: center; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s2) var(--s3); color: var(--ink) !important; text-decoration: none !important; background: var(--chalk); }
.trust-badge svg { color: var(--ok); flex: none; }
.trust-badge > span { display: grid; gap: 2px; font-size: var(--fs-sm); }
.trust-badge:hover { border-color: var(--ok); }
.trust-facts { display: flex !important; flex-wrap: wrap; gap: var(--s2) var(--s5) !important; font-size: var(--fs-xs); }
.trust-facts li { display: inline-flex; align-items: center; gap: 6px; }
.trust-facts svg { color: var(--muted); flex: none; }
.trust-pay { display: grid; gap: var(--s2); justify-items: start; }
@media (min-width: 900px) { .trust-pay { justify-items: end; text-align: end; } }

/* ---- Admin: compliance & social ------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.checklist li { display: flex; gap: var(--s3); align-items: flex-start; }
.checklist .ck { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.checklist .ok .ck { background: var(--ok-tint); color: var(--ok); }
.checklist .todo .ck { background: var(--warn-tint); color: var(--warn); }
.social-admin { display: grid; gap: var(--s3); }
.social-row { display: grid; gap: var(--s2); align-items: center; }
@media (min-width: 700px) { .social-row { grid-template-columns: 170px minmax(0, 1fr) auto; } }
.span-2 { grid-column: 1 / -1; }

/* ---- Reschedule request ---------------------------------------------------------------- */
.reschedule-card { border-color: var(--warn); }
.move-times { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; margin: var(--s3) 0; }
.move-times > div { display: grid; gap: 2px; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--line); }
.move-times .new { border-color: var(--pitch); background: var(--pitch-tint); }
.move-times .arrow { font-size: var(--fs-lg); color: var(--muted); }
.center-text { text-align: center; }
.row.center { justify-content: center; }
.slot.held { border: 0; padding: 0; background: none; font: inherit; width: 100%; }
.slot.held span { display: grid; gap: 0; line-height: 1.25; border-style: dashed; color: var(--muted); background: transparent; padding: 6px; }
.slot.held small { font-size: 10px; color: var(--pitch); font-weight: 600; font-family: var(--font-ui); }
.slot.held:hover span { border-color: var(--pitch); color: var(--ink); }
.text-warn { color: var(--warn); }

/* ---- Multi-slot requests ----------------------------------------------------------------- */
.group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.group-list li { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.group-list li:last-child { border-bottom: 0; }
.group-list .grow { min-width: 0; flex: 1; }
.gl-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--line); color: var(--muted); flex: none; }
.st-awaiting_payment .gl-ico, .st-confirmed .gl-ico, .st-completed .gl-ico { background: var(--ok-tint); color: var(--ok); }
.st-rejected .gl-ico, .st-expired .gl-ico, .st-cancelled .gl-ico { background: var(--bad-tint); color: var(--bad); }
.st-rejected b, .st-expired b, .st-cancelled b { text-decoration: line-through; color: var(--muted); }
.decide-list .group-list li { align-items: center; }
.toggle-pair { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.toggle-pair label { position: relative; }
.toggle-pair input { position: absolute; opacity: 0; }
.toggle-pair span { display: block; padding: 6px 14px; font-size: var(--fs-sm); cursor: pointer; }
.toggle-pair input:checked + span.yes { background: var(--ok); color: #fff; }
.toggle-pair input:checked + span.no { background: var(--bad); color: #fff; }
.toggle-pair input:focus-visible + span { outline: 2px solid var(--focus); }
.slot input:disabled + span { opacity: .45; cursor: not-allowed; }
.group-list li { flex-wrap: nowrap; align-items: flex-start; } .group-list .gl-ico { margin-top: 2px; }
.timeline li { padding-bottom: var(--s4); line-height: 1.5; }
.timeline li::before { top: 7px; }
.tl-title { font-weight: 600; color: var(--ink); }
.tl-meta { font-size: var(--fs-xs); color: var(--muted); }
.tl-note { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; }

/* ---- Grouped specialties ---------------------------------------------------------------- */
.cat-picker { display: grid; gap: var(--s2); margin-top: var(--s3); }
.cat-group { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); background: var(--paper); }
.cat-group summary { cursor: pointer; display: flex; justify-content: space-between; gap: var(--s3); align-items: center; list-style: none; }
.cat-group summary::-webkit-details-marker { display: none; }
.cat-group summary::after { content: "▾"; color: var(--muted); }
.cat-group[open] summary::after { content: "▴"; }
.cat-group summary > .xs { margin-inline-start: auto; }
.cat-group summary { justify-content: flex-start; }
.g-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--pitch-tint); color: var(--pitch-dark); flex: none; }
.sel-n { color: var(--pitch); font-weight: 600; }
.cat-st { display: block; font-size: 10px; font-weight: 600; }
.cat-st.st-pending { color: var(--warn); } .cat-st.st-verified { color: var(--ok); } .cat-st.st-rejected { color: var(--bad); }
.cat-groups { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cat-gcard { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); background: var(--paper); }
.cat-gcard h3 { font-size: var(--fs-md); margin: 0 0 var(--s3); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: var(--fs-sm); }
.cat-chip span { background: var(--pitch-tint); color: var(--pitch-dark); border-radius: var(--r-pill); padding: 0 7px; font-size: var(--fs-xs); font-weight: 700; }
.cat-chip:hover { border-color: var(--pitch); }
.cat-chip.empty { color: var(--muted); }
.spec-cover { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.spec-cover li { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); flex-wrap: wrap; }
.spec-cover li .xs { margin-inline-start: auto; }
.spec-cover .sc-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.spec-cover .ok .sc-ico { background: var(--ok-tint); color: var(--ok); }
.spec-cover .wait .sc-ico { background: var(--warn-tint); color: var(--warn); }
.spec-cover .need { border-color: var(--bad); } .spec-cover .need .sc-ico { background: var(--bad-tint); color: var(--bad); }
.chip-btn[hidden] { display: none; }
.req { color: var(--bad); font-weight: 700; margin-inline-start: 2px; }
.req-note { margin: 0 0 var(--s3); }
.char-count { display: block; text-align: end; font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.char-count.short { color: var(--warn); }
.char-count.full { color: var(--bad); }

/* ======================================================================================
   Marketing landing (Material-style): tonal surfaces, large type, soft shapes
   ====================================================================================== */
.btn-lg { min-height: 52px; padding: 0 var(--s6); font-size: var(--fs-md); border-radius: var(--r-pill); }
.btn-tonal { background: var(--sec-c, var(--pitch-tint)); color: var(--on-sec-c, var(--pitch-dark)); border: 0; }
.btn-tonal:hover { filter: brightness(.97); }
.btn-light { background: #fff; color: var(--pitch-dark); border: 0; }
.btn-light:hover { background: #f1f5f3; }
.lp-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--pri-c, var(--pitch-tint)); color: var(--on-pri-c, var(--pitch-dark)); flex: none; }
.lp-ico.big { width: 64px; height: 64px; border-radius: 22px; }
.lp-ico.c2 { background: var(--ter-c, #E3F0FB); color: var(--on-ter-c, #0B3954); }
.lp-ico.c3 { background: var(--sec-c, #E5F2EC); color: var(--on-sec-c, #0E3B2E); }
.lp-ico.c4 { background: #FFE7D6; color: #6A2E00; }
.lp-ico.c5 { background: #EDE5FF; color: #2F1A6B; }
.lp-ico.c6 { background: #FFF1C2; color: #4D3A00; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--sec-c, var(--pitch-tint)); color: var(--on-sec-c, var(--pitch-dark)); font-size: var(--fs-xs); font-weight: 600; }
.lp-eyebrow.light { background: rgba(255,255,255,.16); color: #fff; }

.lp-hero { position: relative; overflow: hidden; padding: var(--s7) 0 var(--s6); }
.lp-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.lp-blob.b1 { width: 420px; height: 420px; background: var(--pri-c, var(--pitch-tint)); top: -140px; inset-inline-end: -120px; }
.lp-blob.b2 { width: 360px; height: 360px; background: var(--ter-c, #E3F0FB); bottom: -160px; inset-inline-start: -140px; }
.lp-hero-grid { position: relative; display: grid; gap: var(--s6); align-items: center; }
.lp-hero-grid > * { min-width: 0; }
@media (min-width: 960px) { .lp-hero-grid { grid-template-columns: 1.15fr .85fr; } }
.lp-hero h1 { font-size: clamp(2.1rem, 5.6vw, 3.6rem); line-height: 1.12; letter-spacing: -.02em; margin: var(--s4) 0 var(--s3); font-weight: 700; max-width: 16ch; }
.lp-hero .lead { font-size: var(--fs-lg); color: var(--ink-2); max-width: 52ch; }
.lp-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.lp-cta.center { justify-content: center; }
.lp-trust { list-style: none; padding: 0; margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-sm); color: var(--ink-2); }
.lp-trust li { display: inline-flex; gap: 6px; align-items: center; }
.lp-trust svg { color: var(--pitch); }

.lp-visual { position: relative; display: grid; place-items: center; min-height: 380px; }
.lp-phone { width: min(290px, 78vw); background: var(--paper); border-radius: 36px; padding: 14px 14px 18px; box-shadow: 0 24px 60px rgba(0,40,30,.18), 0 2px 6px rgba(0,0,0,.06); border: 1px solid var(--line); display: grid; gap: 10px; transform: rotate(-2deg); }
.lp-phone-bar { display: flex; justify-content: center; padding: 2px 0 6px; } .lp-phone-bar i { width: 70px; height: 6px; border-radius: 6px; background: var(--line); }
.lp-mini-card { border-radius: 22px; background: var(--chalk, #F5FBF7); border: 1px solid var(--line); padding: 14px; display: grid; gap: 10px; }
.lp-mini-top { display: flex; gap: 10px; align-items: center; } .lp-mini-top b { display: block; font-size: var(--fs-sm); } .lp-mini-top small { color: var(--muted); font-size: var(--fs-xs); }
.lp-mini-top .face { width: 44px; height: 44px; }
.lp-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--pri-c, var(--pitch-tint)); display: inline-block; }
.lp-mini-tags { display: flex; gap: 6px; flex-wrap: wrap; } .lp-mini-tags span { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--sec-c, var(--pitch-tint)); color: var(--on-sec-c, var(--pitch-dark)); }
.lp-mini-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .lp-mini-slots span { text-align: center; font-size: 12px; padding: 7px 0; border-radius: 12px; border: 1px solid var(--line); }
.lp-mini-slots .on { background: var(--pitch); color: var(--on-pitch, #fff); border-color: var(--pitch); }
.lp-mini-pay { display: flex; justify-content: center; gap: 6px; align-items: center; padding: 10px; border-radius: var(--r-pill); background: var(--pitch); color: var(--on-pitch, #fff); font-size: var(--fs-sm); font-weight: 600; }
.lp-mini-row { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-2); padding: 0 6px; }
.lp-mini-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); } .lp-mini-row .dot.ok { background: var(--ok); }
.lp-float { position: absolute; display: inline-flex; gap: 6px; align-items: center; padding: 9px 14px; border-radius: var(--r-pill); background: var(--paper); box-shadow: 0 8px 24px rgba(0,40,30,.14); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; animation: lpFloat 6s ease-in-out infinite; }
.lp-float svg { color: var(--pitch); }
.lp-float.f1 { top: 8%; inset-inline-start: 0; } .lp-float.f2 { bottom: 22%; inset-inline-end: -2%; animation-delay: -2s; } .lp-float.f3 { bottom: 2%; inset-inline-start: 6%; animation-delay: -4s; }
@keyframes lpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .lp-float { animation: none; } }
@media (max-width: 520px) { .lp-float.f2 { inset-inline-end: 0; } .lp-visual { min-height: 400px; } }

.lp-finder { position: relative; margin-top: var(--s6); display: grid; gap: var(--s2); background: var(--paper); border-radius: 28px; padding: var(--s3); box-shadow: 0 10px 30px rgba(0,40,30,.10); border: 1px solid var(--line); }
.lp-finder .field { min-width: 0; } .lp-finder label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; padding-inline-start: 6px; }
.lp-finder select { border: 0; background: var(--chalk, var(--line-2)); min-height: 50px; border-radius: 16px; }
.lp-finder .btn { min-height: 52px; border-radius: 16px; }
@media (min-width: 760px) { .lp-finder { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; } }

.lp-stats-wrap { padding: var(--s4) 0 var(--s2); }
.lp-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .lp-stats { grid-template-columns: repeat(4, 1fr); } }
.lp-stats li { display: grid; justify-items: start; gap: 4px; padding: var(--s4); border-radius: 24px; background: var(--paper); border: 1px solid var(--line); }
.lp-stats b { font-size: var(--fs-2xl); font-family: var(--font-display); line-height: 1.1; margin-top: var(--s2); }
.lp-stats span:last-child { color: var(--muted); font-size: var(--fs-sm); }

.lp-head { display: grid; gap: var(--s2); justify-items: start; margin-bottom: var(--s5); max-width: 640px; }
.lp-head.center { justify-items: center; text-align: center; margin-inline: auto; }
.lp-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: 0; }
.lp-head p { color: var(--muted); margin: 0; }
.lp-features { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.lp-features article { padding: var(--s5); border-radius: 28px; background: var(--paper); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.lp-features article:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,40,30,.10); }
.lp-features h3 { margin: var(--s4) 0 var(--s2); font-size: var(--fs-lg); }
.lp-features p { color: var(--ink-2); margin: 0; font-size: var(--fs-sm); line-height: 1.8; }
.lp-tint { background: linear-gradient(180deg, transparent, var(--sec-c, var(--pitch-tint)) 30%, transparent); }
.cat-gcard h3 { display: flex; align-items: center; gap: var(--s2); }

.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); counter-reset: lp; }
.lp-steps li { position: relative; padding: var(--s5); border-radius: 28px; background: var(--paper); border: 1px solid var(--line); counter-increment: lp; }
.lp-steps li::after { content: counter(lp); position: absolute; top: var(--s4); inset-inline-end: var(--s4); font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--line); line-height: 1; }
.lp-step-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--pitch); color: var(--on-pitch, #fff); }
.lp-steps h3 { margin: var(--s4) 0 var(--s1); font-size: var(--fs-md); } .lp-steps p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

.lp-trainer { display: grid; gap: var(--s5); padding: var(--s6); border-radius: 32px; background: linear-gradient(135deg, var(--pitch-dark), var(--pitch)); color: #fff; position: relative; overflow: hidden; }
@media (min-width: 900px) { .lp-trainer { grid-template-columns: 1.1fr .9fr; align-items: center; padding: var(--s7); } }
.lp-trainer::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.08); top: -120px; inset-inline-start: -80px; }
.lp-trainer h2 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: var(--s3) 0; } .lp-trainer p { color: rgba(255,255,255,.85); margin-bottom: var(--s5); }
.lp-trainer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); position: relative; z-index: 1; }
.lp-trainer li { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-radius: 20px; background: rgba(255,255,255,.12); }
.lp-trainer > div { position: relative; z-index: 1; }

.lp-banner { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; padding: var(--s5); border-radius: 28px; background: var(--sec-c, var(--pitch-tint)); }
.lp-banner > div { flex: 1; min-width: 220px; } .lp-banner h2 { margin: 0 0 4px; font-size: var(--fs-xl); } .lp-banner p { margin: 0; color: var(--ink-2); }
.lp-final { text-align: center; padding: var(--s7) var(--s5); border-radius: 32px; background: var(--pri-c, var(--pitch-tint)); color: var(--on-pri-c, var(--ink)); display: grid; justify-items: center; gap: var(--s2); }
.lp-final h2 { font-size: clamp(1.5rem, 3.6vw, 2.4rem); margin: var(--s3) 0 0; } .lp-final p { margin: 0; color: inherit; opacity: .85; }
.lp-final .lp-ico { background: var(--paper); color: var(--pitch); }
.nav a { display: inline-flex; align-items: center; gap: 6px; }
.nav a svg { opacity: .75; }
.site-footer h4 { display: flex; align-items: center; gap: 6px; }
.site-footer h4 svg { color: var(--pitch); }
.cat-req { display: block; font-size: 10px; font-weight: 600; color: var(--warn); }
.chip-input.risk-very_high > span { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.chip-input input:disabled + span { opacity: .45; cursor: not-allowed; }
.check[hidden] { display: none; }
.cat-req.inline { display: inline; margin-inline-start: 6px; } .cat-rule { display: block; } .cat-rule.off b { text-decoration: line-through; color: var(--muted); }

/* ---- Header: mobile drawer, role-aware CTA -------------------------------------------- */
.nav-drawer { display: none; }
.menu-nav-sm { display: none; }
@media (max-width: 1099px) {
  .nav-drawer { display: block; }
  .menu-nav-sm { display: block; }
  .menu-nav-sm a { display: flex; align-items: center; gap: 8px; }
  .menu-nav-sm hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
  .hide-md { display: none !important; }
}
@media (max-width: 440px) { .header-actions .btn-dark.header-cta { display: inline-flex; } .header-cta { padding: 0 12px; } }
@media (max-width: 340px) { .header-cta { display: none !important; } }
.drawer-panel { width: min(320px, calc(100vw - 24px)); padding: 10px; display: grid; gap: 6px; }
.drawer-links { display: grid; gap: 2px; }
.drawer-links a { display: flex !important; align-items: center; gap: 10px; padding: 12px !important; font-weight: 500; }
.drawer-links a[aria-current="page"] { background: var(--pitch-tint); color: var(--pitch-dark); }
.drawer-links a svg { color: var(--pitch); }
.drawer-auth { display: grid; gap: 8px; padding: 10px 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.drawer-auth .btn { display: flex !important; justify-content: center; color: inherit; }
.drawer-auth .btn-primary { color: #fff; }
.drawer-switch button, .drawer-panel > a { display: flex !important; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2) !important; }

/* ---- Password fields ------------------------------------------------------------------ */
.pw-wrap { position: relative; }
.pw-wrap input { padding-inline-end: 46px; width: 100%; }
.pw-eye { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: var(--r-pill); cursor: pointer; }
.pw-eye:hover { background: var(--line-2); color: var(--ink); }
.pw-eye .i-hide, .pw-eye[aria-pressed="true"] .i-show { display: none; }
.pw-eye[aria-pressed="true"] .i-hide { display: inline; }
.pw-wrap + .char-count { display: block; }
.pw-match { display: block; min-height: 1.3em; margin-top: 4px; font-size: var(--fs-xs, 12px); }
.pw-match.ok { color: var(--ok, #1b7f4b); }
.pw-match.bad { color: var(--bad); }

/* ---- First-visit welcome ---------------------------------------------------------------- */
html.welcome-open { overflow: hidden; }
.welcome { position: fixed; inset: 0; z-index: 100; display: grid; align-items: end; justify-items: center; background: rgba(10, 20, 18, .48); backdrop-filter: blur(3px); animation: wl-fade .25s ease; }
.welcome-card { position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; background: var(--paper); color: var(--ink); border-radius: 26px 26px 0 0; padding: 26px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.18); animation: wl-up .32s cubic-bezier(.2,.8,.2,1); text-align: center; }
.welcome-card::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: -12px auto 14px; }
@media (min-width: 640px) { .welcome { align-items: center; } .welcome-card { border-radius: 26px; padding: 34px 32px 26px; } .welcome-card::before { display: none; } }
.welcome-x { position: absolute; top: 12px; inset-inline-start: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--line-2); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.welcome-brand { display: flex; justify-content: center; margin-bottom: 8px; }
.welcome h2 { font-size: 1.5rem; margin: 4px 0 6px; }
.welcome-options { display: grid; gap: 12px; margin: 20px 0 8px; }
.welcome-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; padding: 16px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.welcome-opt:hover, .welcome-opt:focus-visible { border-color: var(--pitch); background: var(--pitch-tint); outline: none; }
.welcome-opt:active { transform: scale(.99); }
.wo-ico { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--pitch-tint); color: var(--pitch-dark); }
.wo-txt { display: grid; gap: 3px; flex: 1; }
.wo-txt b { font-size: 1.05rem; }
.wo-txt small { color: var(--muted); line-height: 1.6; }
.wo-go { color: var(--muted); transform: scaleX(-1); }
.welcome-skip { border: 0; background: none; color: var(--ink-2); font: inherit; font-weight: 600; padding: 10px 16px; margin: 4px 0 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
@keyframes wl-fade { from { opacity: 0; } }
@keyframes wl-up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .welcome, .welcome-card { animation: none; } }

/* "Viewing as" chip on the home hero */
.lp-viewing { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--line-2); font-size: var(--fs-sm); color: var(--ink-2); }
.lp-viewing span { display: inline-flex; align-items: center; gap: 6px; }
.lp-viewing button { border: 0; background: var(--paper); color: var(--pitch-dark); font: inherit; font-weight: 600; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.welcome-card:focus { outline: none; }

/* ---- Account type switch ---------------------------------------------------------------- */
.acct-switch-head { display: flex; gap: 14px; align-items: flex-start; }
.acct-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--pitch-tint); color: var(--pitch-dark); }
.acct-switch h2 { margin: 0 0 4px; }
.acct-what { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--line-2); }
.acct-what h3 { font-size: var(--fs-md, 1rem); margin: 0 0 8px; }
.check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.check-list li { position: relative; padding-inline-start: 26px; line-height: 1.8; font-size: var(--fs-sm); }
.check-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; color: var(--pitch); font-weight: 700; }
.acct-confirm > summary { list-style: none; display: inline-flex; }
.acct-confirm > summary::-webkit-details-marker { display: none; }
.acct-confirm[open] > summary { display: none; }
.acct-confirm form { max-width: 460px; }

/* ---- AI writing assistant ---------------------------------------------------------------- */
.ai-tools { margin-top: 8px; }
.ai-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ai-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: linear-gradient(135deg, #E3F0EB, #EEF6D2); color: var(--pitch-dark); font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.ai-btn.ghost { background: none; border-color: var(--line); color: var(--ink-2); }
.ai-btn:hover { filter: brightness(.97); }
.ai-btn:disabled { opacity: .6; cursor: progress; }
.ai-note { flex-basis: 100%; }
.ai-notes { margin-top: 10px; padding: 12px; border-radius: var(--r-md); border: 1px dashed var(--line); display: grid; gap: 6px; }
.ai-notes textarea { width: 100%; }
.ai-result { margin-top: 10px; padding: 14px; border-radius: var(--r-md); background: var(--paper); border: 1.5px solid var(--pitch); box-shadow: 0 4px 18px rgba(14,107,87,.08); }
.ai-head { display: flex; justify-content: space-between; align-items: center; color: var(--pitch-dark); margin-bottom: 8px; }
.ai-head b { display: inline-flex; align-items: center; gap: 4px; }
.ai-text { white-space: pre-wrap; line-height: 1.9; font-size: var(--fs-sm); max-height: 320px; overflow: auto; }
.ai-options { display: grid; gap: 8px; }
.ai-options:empty { display: none; }
.ai-opt { text-align: start; padding: 10px 14px !important; }
.ai-extra { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ai-error { color: var(--bad); font-size: var(--fs-sm); }
.ai-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-sm); }
.ai-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pitch-tint); border-top-color: var(--pitch); animation: ai-spin .8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* header: sign-in and sign-up both visible on phones */
@media (max-width: 440px) { .header-login { padding: 0 10px; } .site-header .brand b { font-size: 1rem; } }
@media (max-width: 440px) { .site-header .brand b { display: none; } }

/* ---- Language switch & LTR (English) ------------------------------------------------------ */
.lang-form { display: inline-flex; margin: 0; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.lang-btn:hover { background: var(--line-2); color: var(--ink); }
.lang-btn[lang="ar"] { font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif; }
.drawer-lang .lang-btn, .menu-lang .lang-btn { width: 100%; justify-content: flex-start; border: 0; padding: 10px 12px; }
html[dir="ltr"] .i-arrow { transform: scaleX(-1); }
html[dir="ltr"] .wo-go { transform: none; }
html[dir="ltr"] body { font-family: "Readex Pro", "Roboto", system-ui, sans-serif; }
#services { scroll-margin-top: 80px; }

/* ---- Brand: full logo by default, the mark alone on small screens ------------------------- */
.brand .brand-full, .brand .brand-mark { display: inline-flex; align-items: center; }
.brand .brand-mark { display: none; }
.brand .brand-full img { width: auto; height: 36px; }
.brand-footer .brand-full img { height: 32px; }
.brand .brand-mark img { width: 34px; height: 34px; }
@media (max-width: 440px) {
  .site-header .brand .brand-full { display: none; }
  .site-header .brand .brand-mark { display: inline-flex; }
}

/* ---- Venues & proposed places ------------------------------------------------------------- */
.venue-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.venue-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.venue-add { align-items: end; }
.loc-propose { display: grid; gap: 6px; margin-top: 10px; max-width: 520px; }
.loc-compare { display: grid; gap: 10px; margin: 10px 0; }
.loc-compare > div { padding: 10px 12px; border-radius: var(--r-md); background: var(--line-2); display: grid; gap: 2px; }
.loc-compare s { color: var(--muted); }
.loc-proposal { border: 1.5px solid var(--pitch); }

.nav a { white-space: nowrap; }
@media (max-width: 1300px) { .nav a svg { display: none; } }

/* ---- Footer (v2): columns on desktop, accordion on phones --------------------------------- */
.site-footer { padding: 48px 0 28px; }
.ft-top { display: grid; gap: 28px; }
.ft-brand { display: grid; gap: 14px; align-content: start; }
.ft-tagline { margin: 0; color: var(--ink-2); line-height: 1.9; max-width: 46ch; }
.ft-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-cta .btn { gap: 6px; }
.ft-links { display: grid; }
.ft-group { border-bottom: 1px solid var(--line); }
.ft-group > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; font-weight: 700; color: var(--ink); }
.ft-group > summary::-webkit-details-marker { display: none; }
.ft-group > summary > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.ft-group > summary svg { color: var(--pitch); }
.ft-chev { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--line-2); transition: transform .2s; }
.ft-group[open] .ft-chev { transform: rotate(45deg); }
.ft-group ul { padding: 0 2px 14px !important; gap: 10px !important; }
.ft-group a { font-size: var(--fs-sm); }
.ft-trust { margin-top: 28px; padding: 18px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 14px; }
.ft-facts { list-style: none; margin: 0; padding: 0; display: grid !important; gap: 10px !important; font-size: var(--fs-sm); }
.ft-facts li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); min-width: 0; }
.ft-facts li span, .ft-facts li a { overflow-wrap: anywhere; }
.ft-facts svg { flex: none; color: var(--pitch); }
.ft-pay { display: grid; gap: 8px; }
.ft-pay .pay-methods { gap: 6px; }
.ft-pay .pay-methods span { background: var(--paper); padding: 5px 10px; border-radius: 8px; }
.ft-bottom { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; }
.ft-bottom-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: var(--fs-sm); }
.ft-bottom-links > a { display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 760px) {
  .ft-top { grid-template-columns: minmax(260px, 1.3fr) 2fr; gap: 48px; }
  .ft-links { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .ft-group { border-bottom: 0; }
  .ft-group > summary { cursor: default; padding: 0 0 12px; pointer-events: none; }
  .ft-chev { display: none; }
  .ft-trust { grid-template-columns: 1fr auto; align-items: center; }
  .ft-trust .trust-badge { grid-column: 1 / -1; }
  .ft-facts { display: flex !important; flex-wrap: wrap; gap: 8px 22px !important; }
  .ft-pay { justify-items: end; text-align: end; }
}
@media (max-width: 759px) {
  .ft-brand { text-align: center; justify-items: center; }
  .ft-cta { justify-content: center; }
  .ft-bottom { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .ft-bottom-links { justify-content: center; }
}
.site-footer .ft-cta .btn-primary, .site-footer .ft-cta .btn-primary:hover { color: #fff; text-decoration: none; }
.site-footer .ft-cta .btn-tonal, .site-footer .ft-cta .btn-tonal:hover { color: var(--pitch-dark); text-decoration: none; }