/* ------------------------------------------------------------------ base */
:root {
  /* Oxblood and warm cream. Two rules keep the palette honest: every light
     ground is a cream, and nothing on a dark ground is oxblood — oxblood is
     12:1 against the cream but only 2.6:1 against the dark, so the dark bands
     take the cream as their accent instead. */
  --ink: #1A1210;
  --ink-soft: #574B40;
  --muted: #6E6154;
  --line: #D9C8A6;
  --line-soft: #E6D8B9;
  --field-line: #8A7A5E;
  --disabled: #B3A287;
  --bg: #EADDC2;
  --surface: #F2E6CE;
  --brand: #4A101C;
  --brand-dark: #330A13;
  --brand-tint: #E4D4BE;
  --brand-tint-line: #D3BBA2;
  --accent: #2E0A12;
  --accent-dark: #1C0509;
  /* Type, rules and accents that sit on --accent or --ink. */
  --on-dark: #F2E6CE;
  --on-dark-soft: #BEA9A0;
  --on-dark-line: #8A6E6E;
  --ok: #17794a;
  --ok-bg: #E3EFE0;
  --warn: #8A5A0A;
  --warn-bg: #F6E9CE;
  --err: #A32B20;
  --err-bg: #F7E3DC;
  --err-line: #E3C0B6;
  /* The brand is hard-edged: 2px everywhere, and no soft drop shadows —
     depth comes from the 1px rules, not from blur. */
  --radius: 2px;
  --shadow: none;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 .5rem;
  letter-spacing: .01em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }
/* Inside cards and tables, headings stay sentence case for legibility. */
.table-wrap h3, .stat-label, .class-title { text-transform: none; }
p { margin: 0 0 1rem; }
a { color: var(--brand-dark); }
ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.wrap { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: .5rem; background: var(--surface); padding: .5rem 1rem; z-index: 20; }
.muted { color: var(--ink-soft); }
.small { font-size: .875rem; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

/* ---------------------------------------------------------------- header */
.site-header { background: var(--surface); color: var(--ink); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line); }
/* At 400% zoom the sticky header would occupy most of the viewport. */
@media (max-height: 480px) { .site-header { position: static; } }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; line-height: 1; }
/* The complete logo artwork as one image — boxers over the wordmark. */
.brand-lockup { height: 58px; width: auto; display: block; }
@media (max-width: 560px) { .brand-lockup { height: 48px; } }
.brand-mark { height: 30px; width: auto; display: block; }
.footer-logo { width: 190px; max-width: 100%; height: auto; display: block; margin-bottom: .75rem; }
.brand-word { font-family: var(--font-heading); font-weight: 700; font-size: 1.35rem; letter-spacing: .005em; text-transform: uppercase; display: block; }
.brand-sub { font-size: .62rem; letter-spacing: .42em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-top: .1rem; }
.site-nav { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.site-nav a { color: var(--ink); text-decoration: none; font-family: var(--font-heading); font-weight: 500; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; padding-block: .6rem; display: inline-flex; align-items: center; }
.site-nav a:hover, .site-nav a.is-active { color: var(--brand); }
.site-nav .btn { color: var(--on-dark); }
.inline-form { display: inline; }
.link-button { background: none; border: 0; color: var(--ink); font-family: var(--font-heading); font-weight: 500; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; padding: 0; }
.link-button:hover { color: var(--brand); }

/* --------------------------------------------------------------- new bits */
.btn-lg { padding: .9rem 1.6rem; font-size: 1.02rem; }
.hero-note { margin-top: 1rem; font-size: .9rem; color: var(--on-dark-soft); }
.hero-card .btn { margin-top: 1.25rem; }

.cta-band {
  background:
    linear-gradient(rgba(46, 10, 18, .84), rgba(46, 10, 18, .84)),
    url('/images/cta-training.jpg') center 30% / cover no-repeat var(--accent);
  color: var(--on-dark); padding: 3.5rem 0;
}
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cta-band h2 { color: var(--on-dark); margin-bottom: .25rem; }
.cta-band p { color: rgba(242,230,206,.88); margin: 0; }
.cta-band .btn { background: var(--on-dark); color: var(--accent); border-color: var(--on-dark); }
.cta-band .btn:hover { background: var(--brand-tint); border-color: var(--brand-tint); }

.page-head-split, .section-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.section-head-split { margin-bottom: 1.5rem; }

.schedule-day + .schedule-day { margin-top: 2rem; }
.schedule-day-heading { font-size: 1.05rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.schedule-day-heading .muted { font-size: .85rem; font-weight: 500; }
.class-row-main { display: flex; gap: 1rem; align-items: baseline; min-width: 0; }
.class-row-actions { display: flex; align-items: center; gap: .75rem; }
.class-title { font-weight: 600; }
.class-summary { margin-top: .15rem; max-width: 60ch; }
.badge-level { background: var(--line-soft); color: var(--ink-soft); border-color: var(--line); font-weight: 600; }
.hours-table th { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: .93rem; }
.hours-table td { text-align: right; color: var(--ink-soft); }
.social-row a { text-transform: capitalize; margin-right: .75rem; }

.about-point { border-left: 3px solid var(--brand); padding-left: 1.1rem; margin-bottom: 1.5rem; }
.about-point h3 { margin-bottom: .25rem; }
.about-point p { margin: 0; }
.section-head.center { max-width: 60ch; text-align: center; }

.schedule-pattern { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; margin-top: 1.25rem; }
.pattern-day { display: flex; flex-direction: column; gap: .5rem; }
.pattern-day-name { font-family: var(--font-heading); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-align: center; padding-bottom: .35rem; border-bottom: 1px solid var(--line); }
.pattern-slot { border: 1px solid var(--line); border-left: 3px solid var(--brand); padding: .6rem; }
.pattern-slot-time { font-family: var(--font-heading); font-weight: 600; font-size: .95rem; }
.pattern-slot-name { font-weight: 700; font-size: .82rem; line-height: 1.25; margin-top: .15rem; }
.pattern-slot-meta { font-size: .72rem; color: var(--ink-soft); margin-top: .1rem; }
.pattern-slot .btn-small { padding: .3rem .5rem; font-size: .7rem; }
.pattern-empty { text-align: center; padding: .75rem 0; margin: 0; }
@media (max-width: 900px) { .schedule-pattern { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .schedule-pattern { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- coach */
.coach-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
@media (max-width: 860px) { .coach-grid { grid-template-columns: 1fr; } }
.coach-photo { width: 100%; height: auto; display: block; }
.coach-photo-frame { background: var(--brand-tint); padding: 0 0 1rem 1rem; }
.coach-photo-frame img { margin: -1rem 1rem 0 -1rem; }
.coach-name { color: var(--brand); font-family: var(--font-heading); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; margin-bottom: .2rem; }
.coach-credentials { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1.25rem; }
.coach-quote { border-left: 3px solid var(--brand); padding-left: 1.1rem; font-style: italic; font-size: 1.1rem; margin: 0 0 1.5rem; }
.coach-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 1.5rem; }
.coach-stat-value { font-family: var(--font-heading); font-size: 2.2rem; color: var(--brand); line-height: 1; }
.coach-stat-label { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--accent); color: var(--on-dark-soft); margin-top: 0; padding: 3rem 0 1.5rem; }
.footer-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer strong { color: var(--on-dark); display: block; margin-bottom: .4rem; }
.site-footer .footer-heading { color: var(--on-dark); font-size: 1rem; letter-spacing: .04em; margin-bottom: .4rem; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer a { color: var(--on-dark-soft); text-decoration: none; }
.site-footer a:hover { color: var(--on-dark); }
.footer-note { border-top: 1px solid rgba(242,230,206,.16); margin-top: 1.5rem; padding-top: 1rem; font-size: .85rem; }
.site-footer p { margin: 0 0 .3rem; }

/* ---------------------------------------------------------------- blocks */
.hero { background: var(--surface); color: var(--ink); padding: clamp(3rem, 8vw, 5.5rem) 0; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
@media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .9rem;
  background: var(--brand-tint); font-family: var(--font-heading); font-weight: 600;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
  margin-bottom: 1.1rem;
}
.kicker-dot { width: 7px; height: 7px; background: var(--brand); flex: none; }
.hero p { color: var(--ink-soft); font-size: 1.08rem; max-width: 48ch; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.hero-note { margin-top: 1.1rem; font-size: .9rem; color: var(--ink-soft); }
.hero-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.hero-card h2 { font-size: 1.15rem; }
.hero-card ol { color: var(--ink-soft); padding-left: 1.1rem; margin: 0; }
.hero-card li { margin-bottom: .5rem; }

.section { padding: 3rem 0; }
.section-head { max-width: 60ch; margin-bottom: 2rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.card + .card { margin-top: 1.25rem; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Main content with a 320px side card; stacks to one column on phones. */
.layout-side { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@media (max-width: 860px) {
  .layout-side { grid-template-columns: minmax(0, 1fr); }
  /* When a slot is being edited on a phone, the edit form comes first —
     otherwise it hides below seven days of pattern. */
  .layout-side.is-editing > form.card { order: -1; }
}

/* ------------------------------------------------------------ plan cards */
.plan-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.plan-card h2 { font-size: 1.2rem; }
.plan-badge { position: absolute; top: 0; right: 0; background: var(--brand); color: var(--on-dark); font-family: var(--font-heading); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; padding: .3rem .6rem; }
.plan-tagline { color: var(--ink-soft); margin-bottom: .75rem; }
.plan-price { font-size: 2.1rem; font-weight: 700; margin: 0 0 1rem; }
.plan-price span { font-size: .95rem; font-weight: 500; color: var(--ink-soft); }
.plan-features { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.plan-features li { padding-left: 1.5rem; position: relative; margin-bottom: .5rem; }
/* Drawn, not the ✓ dingbat: that glyph renders as a box in some fonts and is
   announced as "check mark" by screen readers on every single line. */
.plan-features li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 15px; height: 15px;
  background: var(--brand);
  -webkit-mask: var(--tick) center / contain no-repeat;
  mask: var(--tick) center / contain no-repeat;
}

/* --------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; background: var(--brand); color: var(--on-dark); border: 1px solid var(--brand); border-radius: 2px; padding: .75rem 1.3rem; font-family: var(--font-heading); font-size: .95rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-small { min-height: 34px; padding: .35rem .8rem; font-size: .82rem; }
.btn-block { width: 100%; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--on-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--on-dark); }
.btn-danger { background: var(--surface); color: var(--err); border-color: var(--err-line); }
.btn-danger:hover { background: var(--err-bg); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ----------------------------------------------------------------- forms */
form .field { margin-bottom: 1.1rem; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=number], select, textarea {
  width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--field-line);
  border-radius: var(--radius); font: inherit; background: var(--surface); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid currentColor; outline-offset: 2px;
}
:target, #main { scroll-margin-top: 5rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
textarea { min-height: 90px; resize: vertical; }
.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field-error input, .field-error select, .field-error textarea { border-color: var(--err); }
.error-text { color: var(--err); font-size: .85rem; margin: .3rem 0 0; }
.hint { color: var(--ink-soft); font-size: .85rem; margin: .3rem 0 0; }
.checkbox { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.checkbox input { width: auto; margin-top: .25rem; }
fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
legend { font-size: 1.05rem; font-weight: 700; margin-bottom: .25rem; padding: 0; }
.legend-hint { color: var(--ink-soft); font-size: .9rem; margin-bottom: 1rem; }

/* ---------------------------------------------------------------- alerts */
.flash { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid; font-size: .95rem; }
.flash-success { background: var(--ok-bg); border-color: #bde3d0; color: var(--ok); }
.flash-error { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.flash-info { background: #eaf1fb; border-color: #c8dcf6; color: #1b4c8c; }
.alert { padding: 1rem; border-radius: var(--radius); border: 1px solid; margin-bottom: 1.25rem; }
.alert-error { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.alert-success { background: var(--ok-bg); border-color: #BBD9C2; color: var(--ok); }
.alert-warn { background: var(--warn-bg); border-color: #E2CDA2; color: var(--warn); }
.alert-info { background: #E7E7DC; border-color: #CFCFBE; color: #3C4A52; }
.alert p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- badges */
.badge {
  display: inline-block; font-family: var(--font-heading); font-weight: 500; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .1em; padding: .25rem .5rem;
  border-radius: var(--radius); border: 1px solid;
}
.badge-active { background: var(--ok-bg); color: var(--ok); border-color: #bde3d0; }
.badge-paused { background: var(--warn-bg); color: var(--warn); border-color: #f0dcb4; }
.badge-cancelled, .badge-expired { background: var(--line-soft); color: var(--ink-soft); border-color: var(--line); }
.badge-ending { background: var(--err-bg); color: var(--err); border-color: var(--err-line); }

/* --------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-family: var(--font-heading); font-weight: 500; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); padding-block: .75rem;
}
td { border-bottom-color: var(--line-soft); }
tbody tr:hover { background: var(--bg); }
td.numeric, th.numeric { text-align: right; }

/* ----------------------------------------------------------- dashboard */
.page-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 2rem 0 1.5rem; }
.page-head h1 { margin-bottom: .25rem; }
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.stat-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.stat-value { font-size: 1.85rem; font-weight: 700; line-height: 1.1; margin-top: .25rem; }
.stat-note { font-size: .85rem; color: var(--ink-soft); }
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.tabs a { padding: .6rem .9rem; text-decoration: none; color: var(--ink-soft); border-bottom: 2px solid transparent; font-weight: 600; font-size: .95rem; }
.tabs a.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: .6rem 0 .6rem 1.1rem; border-left: 2px solid var(--line); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 1rem; width: 8px; height: 8px; background: var(--brand); }
.timeline time { display: block; font-size: .8rem; color: var(--ink-soft); }

/* ------------------------------------------------------------- timetable */
.class-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.class-row:last-child { border-bottom: 0; }
.class-when { font-weight: 700; min-width: 8.5rem; }
.class-meta { color: var(--ink-soft); font-size: .9rem; }
.day-heading { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 1.5rem 0 .25rem; }

/* --------------------------------------------------------------- steps */
.steps { display: flex; gap: 1rem; list-style: none; padding: 0; margin: 0 0 2rem; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: .5rem; color: var(--ink-soft); font-size: .9rem; font-weight: 600; }
.steps .step-num { width: 26px; height: 26px; display: grid; place-items: center; background: var(--line-soft); color: var(--ink-soft); font-size: .8rem; }
.steps .is-current { color: var(--ink); }
.steps .is-current .step-num { background: var(--brand); color: var(--on-dark); }
.steps .is-done .step-num { background: var(--ok); color: var(--on-dark); }

/* ------------------------------------------------------------- checkout */
.checkout-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); align-items: start; }
@media (max-width: 860px) { .checkout-grid { grid-template-columns: 1fr; } }
.summary { position: sticky; top: 5rem; }
.summary-line { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; }
.summary-total { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .7rem; font-weight: 700; font-size: 1.1rem; }
.test-cards { font-size: .85rem; }
.test-cards code { background: var(--line-soft); padding: .1rem .3rem; }
.card-brand-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink-soft); }

.login-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .login-grid { grid-template-columns: 1fr; } }
.demo-list { list-style: none; padding: 0; margin: 0; }
.demo-list li { border-bottom: 1px solid var(--line); padding: .7rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.demo-list li:last-child { border-bottom: 0; }
.demo-list code { font-size: .85rem; }

/* ------------------------------------------------------------- week view */
/* The public schedule: seven day columns you scan in one look, cards per
   class. States are carried in words ("2 spots left", "Full") — the dot
   colour only reinforces them. */
.credit-bar { background: var(--accent); color: var(--on-dark); }
.credit-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; flex-wrap: wrap; }
.credit-bar-status { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.credit-bar-plan { font-family: var(--font-heading); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); }
.credit-pips { display: inline-flex; gap: 5px; }
.credit-pip { width: 15px; height: 15px; border: 1px solid var(--on-dark-line); display: block; }
.credit-pip.is-full { background: var(--on-dark); border-color: var(--on-dark); }
.credit-bar-count { font-size: .9rem; }
.credit-bar-expiry { font-size: .9rem; color: var(--on-dark-soft); }
.btn-outline-dark { background: transparent; color: var(--on-dark); border-color: var(--on-dark-line); }
.btn-outline-dark:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

.week-nav { display: flex; align-items: center; gap: .5rem; }
.week-arrow { width: 44px; height: 44px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.week-arrow:hover { border-color: var(--ink); }
.week-arrow.is-disabled { color: var(--disabled); pointer-events: none; }
.week-label { display: flex; flex-direction: column; align-items: center; min-width: 12rem; }
.week-range { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; }
.week-name { font-size: .8rem; color: var(--muted); }

.filter-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.filter-label { font-family: var(--font-heading); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: .25rem; }
.filter-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); font-size: .9rem; text-decoration: none; }
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip.is-active { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.filter-spacer { flex: 1; }

.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 1100px) { .week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) { .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .week-grid { grid-template-columns: 1fr; } }
.week-day { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.week-day-head { display: flex; align-items: baseline; justify-content: space-between; padding: .6rem .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.week-day-name { font-family: var(--font-heading); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.week-day-date { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; }
.week-day-empty { text-align: center; color: var(--ink-soft); font-size: .85rem; margin: .5rem 0 0; }

.slot-card { display: flex; flex-direction: column; gap: .45rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: var(--radius); padding: .85rem; }
.slot-card.is-beginner { border-left-color: var(--brand); }
.slot-card.is-past { background: var(--line-soft); border-color: var(--line); }
.slot-card.is-past .slot-time, .slot-card.is-past .slot-title,
.slot-card.is-past .slot-meta, .slot-card.is-past .slot-state { color: var(--muted); }
.slot-card.is-booked { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.slot-card.is-booked .slot-meta { color: var(--on-dark-soft); }
.slot-time { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; }
.slot-title { font-weight: 700; font-size: .88rem; line-height: 1.3; }
.slot-meta { font-size: .76rem; color: var(--muted); }
.slot-state { display: flex; align-items: center; gap: 6px; font-size: .76rem; }
.slot-state.is-open { color: var(--ok); }
.slot-state.is-low { color: var(--warn); }
.slot-state.is-full { color: var(--err); }
.slot-state.is-muted { color: var(--muted); }
.slot-card.is-booked .slot-state.is-open { color: #7FD6A6; }
.slot-card.is-booked .slot-state.is-low { color: #E8B657; }
.slot-card.is-booked .slot-state.is-full { color: #F58E8E; }
.slot-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.slot-card .btn { font-size: .8rem; letter-spacing: .06em; margin-top: .2rem; }
.btn-slot-cancel { background: transparent; color: var(--on-dark); border-color: var(--on-dark-line); }
.btn-slot-cancel:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

/* ------------------------------------------------------------ console */
/* The staff console leads with the floor: the class happening now and its
   roster, with everything else at the side. */
.console-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); align-items: start; }
@media (max-width: 960px) { .console-grid { grid-template-columns: 1fr; } }
.console-main > .card + .card, .console-side > .card + .card { margin-top: 1.25rem; }
.floor-card { border-left: 3px solid var(--brand); }
.floor-kicker { font-family: var(--font-heading); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin: 0 0 .5rem; }
.roster-list { margin: 1rem 0 .75rem; }
.roster-row { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
.roster-row:last-child { border-bottom: 0; }
.roster-avatar { width: 34px; height: 34px; flex: none; background: var(--accent); color: var(--on-dark); display: grid; place-items: center; font-family: var(--font-heading); font-size: .8rem; }
.roster-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.roster-who a { color: var(--ink); font-weight: 700; text-decoration: none; }
.roster-who a:hover { color: var(--brand); }
.roster-plan { font-size: .8rem; color: var(--muted); }
.attention-row { padding: .6rem 0; border-bottom: 1px solid var(--line-soft); }
.attention-row:last-child { border-bottom: 0; }
.attention-row p { margin: 0; }
.side-stats { margin-bottom: .75rem; }
.side-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line-soft); }
.side-stat:last-child { border-bottom: 0; }
.side-stat-value { font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; }

/* ------------------------------------------------------- account overview */
.next-class-row { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line-soft); }
.next-class-row:last-of-type { border-bottom: 0; }
.next-class-date { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--radius); padding: .35rem 0; }
.next-class-dow { font-family: var(--font-heading); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.next-class-day { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.next-class-month { font-size: .7rem; color: var(--muted); }
.next-class-what { flex: 1; min-width: 0; }
.next-class-title { font-weight: 700; margin: 0; }

.month-chart { display: flex; align-items: flex-end; gap: .75rem; height: 92px; margin-bottom: .75rem; }
.month-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .3rem; height: 100%; }
.month-chart-bar { width: 100%; max-width: 44px; background: var(--brand); min-height: 2px; }
.month-chart-label { font-family: var(--font-heading); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }


/* ----------------------------------------------------------- open gym */
/* Access hours, not a bookable class — tinted and buttonless so it never
   reads as something to claim. */
.open-gym-band {
  background: var(--brand-tint); border: 1px solid var(--brand-tint-line);
  border-left: 3px solid var(--brand); padding: .5rem .6rem; margin-bottom: .5rem;
}
.open-gym-band .og-label {
  font-family: var(--font-heading); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); font-weight: 600; display: block;
}
.open-gym-band .og-time { font-size: .8rem; font-weight: 700; margin-top: .1rem; display: block; }
.open-gym-band.is-closed { background: var(--line-soft); border-color: var(--line); border-left-color: var(--disabled); }
.open-gym-band.is-closed .og-label { color: var(--muted); }
.open-gym-band.is-closed .og-time { color: var(--ink-soft); font-weight: 500; }
.open-gym-note {
  margin-top: 1rem; padding: .85rem 1rem; background: var(--brand-tint);
  border-left: 3px solid var(--brand); font-size: .88rem;
}
/* The console's block editor, laid out like the class pattern beside it. */
.open-gym-slot {
  border: 1px solid var(--brand-tint-line); border-left: 3px solid var(--brand);
  background: var(--brand-tint); padding: .5rem;
}
.open-gym-slot-time { font-family: var(--font-heading); font-weight: 600; font-size: .82rem; line-height: 1.3; }
.open-gym-slot .btn-small { padding: .3rem .5rem; font-size: .7rem; margin-top: .4rem; }
.open-gym-add {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: .75rem; align-items: end;
  margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.open-gym-add .field { margin-bottom: 0; }
@media (max-width: 700px) { .open-gym-add { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------- home: testimonials */
.testimonial-strip {
  display: flex; gap: 1rem; overflow-x: auto; padding: .25rem .25rem 1rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.testimonial-strip.is-marquee { scroll-snap-type: none; scrollbar-width: none; }
.testimonial-strip.is-marquee::-webkit-scrollbar { display: none; }
.testimonial-card {
  flex: 0 0 min(340px, 82%); scroll-snap-align: start; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand);
  border-radius: var(--radius); padding: 1.4rem 1.4rem 1.2rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.testimonial-mark {
  font-family: var(--font-heading); font-size: 2.6rem; line-height: .6;
  color: var(--brand); margin-bottom: .55rem;
}
.testimonial-card blockquote {
  margin: 0 0 .9rem; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); flex: 1;
}
.testimonial-card figcaption { font-size: .85rem; }
.testimonial-hint { margin-top: .25rem; }
.testimonial-toggle {
  display: block; margin: .35rem auto 0; background: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: .35rem .9rem; font-size: .8rem; color: var(--ink-soft);
  cursor: pointer;
}
.testimonial-toggle:hover { border-color: var(--ink-soft); }

/* --------------------------------------------------- home: lead capture */
.lead-card {
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand);
  border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow);
}
.lead-card h2 { font-size: 1.3rem; margin-bottom: .35rem; }
.lead-card > .muted { margin-bottom: 1.1rem; }
.lead-card .field { margin-bottom: .85rem; }
.lead-fine-print { margin-top: .75rem; font-size: .8rem; color: var(--muted); text-align: center; }
/* The honeypot: off-screen rather than display:none, so naive bots still fill it. */
.lead-trap { position: absolute; left: -9999px; top: -9999px; }

/* -------------------------------------------------------- console: leads */
.lead-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lead-row .class-when { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lead-note-form { display: flex; gap: .5rem; margin-top: .85rem; }
.lead-note-form input[type="text"] { flex: 1; }
.btn-dark { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.btn-dark:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* --------------------------------------------------------- home: stat band */
.stat-band { background: var(--accent); }
.stat-band-inner { display: flex; justify-content: center; gap: clamp(2rem, 8vw, 6rem); padding: 1.6rem 0; flex-wrap: wrap; }
.stat-band-item { display: flex; align-items: baseline; gap: .6rem; }
.stat-band-value { font-family: var(--font-heading); font-weight: 700; font-size: 1.9rem; color: var(--on-dark); }
.stat-band-label { color: var(--on-dark-soft); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

.section-tint { background: var(--bg); }

/* ------------------------------------------------------- plan card: dark */
.plan-price { font-family: var(--font-heading); font-size: 2.7rem; }
.plan-card-featured { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.plan-card-featured .plan-features li::before { background: var(--on-dark); }
.plan-card-featured h3 { color: var(--on-dark); }
.plan-card-featured .plan-tagline { color: var(--on-dark-soft); }
.plan-card-featured .plan-price span { color: var(--on-dark-soft); }
.plan-card-featured .plan-features li { color: #E4E4E7; }

/* ------------------------------------------------------------- admin: filters */
.filter-card { display: flex; flex-direction: column; gap: .9rem; }
.filter-row { display: flex; gap: .9rem; align-items: flex-end; flex-wrap: wrap; }
.chip-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: .85rem; color: var(--ink); text-decoration: none; }
.chip:hover { border-color: var(--ink); }
.chip-on, .chip-on:hover { background: var(--accent); color: var(--on-dark); border-color: var(--accent); }

/* ---------------------------------------------------------- admin: analytics */
.stat-spark { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.viz-title { font-size: .95rem; margin-bottom: .1rem; }
.viz-sub { font-size: .82rem; color: var(--muted); margin: 0 0 .9rem; }
.viz-legend { display: flex; gap: 1rem; margin-top: .6rem; font-size: .85rem; }
.viz-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.busy-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.busy-row:last-child { border-bottom: 0; }

/* ------------------------------------------------------- admin: class detail */
.class-detail-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
@media (max-width: 980px) { .class-detail-grid { grid-template-columns: 1fr; } }
.card-danger { border-color: var(--err-line); }
.viz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .viz-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------- home: feature rows */
.feature-rows { display: flex; flex-direction: column; gap: 3.5rem; margin-top: 3rem; }
.feature-row { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
/* Staggered: every second row swaps sides. */
.feature-row:nth-child(even) .feature-media { order: 2; }
.feature-media img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.feature-num { font-family: var(--font-heading); font-weight: 700; font-size: .9rem; color: var(--brand); letter-spacing: .1em; }
.feature-text h3 { font-size: 1.5rem; margin: .3rem 0 .6rem; }
.feature-text p { max-width: 52ch; }
.feature-text .programme-link { display: inline-block; margin-top: .25rem; }
@media (max-width: 780px) {
  .feature-row { grid-template-columns: 1fr; }
  .feature-row:nth-child(even) .feature-media { order: 0; }
}

/* -------------------------------------------------------------- page banner */
.page-banner img { display: block; width: 100%; height: clamp(160px, 24vw, 280px); object-fit: cover; object-position: center 45%; }

/* Plan cards sit three across, so a six-plan ladder makes two tidy rows. */
.plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plan-grid { grid-template-columns: 1fr; } }
.go-live-checks { list-style: none; padding: 0; margin: 0; }
.go-live-checks li { padding: .7rem 0 .7rem 1.6rem; position: relative; border-bottom: 1px solid var(--line-soft); }
.go-live-checks li:last-child { border-bottom: 0; }
.go-live-checks li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 10px; height: 10px; }
.go-live-checks .is-ok::before { background: var(--ok); }
.go-live-checks .is-warn::before { background: var(--warn); }
.go-live-checks .is-blocked::before { background: var(--err); }

/* ------------------------------------------------------------ help centre */
.help-toc { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: 0 0 1.25rem; font-size: .92rem; }
.help-toc a { color: var(--brand-dark); text-decoration: none; font-weight: 600; }
.help-toc a:hover { text-decoration: underline; }
.help-section { margin-bottom: 1rem; scroll-margin-top: 1rem; }
.help-section h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.help-section details { border-top: 1px solid var(--line); }
.help-section details:last-child { border-bottom: 1px solid var(--line); }
.help-section summary { cursor: pointer; padding: .7rem .2rem; font-weight: 600; list-style-position: inside; }
.help-section summary:hover { color: var(--brand); }
.help-section details p { padding: 0 .2rem .9rem; margin: 0; color: var(--muted, #52525B); line-height: 1.6; }


/* ------------------------------------------------------------ legal pages */
.legal h2 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; text-transform: none; }
.legal h3, .legal h4 { font-size: .95rem; margin: 1.25rem 0 .4rem; text-transform: none; }
.legal p, .legal li { line-height: 1.65; color: var(--ink-soft); }
.legal ul { padding-left: 1.25rem; margin: .5rem 0 1rem; }
.legal li { margin-bottom: .35rem; }
.legal-warning { border: 2px solid var(--brand); background: var(--brand-tint); padding: 1rem 1.25rem; margin: 1.25rem 0; }
.legal-warning p { margin: 0 0 .6rem; }
.legal-warning p:last-child { margin-bottom: 0; }
.footer-legal a { color: var(--on-dark-soft); }
.signup-legal-viewer { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); padding: 1rem 1.25rem; background: var(--surface); margin-bottom: 1rem; }

/* -------------------------------------------------------------------- faq */
/* A description list, not an accordion: the answers are the reason the page
   exists, so they are on the page rather than a click away — for the reader,
   and because collapsed text is weaker material for a search result. */
.faq { margin: 0; }
.faq-item { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.faq-item:first-child { padding-top: 0; }
.faq dt { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .01em; margin-bottom: .5rem; }
.faq dd { margin: 0; color: var(--ink-soft); max-width: 68ch; }
.faq-cta { margin-top: 2.5rem; padding: 1.75rem; background: var(--surface); border: 1px solid var(--line); }
.faq-cta h2 { font-size: 1.3rem; }
.faq-cta .btn-row { margin-top: 1.25rem; }
/* Waiting for a spot: told apart from both "full" and "you're booked". */
.slot-state.is-waiting { color: var(--warn); }
.slot-card.is-booked .slot-state.is-waiting { color: #E8B657; }
.waitlist-note { font-size: .85rem; color: var(--ink-soft); margin: .35rem 0 0; }

/* ------------------------------------------------------------------ tasks */
/* A list you scan, not a project tool: one line each, the tick box first. */
.task-group-head { font-size: 1.05rem; margin-bottom: .75rem; }
.task-group-head.is-overdue { color: var(--err); }
.task-list { list-style: none; padding: 0; margin: 0; }
.task { display: flex; align-items: flex-start; gap: .85rem; padding: .85rem 0; border-top: 1px solid var(--line-soft); }
.task:first-child { border-top: 0; padding-top: 0; }
.task-tick { flex: none; }
.task-check { width: 22px; height: 22px; margin-top: .15rem; border: 2px solid var(--field-line); background: transparent; border-radius: 2px; cursor: pointer; display: block; }
.task-check:hover { border-color: var(--brand); background: var(--brand-tint); }
.task-body { flex: 1; min-width: 0; }
.task-title { font-weight: 600; }
.task-meta { font-size: .85rem; color: var(--ink-soft); margin-top: .15rem; }
.task-late { color: var(--err); font-weight: 600; }
.task-notes { font-size: .88rem; color: var(--ink-soft); margin: .4rem 0 0; max-width: 60ch; }
.task-drop { font-size: .78rem; color: var(--muted); flex: none; }
.task.is-done .task-title { text-decoration: line-through; color: var(--muted); }
.task-list-done { margin-top: .75rem; }
.task-quick { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.task-quick input[type=text] { flex: 1 1 16rem; min-width: 0; }
.task-quick select, .task-quick input[type=date] { flex: 0 0 auto; width: auto; }
@media (max-width: 560px) { .task-quick > * { flex: 1 1 100%; } }