/* Mat (Page Lemon app template): Saffi Lund Yoga. A calm full-bleed wash in sand, peach and dusk lilac, arched
   windows that take the light of the class time, and almost no chrome. The member pages use the shared app kit
   (kit.css); this file sets the brand tokens, the public page and the studio pieces. Colours: the tokens in the
   "art direction 2026-10-25" layer at the end. */
:root {
  --k-brand: #a4502f; --k-brand-ink: #ffffff; --k-brand-soft: #f6e4d9;
  --k-hero: #3b2a24; --k-hero-ink: #f7efe3; --k-gold: #e9b872;
  --k-bg: #f6f1ea; --k-surface-2: #efe7dc;
  --r-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root { --k-brand: #e08a5f; --k-brand-ink: #24160f; --k-brand-soft: rgba(224, 138, 95, .16); --k-hero: #3a2a23; --k-bg: #15110f; --k-surface: #201a17; --k-surface-2: #2b2420; }
}
/* Member pages (2026-10-22 redesign): a studio timetable on linen. Serif display, arched windows (the art in the
   chapel), mats as pills, a sage accent beside terracotta; the public page keeps the tokens above. */
body.k-app:not(.pub) { --k-bg: #e9ebe2; --k-surface: #fbfbf6; --k-surface-2: #dde1d4; --k-line: rgba(44, 58, 46, .13); --k-line-strong: rgba(44, 58, 46, .28); --k-text: #1f2a22; --k-muted: #57635a; --k-faint: #5d695f; --k-hero: #2e3d33; --k-hero-ink: #eef0e6; --k-brand-soft: #f1ddd0; --m-sage: #4f6a4d; --m-sage-soft: #dbe5d0; }
@media (prefers-color-scheme: dark) {
  body.k-app:not(.pub) { --k-bg: #101510; --k-surface: #19201a; --k-surface-2: #232c25; --k-line: rgba(225, 240, 222, .1); --k-line-strong: rgba(225, 240, 222, .24); --k-text: #eef0e6; --k-muted: #aeb8ac; --k-faint: #a0ab9e; --k-hero: #1d2a21; --k-brand-soft: rgba(224, 138, 95, .16); --m-sage: #a3bb96; --m-sage-soft: rgba(163, 187, 150, .14); }
}
.k-app h1, .k-app h2, .k-welcome h1, .k-hero-card .k-big { font-family: var(--r-display); font-weight: 600; letter-spacing: -.01em; }
.k-head h1 { font-weight: 600; }

/* ---------- member pages: gym pieces ---------- */
.r-plan-tag { display: inline-flex; align-items: center; gap: 6px; }
.k-hero-card .k-dots li.k-free::before { content: "Free"; font-size: .5625rem; }
.k-dots-light li.k-free::before { content: "Free"; font-size: .5625rem; }
.r-reply { display: block; margin-top: var(--k-3); padding: 10px 12px; border-radius: 12px; background: var(--k-surface-2); color: var(--k-text); font-size: var(--k-t-foot); font-style: normal; quotes: none; line-height: 1.4; }
.r-reply:empty { display: none; }
.r-reply::before { content: "From Saffi · "; font-weight: 700; color: var(--k-muted); }
.r-booking { padding: var(--k-4) var(--k-4) var(--k-4); }
.r-booking + .r-booking { border-top: 1px solid var(--k-line); }
.r-booking-top { display: flex; gap: 14px; align-items: center; }
.r-booking .k-steps { margin-top: var(--k-3); }
.r-booking[data-k-state="off"] .k-steps, .r-booking[data-k-state="active"] .k-steps { display: none; }
.r-past .k-row-title { font-size: .9375rem; }
.r-info { display: flex; gap: 12px; align-items: flex-start; font-size: var(--k-t-foot); color: var(--k-muted); line-height: 1.45; }
.r-info .k-i { color: var(--k-brand); width: 20px; height: 20px; margin-top: 1px; }
.r-info b { color: var(--k-text); }
.r-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-3); }

/* Timetable (app/book.html, index.html): one section per day, today first (site.js). */
.r-days { display: grid; gap: var(--k-5); grid-template-columns: minmax(0, 1fr); }
.r-day h3 { display: flex; align-items: baseline; gap: 8px; font-size: 1.0625rem; margin: 0 0 var(--k-2) var(--k-1); }
.r-day h3 span { color: var(--k-muted); font-weight: 500; font-size: var(--k-t-sub); }
.r-day[data-today] h3 { color: var(--k-brand); }
.r-time { width: 48px; flex: none; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--k-t-sub); }
.r-day .k-row + .k-row::before { left: 124px; }
.r-day .k-row[aria-current="true"] { background: var(--k-brand-soft); }
.r-day .k-row[data-past] { opacity: .72; }
.r-sum-art { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; flex: none; }
.r-sum-main { min-width: 0; }
.r-sum-main b { display: block; font-size: 1.125rem; }
.r-sum-main span { display: block; color: var(--k-muted); font-size: var(--k-t-foot); }

/* ---------- public page ---------- */
.pub .k-main { padding-bottom: 48px; }
.pub-top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--k-bg) 88%, transparent); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); }
.pub-top-in { max-width: var(--k-max); margin: 0 auto; display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 8px 16px; }
.pub-top nav { display: none; gap: 22px; margin-left: auto; font-size: var(--k-t-sub); font-weight: 600; }
.pub-top nav a { text-decoration: none; color: var(--k-muted); }
.pub-top nav a:hover { color: var(--k-text); }
.pub-top .k-btn { margin-left: auto; }
@media (min-width: 900px) { .pub-top nav { display: flex; } .pub-top nav + .k-btn { margin-left: 8px; } }
.pub-wrap { max-width: var(--k-max); margin: 0 auto; padding: 0 16px; }
.pub-hero { display: grid; gap: var(--k-5); padding: var(--k-4) 0 var(--k-6); }
.pub-hero h1 { font-family: var(--r-display); font-size: clamp(2.5rem, 1.6rem + 4.5vw, 4.6rem); font-weight: 800; letter-spacing: -.01em; line-height: .98; }
.pub-hero h1 em { font-style: italic; color: var(--k-brand); }
.pub-hero .k-lead { color: var(--k-muted); font-size: 1.125rem; margin-top: var(--k-4); max-width: 46ch; }
.pub-hero .k-btn-row { margin-top: var(--k-5); }
.pub-hero-art { position: relative; border-radius: var(--k-r-xl); overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--k-hero); box-shadow: var(--k-shadow-2); }
.pub-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.pub-hero-art figcaption { position: absolute; left: 16px; bottom: 16px; right: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.pub-hero-art figcaption span { background: rgba(17, 18, 20, .78); color: #fff; border-radius: 999px; padding: 6px 12px; font-size: var(--k-t-foot); font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (min-width: 1024px) { .pub-hero { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; padding: var(--k-6) 0 var(--k-7); } .pub-hero-art { aspect-ratio: 4 / 4.2; } }
.pub-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-3); margin-top: var(--k-5); }
.pub-facts div { border-left: 3px solid var(--k-brand); padding-left: 10px; }
.pub-facts b { display: block; font-family: var(--r-display); font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.pub-facts span { color: var(--k-muted); font-size: var(--k-t-foot); }
.pub-sec { padding: var(--k-6) 0; }
.pub-sec .k-section-head { margin-bottom: var(--k-5); display: block; }
.pub-sec h2 { font-family: var(--r-display); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); font-weight: 600; letter-spacing: -.01em; }
.pub-sec .k-section-head p { margin-top: 6px; max-width: 60ch; }
.pub-steps { display: grid; gap: var(--k-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pub-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pub-step { display: grid; gap: var(--k-3); align-content: start; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.pub-step .k-tile { width: 48px; height: 48px; border-radius: 14px; }
.pub-step h3 { font-size: 1.1875rem; }
.pub-step p { color: var(--k-muted); font-size: var(--k-t-sub); }
.pub-phone { grid-template-columns: minmax(0, 1fr); margin-top: var(--k-2); border-radius: 22px; background: var(--k-bg); padding: 12px; display: grid; gap: 8px; box-shadow: inset 0 0 0 1px var(--k-line); }
.pub-phone .k-row { min-height: 52px; padding: 10px 12px; border-radius: 14px; background: var(--k-surface); }
.pub-phone .k-row + .k-row::before { display: none; }
.pub-mini-card { border-radius: 16px; padding: 14px; background: var(--k-hero); color: var(--k-hero-ink); }
.pub-mini-card .k-dots { margin-top: 10px; gap: 5px; }
.pub-mini-card p { font-size: var(--k-t-foot); opacity: .8; }
.pub-mini-card b { font-size: 1.5rem; font-weight: 800; }
.pub-tt .r-days { gap: var(--k-4); }
@media (min-width: 720px) { .pub-tt .r-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pub-tt .r-days { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pub-tt .r-day .k-row + .k-row::before { left: 16px; }
.pub-coaches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-3); }
@media (min-width: 900px) { .pub-coaches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pub-coach { display: grid; gap: 6px; }
.pub-coach .k-avatar { width: 52px; height: 52px; font-size: 1.125rem; background: var(--k-brand-soft); color: var(--k-brand); }
.pub-coach b { font-size: 1rem; }
.pub-coach span { color: var(--k-muted); font-size: var(--k-t-foot); line-height: 1.35; }
.pub-visit { display: grid; gap: var(--k-4); }
@media (min-width: 900px) { .pub-visit { grid-template-columns: 1fr 1fr; } }
.pub-hours { width: 100%; border-collapse: collapse; font-size: var(--k-t-sub); }
.pub-hours th { text-align: left; font-weight: 500; color: var(--k-muted); padding: 8px 0; }
.pub-hours td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; padding: 8px 0; }
.pub-hours tr + tr th, .pub-hours tr + tr td { border-top: 1px solid var(--k-line); }
.pub-cta { margin: var(--k-6) 0 0; padding: var(--k-6) var(--k-5); border-radius: var(--k-r-xl); background: var(--k-hero); color: var(--k-hero-ink); text-align: center; display: grid; gap: var(--k-3); justify-items: center; }
.pub-cta h2 { font-family: var(--r-display); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.pub-cta p { opacity: .8; max-width: 44ch; }
.pub-foot { max-width: var(--k-max); margin: 0 auto; padding: var(--k-5) 16px var(--k-6); color: var(--k-muted); font-size: var(--k-t-foot); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pub-foot a { color: var(--k-muted); }

/* Privacy notice */
.legal { max-width: 720px; margin: 0 auto; padding: var(--k-4) 16px var(--k-7); }
.legal h1 { font-size: var(--k-t-1); font-weight: 800; margin: var(--k-4) 0; }
.legal h2 { font-size: var(--k-t-3); margin: var(--k-6) 0 var(--k-2); }
.legal p, .legal li { color: var(--k-text); font-size: var(--k-t-sub); line-height: 1.6; }
.legal p + p { margin-top: var(--k-3); }
.legal .blank { background: var(--k-brand-soft); color: var(--k-text); padding: 0 4px; border-radius: 4px; }

/* Signed-out gate on inner screens, profile card, perks on the dark card (candidates for the kit). */
.k-gate { max-width: 520px; margin: var(--k-6) auto 0; display: grid; justify-items: center; gap: var(--k-3); }
.k-gate h1 { font-size: var(--k-t-2); font-weight: 800; color: var(--k-text); }
.k-gate .k-empty-art { margin-bottom: 0; }
.k-gate .k-btn { margin-top: var(--k-2); }
.k-list > p.k-empty { padding: var(--k-5); font-size: var(--k-t-sub); }
.r-profile { display: flex; align-items: center; gap: var(--k-4); }
.r-profile b { display: block; font-size: 1.25rem; letter-spacing: -.01em; margin-bottom: 6px; }
.r-hero-perks { margin-top: var(--k-4); }
.r-hero-perks li { font-size: var(--k-t-sub); align-items: flex-start; }
.r-hero-perks .k-i { color: var(--k-gold); width: 20px; height: 20px; }
.k-hero-card h2.k-big { font-size: 2.75rem; }
.r-past .k-row .k-btn { flex: none; }
@media (max-width: 1023px) { .k-split > * + * { margin-top: var(--k-5); } }
.k-card .k-stack-s p { color: var(--k-muted); font-size: var(--k-t-sub); }
.r-past .k-row-end { flex-direction: row; align-items: center; gap: 4px; }
.r-past .k-row-end .k-btn { padding: 0 8px; min-height: 44px; }
.r-mini { margin-top: 6px; height: 22px; font-size: .6875rem; }
.r-acct { margin-top: var(--k-5); }
@media (max-width: 1023px) { .r-acct > aside { order: -1; } }
@media (min-width: 1024px) { .k-split .k-actions .k-action { flex-direction: column; justify-content: center; text-align: center; padding: 16px 8px; } }

/* Studio pieces */
@media (min-width: 900px) { .m-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.k-split .m-plans { grid-template-columns: 1fr; }
@media (min-width: 720px) { .k-split .m-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .k-split .m-plans { grid-template-columns: 1fr; } }
.m-teacher { display: flex; gap: var(--k-5); align-items: center; }
.m-teacher .k-avatar { background: var(--k-brand-soft); color: var(--k-brand); flex: none; }
.m-note { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--k-4); }
.m-pass .k-big a, .m-pass .k-note a { color: var(--k-gold); }
.m-dots { gap: 10px; }
.m-dots li { aspect-ratio: auto; height: 12px; border-radius: 6px; }
.m-dots li.on::before { display: none; }
.k-aside .r-days { gap: var(--k-3); }
.k-aside .r-day h3 { font-family: var(--k-font); font-size: var(--k-t-sub); }
.m-months .k-row { padding: 12px 0; min-height: 0; }
.m-months .k-row + .k-row::before { left: 0; }
.r-acct > * { min-width: 0; }
.r-profile > div { min-width: 0; }
.r-plan-tag { flex-wrap: wrap; }
.pub-foot a, .pub-foot span { display: inline-block; padding: 10px 0; }
.r-note:empty, .r-note-inline:empty { display: none; }
.r-note { margin-top: var(--k-3); font-size: var(--k-t-foot); color: var(--k-muted); }
.r-note::before { content: "Your note: "; font-weight: 700; }

/* Timeline: the Waitlist step shows only while waitlisted; steps fill solid. Cancel action. */
.r-booking:not([data-k-state="active"]) .k-steps li[data-k-step="Waitlist"] { display: none; }
.r-booking:not([data-k-state="active"]) .k-steps { --k-steps: 3; }
.r-booking[data-k-state="active"] .k-steps { display: grid; }
.r-booking .k-steps li.k-now::before { background: var(--k-brand); animation: none; }
.r-booking .k-steps li.k-now { color: var(--k-text); font-weight: 700; }
.r-row-actions { display: flex; justify-content: flex-end; margin-top: var(--k-3); }
.r-booking[data-k-state="off"] .r-row-actions, .r-booking[data-k-state="done"] .r-row-actions { display: none; }
.r-slot-help { margin-top: calc(-1 * var(--k-2)); }
.r-slot-help a { color: var(--k-brand); font-weight: 600; }
.r-wrap { white-space: normal; }
.r-reply-inline { display: inline; margin: 0; padding: 0; background: none; }
.r-reply-inline::before { content: "Saffi: "; }
.r-chip { margin-left: auto; flex: none; }
.pub-tt .k-row-title { white-space: normal; }
.m-limit { margin-bottom: var(--k-5); }
.m-limit p { color: var(--k-text); font-size: var(--k-t-sub); }
@media (min-width: 1024px) { body.k-app.pub { display: block; } }
.k-top:has(a.k-signin) .k-avatar { display: none; }
.r-day .k-row-title, .k-list .k-row-title { white-space: normal; }
.r-weeks { margin-bottom: var(--k-4); }
.r-weeks .k-chip { min-height: 44px; }
.r-reply-inline { display: block; margin-top: 2px; }
.r-day .k-row-sub { white-space: normal; }
.r-day .r-chip { display: inline-flex; margin: 4px 0 0; height: 22px; font-size: .6875rem; }
.r-booking .k-row-sub, .r-booking .k-row-title { white-space: normal; }
.pub-foot { align-items: baseline; }

/* ---------- Mat member pages ---------- */
body.k-app:not(.pub) .k-kicker { font-family: var(--k-font-display); font-style: italic; font-size: 1.0625rem; font-weight: 400; color: var(--k-brand); letter-spacing: 0; }
body.k-app:not(.pub) .k-pagehead h1 { font-weight: 500; letter-spacing: -.02em; }
body.k-app:not(.pub) .k-section-head h2 { font-weight: 500; font-size: 1.5rem; letter-spacing: -.01em; }
body.k-app:not(.pub) .k-tile-img { width: 40px; height: 48px; border-radius: 999px 999px 7px 7px; }
.k-app:not(.pub) .k-badge { letter-spacing: .01em; }

/* The arched window: the class picture in a chapel arch. */
.m-arch { width: 92px; height: 116px; flex: none; object-fit: cover; border-radius: 999px 999px 14px 14px; background: var(--k-surface-2); box-shadow: 0 0 0 3px var(--k-surface), 0 0 0 4.5px var(--k-line-strong); margin: 4px 4.5px 4.5px; }
.m-mini-arch { width: 28px; height: 35px; flex: none; object-fit: cover; border-radius: 999px 999px 5px 5px; }

/* A class: arch window, the time as the headline, the room details and the booking's progress. */
.m-class { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 20px; background: var(--k-surface); border-radius: var(--k-r-xl); box-shadow: var(--k-shadow-1); }
.m-class-main { display: contents; }
.m-class .m-arch { grid-row: 1 / span 3; }
.m-class > * { min-width: 0; }
.m-class-main > * { grid-column: 1 / -1; min-width: 0; }
.m-class-main > :is(.m-class-top, .m-class-name, .m-class-sub) { grid-column: 2; }
.m-class-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.m-when { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.m-when span { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--k-muted); }
.m-when b { font-family: var(--k-font-display); font-size: 2.5rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--k-brand); font-variant-numeric: tabular-nums; }
.m-class-name { font-size: 1.375rem; font-weight: 500; line-height: 1.15; margin-top: 10px; }
.m-class-sub { margin: 4px 0 0; color: var(--k-muted); font-size: var(--k-t-sub); }
.m-class .r-note { margin-top: var(--k-4); }
.m-class .r-reply { background: var(--m-sage-soft); border-radius: 4px 14px 14px 4px; border-left: 3px solid var(--m-sage); }
.m-class .k-steps { margin-top: var(--k-4); }
.m-class .r-row-actions { justify-content: flex-start; }
.m-class[data-k-state="off"] { opacity: .8; }
.m-cards { display: grid; gap: var(--k-4); }
.m-cards > .k-empty, .m-home > section > [data-pl-view="cards"] > .k-empty { background: var(--k-surface); border-radius: var(--k-r-xl); }
@media (max-width: 420px) { .m-arch { width: 76px; height: 96px; } .m-class { column-gap: 14px; padding: 16px; } .m-when b { font-size: 2.125rem; } }

/* The pass: a window of its own. Sessions used are mat pills (a real quantity of the month). */
.m-pass { --k-gold: var(--k-brand); text-align: center; border-radius: 50% 50% var(--k-r-xl) var(--k-r-xl) / 120px 120px var(--k-r-xl) var(--k-r-xl); padding: 52px var(--k-5) var(--k-5); }
.m-pass .k-hero-top { justify-content: center; gap: 10px; font-family: var(--k-font-display); font-style: italic; font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 400; }
.m-pass .k-hero-top > .k-i { display: none; }
.m-pass .k-big { font-size: 4.25rem; font-weight: 500; margin-top: var(--k-3); }
.m-pass .k-big small { display: block; margin: 8px 0 0; font-size: 1rem; font-family: var(--k-font); font-weight: 500; color: var(--k-muted); opacity: 1; }
.m-pass .k-note { color: var(--k-muted); opacity: 1; }
.m-pass .k-note b { color: var(--k-text); }
.m-pass .k-note a { color: var(--k-brand); font-weight: 600; }
.m-dots { gap: 10px; margin-top: var(--k-4); }
.m-dots li { aspect-ratio: auto; height: 14px; border-radius: 7px; }
.m-dots li.on { background: var(--k-brand); border-color: var(--k-brand); }
.m-pass-big { padding-top: 64px; padding-bottom: var(--k-6); }
.m-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; margin: var(--k-3) 0 0; }
.m-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--k-brand); font-weight: 600; font-size: var(--k-t-sub); }

/* The week: a wall timetable, one column per day from 1024 px, a list on phones. */
.m-week .r-days { gap: var(--k-3); }
@media (min-width: 1024px) {
  .m-week .r-days { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 16px; align-items: stretch; }
  .m-week .r-day { background: var(--k-surface); border-radius: var(--k-r-l); box-shadow: var(--k-shadow-1); padding: 16px 16px 8px; }
  .m-week .r-day .k-list { background: none; box-shadow: none; border-radius: 0; }
  .m-week .r-day h3 { flex-direction: column; gap: 0; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--k-line); font-size: 1.25rem; }
  .m-week .r-day h3 span { font-family: var(--k-font); font-size: var(--k-t-foot); }
  .m-week .k-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 0; min-height: 0; }
  .m-week .k-row::before { display: none; }
  .m-week .k-row .k-chev { display: none; }
  .m-week .r-time { width: auto; order: -1; font-family: var(--k-font-display); font-size: 1.75rem; font-weight: 500; color: var(--k-brand); }
  .m-week .k-row .k-tile-img { width: 56px; height: 70px; border-radius: 999px 999px 9px 9px; order: 0; }
}
.r-day h3 { font-weight: 500; }
.r-day .k-row[aria-current="true"] { background: var(--k-brand-soft); }
.r-day[data-today] h3 { color: var(--k-brand); }
.r-day .k-row-main .k-row-sub { white-space: normal; }
@media (min-width: 1100px) { .m-book-days .r-days { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.m-book-days .r-day .k-row + .k-row::before { left: 124px; }

/* Records as a table from 1024 px. */
.m-table { --k-cols: minmax(0, 2fr) minmax(0, 1.4fr) 7.5rem 6.5rem; }
.m-table .k-td-main { display: flex; align-items: center; gap: 12px; }
.m-table .k-td-main small:empty { display: none; }
.m-table small [data-pl-field="message"]:not(:empty)::before { content: " · "; }
.m-table .k-td .k-badge { font-size: .75rem; }
.m-table .k-td-end .k-btn { padding: 0 10px; min-height: 44px; }
.m-table [data-pl-view="cards"] > .k-tr + .k-tr { border-top: 1px solid var(--k-line); }
.m-limit { padding: 14px 18px; border-radius: var(--k-r-l); background: var(--k-brand-soft); box-shadow: none; }
.m-limit p { margin: 0; }
.m-limit [hidden] { display: none; }
.k-card > h2 + .r-rules { margin-top: var(--k-3); }
img.k-tile-img { object-fit: cover; object-position: 50% 30%; }

/* Round 2: hairline surfaces, a ruled arch on the pass, phone actions, today highlighted. */
.m-class, .k-app:not(.pub) :is(.k-card, .k-panel, .k-plan, .k-sheet) { box-shadow: 0 0 0 1px var(--k-line-strong); }
.m-pass { box-shadow: none !important; border: 1.5px solid var(--k-brand); border-radius: 50% 50% var(--k-r-xl) var(--k-r-xl) / 90px 90px var(--k-r-xl) var(--k-r-xl); padding-top: 44px; }
.m-pass-big { padding-top: 56px; }
.m-pass .k-scan [data-pl-scan-show], .m-pass .k-scan [data-pl-scan-demo] { background: var(--k-hero-ink); color: var(--k-surface); }
.m-class .k-steps li { color: var(--k-muted); }
.m-class .k-steps li.k-now { color: var(--k-text); }
.m-cards .m-arch { width: 72px; height: 90px; }
@media (min-width: 1024px) { .m-week .r-day { box-shadow: 0 0 0 1px var(--k-line-strong); } .m-week .r-day[data-today] { background: var(--k-brand-soft); } }
.k-account h3 { text-transform: none; letter-spacing: 0; font-size: 1.0625rem; color: var(--k-text); font-weight: 500; }
.m-line { margin: 0; color: var(--k-muted); font-size: var(--k-t-foot); }
@media (max-width: 1023px) {
  .k-pagehead-actions { width: 100%; }
  .k-pagehead-actions .k-btn { flex: 1 1 0; }
}
@media (max-width: 420px) { .m-class-top { flex-direction: column; gap: 8px; } }
.k-account form:not(:has(input[type="checkbox"])) button { justify-self: start; }
.m-cards .m-class { padding: 16px 18px; }
.m-cards .m-when b { font-size: 2rem; }
.m-metrics { margin-top: var(--k-5); padding: var(--k-4) var(--k-5); border-radius: var(--k-r-l); box-shadow: 0 0 0 1px var(--k-line-strong); background: var(--k-surface); }
.m-metrics b { color: var(--k-brand); font-weight: 500; }
.m-metrics b, .m-metrics b > * { font: inherit; color: inherit; display: inline; }
.m-metrics b { display: block; font-size: 1.75rem; font-family: var(--k-font-display); color: var(--k-brand); }
.m-metrics > * { min-width: 0; flex-basis: 0; padding: 0 12px; }
.m-metrics > :first-child { padding-left: 0; }
.k-account form:not(:has(input[type="checkbox"])) button { width: fit-content; min-width: 9rem; }
.m-table .k-td:nth-child(2) { white-space: nowrap; }
@media (max-width: 1023px) { .m-table .k-td:nth-child(2) { white-space: normal; } }
.m-line { margin-top: var(--k-4); }

/* art direction 2026-10-25 */
/* Tokens. Light first; dark is designed from the same names (not an inversion). Later rules win over the older
   token blocks above, so these lines are the ones in force. Pairs checked at 4.5:1 or better (3:1 for 24px+ display). */
:root, body.k-app, body.k-app:not(.pub) {
  --k-font-display: "Gilda Display", Georgia, "Times New Roman", serif;
  --k-font: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-display: var(--k-font-display);
  --k-bg: #EAD9C2; --k-surface: rgba(255, 251, 245, .78); --k-surface-2: rgba(255, 251, 245, .55);
  --k-line: rgba(30, 26, 22, .12); --k-line-strong: rgba(30, 26, 22, .22);
  --k-text: #1E1A16; --k-muted: #3E3530; --k-faint: #3E3530;
  --k-brand: #9A4424; --k-brand-ink: #FFFFFF; --k-brand-soft: #F2C9B4; --k-brand-text: #9A4424;
  --k-hero: #4D5B3A; --k-hero-ink: #F6EFE6; --k-gold: #9A4424;
  --k-ok: #36402B; --k-ok-soft: rgba(77, 91, 58, .16);
  --k-r-l: 20px; --k-r-xl: 20px;
  --k-shadow-1: 0 0 0 1px rgba(30, 26, 22, .12); --k-shadow-2: 0 0 0 1px rgba(30, 26, 22, .12); --k-shadow-3: 0 0 0 1px rgba(30, 26, 22, .12);
  --m-sage: #36402B; --m-sage-soft: rgba(77, 91, 58, .14);
  --m-olive: #36402B; --m-sand: #EAD9C2; --m-dusk: #B9A6C9; --m-dawn: #F2C9B4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), body.k-app, body.k-app:not(.pub) {
    --k-bg: #1E1A16; --k-surface: rgba(46, 38, 52, .72); --k-surface-2: rgba(46, 38, 52, .5);
    --k-line: rgba(243, 234, 223, .12); --k-line-strong: rgba(243, 234, 223, .22);
    --k-text: #F3EADF; --k-muted: #C9BBC9; --k-faint: #C9BBC9;
    --k-brand: #D9764F; --k-brand-ink: #1E1A16; --k-brand-soft: rgba(234, 217, 194, .14); --k-brand-text: #D9764F;
    --k-hero: rgba(234, 217, 194, .85); --k-hero-ink: #1E1A16; --k-gold: #EAD9C2;
    --k-ok: #EAD9C2; --k-ok-soft: rgba(234, 217, 194, .14);
    --m-sage: #D8CCD9; --m-sage-soft: rgba(234, 217, 194, .1);
    --m-olive: #EAD9C2; --m-sand: rgba(234, 217, 194, .2); --m-dusk: rgba(185, 166, 201, .3); --m-dawn: rgba(242, 201, 180, .26);
  }
}
:root[data-theme="dark"], body.k-app[data-theme="dark"] {
  --k-bg: #1E1A16; --k-surface: rgba(46, 38, 52, .72); --k-surface-2: rgba(46, 38, 52, .5);
  --k-line: rgba(243, 234, 223, .12); --k-line-strong: rgba(243, 234, 223, .22);
  --k-text: #F3EADF; --k-muted: #C9BBC9; --k-faint: #C9BBC9;
  --k-brand: #D9764F; --k-brand-ink: #1E1A16; --k-brand-soft: rgba(234, 217, 194, .14); --k-brand-text: #D9764F;
  --k-hero: rgba(234, 217, 194, .85); --k-hero-ink: #1E1A16; --k-gold: #EAD9C2;
  --k-ok: #EAD9C2; --k-ok-soft: rgba(234, 217, 194, .14);
  --m-sage: #D8CCD9; --m-sage-soft: rgba(234, 217, 194, .1);
  --m-olive: #EAD9C2; --m-sand: rgba(234, 217, 194, .2); --m-dusk: rgba(185, 166, 201, .3); --m-dawn: rgba(242, 201, 180, .26);
}

/* Wash: fixed to the viewport from 720 px; phones scroll it. */
body.k-app { min-height: 100vh; color: var(--k-text); background: linear-gradient(180deg, #EAD9C2 0%, #D9C8D6 55%, #B9A6C9 100%) no-repeat; font-family: var(--k-font); }
@media (min-width: 720px) { body.k-app { background-attachment: fixed; } }
@media (prefers-color-scheme: dark) { body.k-app { background: linear-gradient(180deg, #1E1A16 0%, #2A2330 60%, #3A3046 100%) no-repeat; } }
@media (min-width: 720px) and (prefers-color-scheme: dark) { body.k-app { background-attachment: fixed; } }
body.k-app[data-theme="dark"] { background: linear-gradient(180deg, #1E1A16 0%, #2A2330 60%, #3A3046 100%) no-repeat; }

/* Type: Gilda for h1, h2 and big numerals (weight 400, never bold-faked); Manrope for everything else. */
body.k-app h1, body.k-app h2, body.k-app .k-big, body.k-app .m-when b, body.k-app .m-pass .k-big, body.k-app .pub-arch-when { font-family: var(--k-font-display); font-weight: 400; letter-spacing: 0; }
body.k-app h3 { font-family: var(--k-font); font-weight: 600; letter-spacing: 0; }
body.k-app h1 em { font-style: italic; }
body.k-app .k-kicker, body.k-app:not(.pub) .k-kicker, body.k-app.pub .k-kicker { font-family: var(--k-font); font-style: normal; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--k-muted); line-height: 1.4; }
body.k-app .k-tile-img { border-radius: 999px 999px 9px 9px; }

/* Top bar and rail. Phones: a frosted pill bar that floats. Desktop: a light sand rail with ink text. */
body.k-app .k-tabs { margin: 0 12px 12px; left: 0; right: 0; border-radius: 999px; background: rgba(255, 251, 245, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--k-line); padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); }
body.k-app .k-tabs a { border-radius: 999px; color: var(--k-muted); }
body.k-app .k-tabs a[aria-current="page"] { background: rgba(185, 166, 201, .45); color: var(--k-text); }
@media (prefers-color-scheme: dark) { body.k-app .k-tabs { background: rgba(46, 38, 52, .82); } body.k-app .k-tabs a[aria-current="page"] { background: rgba(185, 166, 201, .3); } }
@media (min-width: 1024px) {
  body.k-app .k-tabs { margin: 0; border-radius: 0; background: #F3E6D3; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-right: 1px solid var(--k-line); }
  body.k-app .k-tabs a { border-radius: 14px; }
  body.k-app .k-tabs a:hover { background: rgba(255, 251, 245, .5); }
}
@media (prefers-color-scheme: dark) { @media (min-width: 1024px) { body.k-app .k-tabs { background: rgba(46, 38, 52, .6); } } }
body.k-app .k-top { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Buttons: Clay primary with white text; Olive outline (text and line) for the secondary action. */
body.k-app .k-btn-line, body.k-app .k-btn-s.k-btn-line { color: var(--m-olive); box-shadow: inset 0 0 0 1.5px currentColor; background: transparent; }
body.k-app .k-btn-2 { background: rgba(255, 251, 245, .6); color: var(--k-text); }
body.k-app .k-btn { min-height: 44px; }
body.k-app .k-btn:focus-visible, body.k-app a:focus-visible, body.k-app button:focus-visible, body.k-app input:focus-visible, body.k-app select:focus-visible { outline: 3px solid var(--k-brand); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { body.k-app .k-btn-line { color: #EAD9C2; } }

/* Surfaces: translucent paper with a hairline; the hairline is the only edge. */
body.k-app .k-card, body.k-app .k-plan, body.k-app .k-sheet, body.k-app .k-panel { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.k-app .k-card, body.k-app .k-plan, body.k-app .k-sheet { box-shadow: 0 0 0 1px var(--k-line); border-radius: 20px; }

/* ---------- Public page ---------- */
body.k-app.pub .pub-hero { display: grid; gap: 40px; justify-items: center; text-align: center; padding: 40px 0 24px; }
body.k-app.pub .pub-hero-copy { display: grid; justify-items: center; gap: 0; max-width: 40rem; }
body.k-app.pub .pub-hero h1 { font-size: min(9vw, 8rem); line-height: .95; font-weight: 400; letter-spacing: -.01em; margin: 14px auto 0; max-width: 16ch; }
body.k-app.pub .pub-hero h1 em { color: var(--k-brand-text); font-style: italic; }
body.k-app.pub .pub-hero .k-lead { font-family: var(--k-font); font-size: 19px; line-height: 1.5; color: var(--k-muted); max-width: 36ch; margin: 22px auto 0; }
body.k-app.pub .pub-hero .k-btn-row { justify-content: center; margin-top: 28px; }
body.k-app.pub .pub-facts { grid-template-columns: repeat(3, auto); justify-content: center; gap: 28px; margin-top: 32px; }
body.k-app.pub .pub-facts div { border-left: 0; border-top: 2px solid var(--k-brand); padding: 10px 0 0; text-align: center; }
body.k-app.pub .pub-facts b { font-family: var(--k-font-display); font-weight: 400; font-size: 1.75rem; }
body.k-app.pub .pub-arch { margin: 0; display: grid; justify-items: center; gap: 12px; }
body.k-app.pub .pub-arch figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; color: var(--k-muted); font-size: 13px; font-weight: 600; }
body.k-app.pub .pub-arch-win { position: relative; width: min(300px, 80vw); aspect-ratio: 300 / 390; border-radius: 50% 50% 0 0 / 38% 38% 0 0; padding: 22% 20px 0; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--k-text); background: linear-gradient(180deg, #F2C9B4 0%, #EAD9C2 45%, #B9A6C9 100%); box-shadow: 0 0 0 1px var(--k-line); overflow: hidden; }
body.k-app.pub .pub-arch-kicker { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0; color: var(--k-muted); }
body.k-app.pub .pub-arch-when { font-size: clamp(2.25rem, 9vw, 3rem); line-height: 1; margin: 10px 0 0; }
body.k-app.pub .pub-arch-name { font-weight: 600; font-size: 1.25rem; margin: 10px 0 0; }
body.k-app.pub .pub-arch-meta { margin: 4px 0 0; font-size: 14px; color: var(--k-muted); }
body.k-app.pub .pub-plant { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 62%; height: auto; color: #1E1A16; }
body.k-app.pub .pub-plant path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { body.k-app.pub .pub-arch-win { background: linear-gradient(180deg, rgba(234, 217, 194, .3) 0%, rgba(234, 217, 194, .14) 50%, rgba(185, 166, 201, .22) 100%); } body.k-app.pub .pub-plant { color: #F3EADF; } }
@media (min-width: 1024px) {
  body.k-app.pub .pub-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; text-align: center; padding: 56px 0 32px; align-items: center; }
  body.k-app.pub .pub-arch-win { width: 460px; aspect-ratio: 460 / 600; padding-top: 24%; }
  body.k-app.pub .pub-arch-when { font-size: 3.5rem; }
  body.k-app.pub .pub-arch-name { font-size: 1.5rem; }
}

/* How it works: one quiet numbered line on a hairline. */
body.k-app.pub .pub-how { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--k-line-strong); }
body.k-app.pub .pub-how li { display: grid; align-items: start; align-content: start; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--k-line); }
body.k-app.pub .pub-how .pub-n { font-family: var(--k-font-display); font-size: 1.75rem; line-height: 1; color: var(--k-brand-text); }
body.k-app.pub .pub-how h3 { margin: 0; font-size: 1.1875rem; }
body.k-app.pub .pub-how p { margin: 6px 0 0; color: var(--k-muted); font-size: var(--k-t-sub); max-width: 60ch; }
body.k-app.pub .pub-how .pub-mini-card { margin-top: 14px; max-width: 320px; }
@media (min-width: 900px) {
  body.k-app.pub .pub-how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
  body.k-app.pub .pub-how li { border-bottom: 0; padding-top: 26px; grid-template-columns: 1fr; }
}

/* The week: one row of arch windows, one per class day, lit by the time of the day; scroll-snapped on phones. */
body.k-app.pub .pub-tt .r-days { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 8px 16px 18px; scrollbar-width: none; }
body.k-app.pub .pub-tt .r-days::-webkit-scrollbar { display: none; }
body.k-app.pub .pub-tt .r-day { flex: 0 0 min(180px, 66vw); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 12px 18px; border-radius: 50% 50% 20px 20px / 90px 90px 20px 20px; background: rgba(255, 251, 245, .6); box-shadow: 0 0 0 1px var(--k-line); }
@media (prefers-color-scheme: dark) {
  body.k-app.pub .pub-tt .r-day { background: rgba(234, 217, 194, .08); }
}
body.k-app.pub .pub-tt .r-day h3 { flex-direction: column; align-items: center; gap: 2px; margin: 0 0 8px; font-family: var(--k-font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
body.k-app.pub .pub-tt .r-day h3 span { font-family: var(--k-font); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--k-muted); }
body.k-app.pub .pub-tt .k-list { background: none; box-shadow: none; padding: 0; gap: 8px; display: grid; justify-items: center; }
body.k-app.pub .pub-tt .k-row { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; box-shadow: none; padding: 6px 0 0; min-height: 0; text-align: center; border-radius: 16px; }
body.k-app.pub .pub-tt .k-row:hover { background: none; }
body.k-app.pub .pub-tt .k-row-main { align-items: center; text-align: center; }
body.k-app.pub .pub-tt .k-row-title { white-space: normal; font-weight: 600; }
body.k-app.pub .pub-tt .k-row-sub { white-space: normal; font-size: 13px; color: var(--k-muted); }
body.k-app.pub .pub-tt .r-time { width: auto; font-family: var(--k-font-display); font-weight: 400; font-size: 1.75rem; line-height: 1; order: -1; }
body.k-app.pub .pub-tt .k-tile-img { width: 56px; height: 56px; }
body.k-app.pub .pub-tt .k-chev { display: none; }
body.k-app.pub .pub-tt .k-row + .k-row::before { display: none; }
@media (min-width: 1024px) {
  body.k-app.pub .pub-tt .r-days { justify-content: center; overflow: visible; margin: 0; padding: 8px 0 16px; }
  body.k-app.pub .pub-tt .r-day { flex: 1 1 0; max-width: 200px; }
}

/* Passes: arch-topped cards. */
body.k-app.pub .pub-sec .k-plans .k-plan { border-radius: 50% 50% 20px 20px / 76px 76px 20px 20px; padding-top: 56px; }
body.k-app.pub .pub-sec .k-plans .k-plan-feature { box-shadow: 0 0 0 1.5px var(--k-brand); }

/* Visit: the rules sit clear of their heading; the Saffi card stacks at phone width. */
body.k-app.pub .pub-visit .k-card h3 { margin: 0; font-size: 1.125rem; }
body.k-app.pub .pub-visit .k-card h3 + .r-rules { margin-top: 16px; }
body.k-app.pub .m-teacher { min-width: 0; }
body.k-app.pub .m-teacher .k-stack-s { min-width: 0; }
@media (max-width: 479px) { body.k-app.pub .m-teacher { flex-direction: column; align-items: flex-start; } }
body.k-app.pub .pub-cta { background: var(--k-hero); color: var(--k-hero-ink); }
body.k-app.pub .pub-cta h2 { font-family: var(--k-font-display); font-weight: 400; }
body.k-app.pub .pub-foot { color: var(--k-muted); }

/* ---------- Member pages ---------- */
/* Home: the pass is a tall arch in a left column from 1024 px (480 px); the next class and the week sit right.
   On phones the pass comes first. */
body.k-app:not(.pub) .m-pass, body.k-app:not(.pub) .k-hero-card.m-pass { background: var(--k-surface); color: var(--k-text); border: 1px solid var(--k-line-strong); box-shadow: 0 0 0 1px var(--k-line); border-radius: 50% 50% 20px 20px / 110px 110px 20px 20px; padding: 56px 24px 24px; text-align: center; }
body.k-app:not(.pub) .k-hero-card.m-pass .k-hero-top { color: var(--k-muted); }
body.k-app:not(.pub) .m-pass .k-big { color: var(--k-text); font-size: 4.25rem; }
body.k-app:not(.pub) .m-pass .k-big small, body.k-app:not(.pub) .m-pass .k-note { color: var(--k-muted); }
body.k-app:not(.pub) .m-pass .k-note b { color: var(--k-text); }
body.k-app:not(.pub) .m-pass .m-dots li { background: transparent; border: 1.5px dashed var(--k-line-strong); }
body.k-app:not(.pub) .m-pass .m-dots li.on { background: var(--k-brand); border-color: var(--k-brand); border-style: solid; }
body.k-app:not(.pub) .m-pass .k-scan [data-pl-scan-show], body.k-app:not(.pub) .m-pass .k-scan [data-pl-scan-demo] { background: var(--k-hero); color: var(--k-hero-ink); }
body.k-app:not(.pub) .k-scan [data-pl-wallet] button { background: transparent; color: var(--k-text); border: 1px solid var(--k-line-strong); }
body.k-app:not(.pub) .k-scan [data-pl-wallet] { margin-top: var(--k-3); }
@media (min-width: 1024px) {
  body.k-app .k-board.m-home { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); column-gap: 40px; }
  body.k-app .k-board.m-home > .m-home-pass { grid-column: 1; grid-row: 1 / span 2; }
  body.k-app .k-board.m-home > .m-home-next { grid-column: 2; grid-row: 1; }
  body.k-app .k-board.m-home > .m-week { grid-column: 2; grid-row: 2; }
  body.k-app .k-board.m-home > .m-home-pass .m-pass { min-height: 600px; display: flex; flex-direction: column; justify-content: center; border-radius: 50% 50% 20px 20px / 200px 200px 20px 20px; padding-top: 96px; }
  body.k-app .k-board.m-home .m-pass .k-big { font-size: clamp(6rem, 11vw, 10rem); line-height: 1; }
}
@media (max-width: 1023px) { body.k-app .k-board.m-home > .m-home-pass { order: -1; } }

/* Classes: a booking or a class is one arch window, filled by the light of its time (site.js sets data-tod). */
body.k-app:not(.pub) .m-class { grid-template-columns: minmax(0, 1fr); border-radius: 12rem 12rem 20px 20px; padding: 44px 24px 22px; background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-line); }
body.k-app:not(.pub) .m-cards .m-class { padding: 44px 24px 22px; }
body.k-app:not(.pub) .m-class .m-arch { display: none; }
body.k-app:not(.pub) .m-class .m-class-main > :is(.m-class-top, .m-class-name, .m-class-sub) { grid-column: 1; }
body.k-app:not(.pub) .m-class[data-tod="morning"] { background: #F2C9B4; color: #1E1A16; }
body.k-app:not(.pub) .m-class[data-tod="midday"] { background: #EAD9C2; color: #1E1A16; }
body.k-app:not(.pub) .m-class[data-tod="evening"] { background: #B9A6C9; color: #1E1A16; }
body.k-app:not(.pub) .m-class[data-tod] .m-when span, body.k-app:not(.pub) .m-class[data-tod] .m-class-sub, body.k-app:not(.pub) .m-class[data-tod] .r-note, body.k-app:not(.pub) .m-class[data-tod] .r-reply { color: #3E3530; }
body.k-app:not(.pub) .m-class[data-tod] .m-when b { color: #1E1A16; }
body.k-app:not(.pub) .m-class[data-tod] .m-class-name { color: #1E1A16; }
body.k-app:not(.pub) .m-class[data-tod] .r-reply { background: rgba(255, 251, 245, .55); }
body.k-app:not(.pub) .m-class[data-tod] .r-time, body.k-app:not(.pub) .m-class[data-tod] .k-steps li { color: #3E3530; }
body.k-app:not(.pub) .m-class[data-tod] .k-steps li::before { background: rgba(30, 26, 22, .2); }
body.k-app:not(.pub) .m-class[data-tod] .k-steps li.k-done::before, body.k-app:not(.pub) .m-class[data-tod] .k-steps li.k-now::before { background: #9A4424; }
body.k-app:not(.pub) .m-class[data-tod] .k-btn-line { background: rgba(255, 251, 245, .6); }
body.k-app:not(.pub) .m-class[data-tod="morning"] .k-badge, body.k-app:not(.pub) .m-class[data-tod="midday"] .k-badge, body.k-app:not(.pub) .m-class[data-tod="evening"] .k-badge { background: rgba(255, 251, 245, .7); color: #1E1A16; }
body.k-app:not(.pub) .m-class[data-tod="morning"] .m-when b, body.k-app:not(.pub) .m-class[data-tod="midday"] .m-when b, body.k-app:not(.pub) .m-class[data-tod="evening"] .m-when b { color: #1E1A16; }
@media (prefers-color-scheme: dark) {
  body.k-app:not(.pub) .m-class[data-tod] { background: rgba(234, 217, 194, .08); color: #F3EADF; }
  body.k-app:not(.pub) .m-class[data-tod="morning"] { background: rgba(242, 201, 180, .24); }
  body.k-app:not(.pub) .m-class[data-tod="midday"] { background: rgba(234, 217, 194, .16); }
  body.k-app:not(.pub) .m-class[data-tod="evening"] { background: rgba(185, 166, 201, .26); }
  body.k-app:not(.pub) .m-class[data-tod] .m-class-name, body.k-app:not(.pub) .m-class[data-tod] .m-when b, body.k-app:not(.pub) .m-class[data-tod] .m-when span, body.k-app:not(.pub) .m-class[data-tod] .m-class-sub, body.k-app:not(.pub) .m-class[data-tod] .r-note, body.k-app:not(.pub) .m-class[data-tod] .r-time, body.k-app:not(.pub) .m-class[data-tod] .k-steps li { color: #F3EADF; }
  body.k-app:not(.pub) .m-class[data-tod] .m-when span, body.k-app:not(.pub) .m-class[data-tod] .m-class-sub, body.k-app:not(.pub) .m-class[data-tod] .r-note { color: #C9BBC9; }
  body.k-app:not(.pub) .m-class[data-tod] .r-reply { background: rgba(30, 26, 22, .35); }
  body.k-app:not(.pub) .m-class[data-tod] .r-reply { color: #F3EADF; }
  body.k-app:not(.pub) .m-class[data-tod] .k-badge { background: rgba(30, 26, 22, .4); color: #F3EADF; }
  body.k-app:not(.pub) .m-class[data-tod] .k-steps li.k-done::before, body.k-app:not(.pub) .m-class[data-tod] .k-steps li.k-now::before { background: #D9764F; }
  body.k-app:not(.pub) .m-class[data-tod] .m-when b { color: #F3EADF; }
  body.k-app:not(.pub) .m-class[data-tod] .k-btn-line { background: rgba(30, 26, 22, .3); }
}
body.k-app:not(.pub) .r-day a.k-row[aria-current="true"] { background: transparent; box-shadow: inset 0 0 0 2px var(--k-brand); border-radius: 16px; }
@media (min-width: 1024px) { body.k-app .m-week .r-day { background: rgba(255, 251, 245, .6); } body.k-app .m-week .r-day[data-today] { background: var(--k-brand-soft); } }
@media (min-width: 1024px) and (prefers-color-scheme: dark) { body.k-app .m-week .r-day { background: rgba(46, 38, 52, .5); } }
body.k-app:not(.pub) .r-day h3 { font-family: var(--k-font); font-weight: 600; }

/* Pass page and other paper pieces. */
body.k-app:not(.pub) .m-limit { background: rgba(242, 201, 180, .55); color: var(--k-text); box-shadow: none; }
@media (prefers-color-scheme: dark) { body.k-app:not(.pub) .m-limit { background: rgba(234, 217, 194, .12); } }
body.k-app:not(.pub) .m-metrics { display: none; }
body.k-app:not(.pub) .m-teacher .k-avatar { background: var(--k-brand-soft); color: var(--k-brand-text); }
@media (max-width: 479px) { body.k-app:not(.pub) .m-teacher { flex-direction: column; align-items: flex-start; } }
body.k-app:not(.pub) .m-months .k-row { border-top: 1px solid var(--k-line); }
body.k-app:not(.pub) .k-account .k-row, body.k-app:not(.pub) .k-account > * { min-width: 0; }
body.k-app:not(.pub) .m-links a { color: var(--k-brand-text); }
body.k-app:not(.pub) .m-pass .k-note a, body.k-app:not(.pub) .r-day .k-row-sub { color: inherit; }
body.k-app:not(.pub) .m-line, body.k-app:not(.pub) .r-info { color: var(--k-muted); }
body.k-app:not(.pub) .r-info .k-i { color: var(--k-brand-text); }
@media (prefers-reduced-motion: reduce) { body.k-app *, body.k-app *::before, body.k-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* art direction 2026-10-25, round 2: colour that carries (public band and CTA, dark surfaces, the rail),
   the chapel window hero, the arch fill by the time of day, the home layout and the classes week as arches.
   Later rules win; the earlier literal-time tones for the week are gone (data-tod comes from site.js). */

/* Rail (1024 px and up): ink on a solid sand rail; the dark rule is its own block, no !important. */
@media (min-width: 1024px) {
  body.k-app[data-k-nav] nav.k-tabs { background: #F3E6D3; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-right: 1px solid var(--k-line); }
  body.k-app[data-k-nav] nav.k-tabs .k-tabs-brand span { color: #4A433C; }
  body.k-app[data-k-nav] nav.k-tabs a { color: #4A433C; }
  body.k-app[data-k-nav] nav.k-tabs a:hover { background: rgba(255, 251, 245, .6); }
  body.k-app[data-k-nav] nav.k-tabs a[aria-current="page"] { background: #E7D5E0; color: #1E1A16; }
}
@media (min-width: 1024px) and (prefers-color-scheme: dark) {
  body.k-app[data-k-nav] nav.k-tabs { background: #1A1714; }
  body.k-app[data-k-nav] nav.k-tabs .k-tabs-brand span, body.k-app[data-k-nav] nav.k-tabs a { color: #CFC4B8; }
  body.k-app[data-k-nav] nav.k-tabs a:hover { background: rgba(243, 234, 223, .06); }
  body.k-app[data-k-nav] nav.k-tabs a[aria-current="page"] { background: #2E2833; color: #F3EADF; }
}

/* Public hero: the sand-to-lilac wash runs under the whole hero, buttons and facts included. */
body.k-app.pub .pub-hero { display: block; padding: 40px 0 96px; background: linear-gradient(180deg, #EAD9C2 0%, #D9C8D6 60%, #B9A6C9 100%); }
body.k-app.pub .pub-hero-in { display: grid; justify-items: center; gap: 40px; text-align: center; }
@media (min-width: 1024px) { body.k-app.pub .pub-hero { padding: 56px 0 128px; } body.k-app.pub .pub-hero-in { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; } }
@media (prefers-color-scheme: dark) { body.k-app.pub .pub-hero { background: linear-gradient(180deg, #1E1A16 0%, #2A2330 60%, #3A3046 100%); } }
body.k-app.pub .pub-hero h1 { font-size: clamp(2.5rem, 9vw, 7rem); }
body.k-app.pub .pub-hero .k-lead { color: #3E3530; }
body.k-app.pub .pub-facts span { color: #3E3530; }
@media (prefers-color-scheme: dark) { body.k-app.pub .pub-hero .k-lead, body.k-app.pub .pub-facts span { color: #C9BBC9; } }

/* The chapel window: a poster-scale arch, two mullions and a transom at 40%, the plant on the sill, evening light inside. */
body.k-app.pub .pub-arch { width: 100%; }
body.k-app.pub .pub-arch-win { width: min(520px, calc(100vw - 32px)); aspect-ratio: 520 / 640; padding: 40px 20px 0; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: linear-gradient(180deg, #B9A6C9 0%, #8E7BA6 100%); box-shadow: 0 0 0 2px #1E1A16; }
body.k-app.pub .pub-arch-win::before { content: ""; position: absolute; top: 40%; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 0; background: linear-gradient(90deg, transparent 33%, #1E1A16 33%, #1E1A16 calc(33% + 2px), transparent calc(33% + 2px), transparent 66%, #1E1A16 66%, #1E1A16 calc(66% + 2px), transparent calc(66% + 2px)); }
body.k-app.pub .pub-arch-win::after { content: ""; position: absolute; left: 0; right: 0; top: 40%; height: 2px; background: #1E1A16; pointer-events: none; z-index: 0; }
body.k-app.pub .pub-arch-win > :not(svg) { position: relative; z-index: 1; }
body.k-app.pub .pub-arch-win .pub-arch-kicker, body.k-app.pub .pub-arch-win .pub-arch-meta { color: #1E1A16; }
body.k-app.pub .pub-arch-when { font-size: clamp(2.5rem, 12vw, 3.75rem); }
body.k-app.pub .pub-arch figcaption { color: #3E3530; }
body.k-app.pub .pub-plant { width: 70%; color: #1E1A16; z-index: 1; }
body.k-app.pub .pub-plant path { stroke-width: 2.5; }
@media (min-width: 1024px) { body.k-app.pub .pub-arch-win { width: 520px; padding-top: 56px; } body.k-app.pub .pub-arch-when { font-size: 4.25rem; } body.k-app.pub .pub-arch-name { font-size: 1.75rem; } }
@media (prefers-color-scheme: dark) {
  body.k-app.pub .pub-arch-win { box-shadow: 0 0 0 2px #EAD9C2; color: #F5EDE3; }
  body.k-app.pub .pub-arch-win::after { background-color: #EAD9C2; }
  body.k-app.pub .pub-arch-win::before { background: linear-gradient(90deg, transparent 33%, #EAD9C2 33%, #EAD9C2 calc(33% + 2px), transparent calc(33% + 2px), transparent 66%, #EAD9C2 66%, #EAD9C2 calc(66% + 2px), transparent calc(66% + 2px)); }
  body.k-app.pub .pub-arch-win::after { background: #EAD9C2; }
  body.k-app.pub .pub-arch-win .pub-arch-kicker, body.k-app.pub .pub-arch-win .pub-arch-meta { color: #F3EADF; }
  body.k-app.pub .pub-arch figcaption { color: #C9BBC9; }
  body.k-app.pub .pub-plant { color: #EAD9C2; }
}
@media (max-width: 479px) { body.k-app.pub .pub-arch-win { padding-top: 40px; } }

/* The studio app: a full-bleed olive band with sand text (big, small, big). */
body.k-app.pub .pub-band { background: #4D5B3A; color: #EAD9C2; }
body.k-app.pub .pub-band h2, body.k-app.pub .pub-band h3, body.k-app.pub .pub-band p, body.k-app.pub .pub-band .k-muted, body.k-app.pub .pub-band .pub-how p { color: #EAD9C2; }
body.k-app.pub .pub-band .pub-n { color: #EAD9C2; }
body.k-app.pub .pub-band .pub-how, body.k-app.pub .pub-band .pub-how li { border-color: rgba(234, 217, 194, .35); }
body.k-app.pub .pub-band :focus-visible { outline-color: #EAD9C2; }
body.k-app.pub .pub-band .pub-mini-card { background: #4D5B3A; box-shadow: inset 0 0 0 1px rgba(234, 217, 194, .45); color: #EAD9C2; }
body.k-app.pub .pub-mini-card p { color: #EAD9C2; opacity: 1; }
body.k-app.pub .pub-mini-card b { color: #F6EFE6; }
body.k-app.pub .pub-mini-card .k-dots li { border-color: rgba(234, 217, 194, .6); }
body.k-app.pub .pub-mini-card .k-dots li.on { background: #EAD9C2; border-color: #EAD9C2; }
@media (prefers-color-scheme: dark) {
  body.k-app.pub .pub-mini-card { background: #2E2833; box-shadow: none; color: #F3EADF; }
  body.k-app.pub .pub-mini-card p { color: #C9BBC9; }
  body.k-app.pub .pub-mini-card b { color: #F3EADF; }
  body.k-app.pub .pub-mini-card .k-dots li { border-color: rgba(243, 234, 223, .35); }
  body.k-app.pub .pub-mini-card .k-dots li.on { background: #E07A52; border-color: #E07A52; }
}

/* The final call: one full-bleed clay band, white text. */
body.k-app.pub .pub-cta-band { background: #9A4424; color: #FFFFFF; padding: 0 0 var(--k-6); }
body.k-app.pub .pub-cta-band .pub-wrap { padding-top: var(--k-6); }
body.k-app.pub .pub-cta { margin: 0; padding: 0; background: none; color: #FFFFFF; }
body.k-app.pub .pub-cta h2, body.k-app.pub .pub-cta p { color: #FFFFFF; }
body.k-app.pub .pub-cta p { opacity: 1; }
body.k-app.pub .pub-cta-band :focus-visible { outline-color: #FFFFFF; }
body.k-app.pub .k-btn-cta { background: #FFFFFF; color: #9A4424; box-shadow: none; }
body.k-app.pub .k-btn-cta:hover { background: #F6EFE6; }

/* Dark buttons: the secondary surface is a plum panel with sand labels. */
@media (prefers-color-scheme: dark) { body.k-app.pub .k-btn-2 { background: #3A3340; color: #F3EADF; } }

/* Public week: arch columns lit by the time of the class (data-tod from site.js); cards wide enough to read. */
body.k-app.pub .pub-tt .r-day { flex: 0 0 min(200px, 42vw); }
body.k-app.pub .pub-tt .k-row-sub { white-space: nowrap; padding: 0 12px; color: #3E3530; }
body.k-app.pub .pub-tt .k-row-title { padding: 0 12px; }
body.k-app.pub .pub-tt .r-day[data-tod="dawn"] { background: #F6C9AE; }
body.k-app.pub .pub-tt .r-day[data-tod="morning"] { background: #F3E0C8; }
body.k-app.pub .pub-tt .r-day[data-tod="midday"] { background: #EAD9C2; }
body.k-app.pub .pub-tt .r-day[data-tod="evening"] { background: #B9A6C9; }
@media (prefers-color-scheme: dark) {
  body.k-app.pub .pub-tt .r-day[data-tod="dawn"] { background: linear-gradient(180deg, #4A3A33, #6B4E40); }
  body.k-app.pub .pub-tt .r-day[data-tod="morning"] { background: linear-gradient(180deg, #3D3430, #58483F); }
  body.k-app.pub .pub-tt .r-day[data-tod="midday"] { background: linear-gradient(180deg, #2E2833, #453D4E); }
  body.k-app.pub .pub-tt .r-day[data-tod="evening"] { background: linear-gradient(180deg, #3B2F45, #5A4A66); }
  body.k-app.pub .pub-tt .r-day[data-tod] h3, body.k-app.pub .pub-tt .r-day[data-tod] .k-row-title, body.k-app.pub .pub-tt .r-day[data-tod] .r-time { color: #F3EADF; }
  body.k-app.pub .pub-tt .r-day[data-tod] h3 span, body.k-app.pub .pub-tt .r-day[data-tod] .k-row-sub { color: #F3EADF; }
}
@media (min-width: 1024px) { body.k-app.pub .pub-tt .r-day { flex: 1 1 0; max-width: 200px; } }

/* Member pages: the arch windows. Text clears the curve at desktop (72 px top). */
body.k-app:not(.pub) .m-class, body.k-app:not(.pub) .m-cards .m-class { padding: 44px 24px 22px; }
@media (min-width: 1024px) { body.k-app:not(.pub) .m-class, body.k-app:not(.pub) .m-cards .m-class { padding: 72px 32px 22px; } }
body.k-app:not(.pub) .m-class[data-tod="dawn"] { background: #F6C9AE; color: #1E1A16; }
body.k-app:not(.pub) .m-class[data-tod="morning"] { background: #F3E0C8; color: #1E1A16; }
body.k-app:not(.pub) .m-class[data-tod="midday"] { background: #EAD9C2; color: #1E1A16; }
body.k-app:not(.pub) .m-class[data-tod="evening"] { background: #B9A6C9; color: #1E1A16; }
body.k-app:not(.pub) .m-class[data-tod] .r-reply { background: rgba(255, 251, 245, .55); color: #1E1A16; border-left: 0; }
@media (prefers-color-scheme: dark) {
  body.k-app:not(.pub) .m-class[data-tod="dawn"] { background: linear-gradient(180deg, #4A3A33, #6B4E40); color: #F3EADF; }
  body.k-app:not(.pub) .m-class[data-tod="morning"] { background: linear-gradient(180deg, #3D3430, #58483F); color: #F3EADF; }
  body.k-app:not(.pub) .m-class[data-tod="midday"] { background: linear-gradient(180deg, #2E2833, #453D4E); color: #F3EADF; }
  body.k-app:not(.pub) .m-class[data-tod="evening"] { background: linear-gradient(180deg, #3B2F45, #5A4A66); color: #F3EADF; }
  body.k-app:not(.pub) .m-class[data-tod] .m-when span, body.k-app:not(.pub) .m-class[data-tod] .m-class-sub, body.k-app:not(.pub) .m-class[data-tod] .r-note { color: #F3EADF; opacity: .9; }
  body.k-app:not(.pub) .m-class[data-tod] .r-reply { background: #2E2833; color: #F3EADF; border-left: 3px solid #E07A52; }
  body.k-app:not(.pub) .m-class[data-tod] .r-reply::before { color: #C9BBC9; }
  body.k-app:not(.pub) .m-class[data-tod] .k-btn-line, body.k-app:not(.pub) .m-class[data-tod] .k-btn-line:hover { background: #3A3340; color: #F3EADF; box-shadow: inset 0 0 0 1.5px #F3EADF; }
  body.k-app:not(.pub) .m-class[data-tod] .k-steps li { color: #F3EADF; }
  body.k-app:not(.pub) .m-class[data-tod] .k-steps li.k-done::before, body.k-app:not(.pub) .m-class[data-tod] .k-steps li.k-now::before { background: #E07A52; }
}
/* Light reply on the light arch: a paper card with a sage rule. */
body.k-app:not(.pub) .m-class .r-reply { border-left: 3px solid var(--m-sage); }

/* The pass's "Show my code" in dark: plum fill, sand label. */
@media (prefers-color-scheme: dark) {
  body.k-app:not(.pub) .m-pass .k-scan [data-pl-scan-show], body.k-app:not(.pub) .m-pass .k-scan [data-pl-scan-demo], body.k-app:not(.pub) .k-scan [data-pl-scan-show] { background: #3A3340; color: #F3EADF; }
}

body.k-app:not(.pub) .m-home-next .m-class { position: relative; overflow: hidden; isolation: isolate; }
body.k-app:not(.pub) .m-home-next .m-class-main > * { position: relative; z-index: 1; }

/* Home 1440: the pass on the left (two rows); the next class and the last classes on the right; the week across. */
@media (min-width: 1024px) {
  body.k-app .k-board.m-home > .m-home-pass { grid-column: 1; grid-row: 1 / span 2; }
  body.k-app .k-board.m-home > .m-home-next { grid-column: 2; grid-row: 1; }
  body.k-app .k-board.m-home > .m-home-done { grid-column: 2; grid-row: 2; }
  body.k-app .k-board.m-home > .m-week { grid-column: 1 / -1; grid-row: 3; }
}
body.k-app:not(.pub) .m-home-done .k-list { background: none; box-shadow: none; }
body.k-app:not(.pub) .m-home-done .k-row-end .k-badge { font-size: .75rem; }

/* Classes at 1280 and up: the week as five arch columns lit by the time of their class. */
body.k-app:not(.pub) .m-book-days .k-tile-img { width: 56px; height: 72px; border-radius: 999px 999px 9px 9px; }
body.k-app:not(.pub) .m-book-days .r-day[data-tod="dawn"] .k-tile-img { background: #F6C9AE; }
body.k-app:not(.pub) .m-book-days .r-day[data-tod="morning"] .k-tile-img { background: #F3E0C8; }
body.k-app:not(.pub) .m-book-days .r-day[data-tod="midday"] .k-tile-img { background: #EAD9C2; }
body.k-app:not(.pub) .m-book-days .r-day[data-tod="evening"] .k-tile-img { background: #B9A6C9; }
@media (prefers-color-scheme: dark) {
  body.k-app:not(.pub) .m-book-days .r-day[data-tod="dawn"] .k-tile-img { background: #6B4E40; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod="morning"] .k-tile-img { background: #58483F; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod="midday"] .k-tile-img { background: #453D4E; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod="evening"] .k-tile-img { background: #5A4A66; }
}
@media (min-width: 1280px) {
  body.k-app:not(.pub) .m-book-days .r-days { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
  body.k-app:not(.pub) .m-book-days .r-day { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 8px 14px; border-radius: 999px 999px 20px 20px / 110px 110px 20px 20px; background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-line-strong); }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod="dawn"] { background: #F6C9AE; color: #1E1A16; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod="morning"] { background: #F3E0C8; color: #1E1A16; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod="midday"] { background: #EAD9C2; color: #1E1A16; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod="evening"] { background: #B9A6C9; color: #1E1A16; }
  body.k-app:not(.pub) .m-book-days .r-day h3 { flex-direction: column; align-items: center; gap: 0; margin: 0 0 8px; font-size: 1.0625rem; }
  body.k-app:not(.pub) .m-book-days .r-day h3 span { font-size: .8125rem; }
  body.k-app:not(.pub) .m-book-days .r-day .k-list { background: none; box-shadow: none; width: 100%; }
  body.k-app:not(.pub) .m-book-days .r-day .k-row { flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 0; min-height: 0; text-align: center; background: none; box-shadow: none; }
  body.k-app:not(.pub) .m-book-days .r-day .k-row::before, body.k-app:not(.pub) .m-book-days .r-day .k-chev { display: none; }
  body.k-app:not(.pub) .m-book-days .r-day .r-time { width: auto; order: -1; font-family: var(--k-font-display); font-size: 1.625rem; line-height: 1; color: inherit; }
  body.k-app:not(.pub) .m-book-days .r-day .k-row-main { align-items: center; }
  body.k-app:not(.pub) .m-book-days .r-day .k-row-sub { color: #3E3530; font-size: .8125rem; }
  body.k-app:not(.pub) .m-book-days .r-day .r-chip { margin: 4px 0 0; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod] .k-row-title { color: #1E1A16; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod] .k-tile-img { width: 64px; height: 80px; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod] .k-row-sub { color: #3E3530; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod] .r-time { color: #1E1A16; }
}
@media (min-width: 1280px) and (prefers-color-scheme: dark) {
  body.k-app:not(.pub) .m-book-days .r-day[data-tod="dawn"] { background: linear-gradient(180deg, #4A3A33, #6B4E40); color: #F3EADF; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod="morning"] { background: linear-gradient(180deg, #3D3430, #58483F); color: #F3EADF; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod="midday"] { background: linear-gradient(180deg, #2E2833, #453D4E); color: #F3EADF; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod="evening"] { background: linear-gradient(180deg, #3B2F45, #5A4A66); color: #F3EADF; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod] .k-row-title, body.k-app:not(.pub) .m-book-days .r-day[data-tod] .r-time, body.k-app:not(.pub) .m-book-days .r-day[data-tod] h3 { color: #F3EADF; }
  body.k-app:not(.pub) .m-book-days .r-day[data-tod] .k-row-sub, body.k-app:not(.pub) .m-book-days .r-day[data-tod] h3 span { color: #F3EADF; }
}

/* art direction 2026-10-25, round 3 (last round): the arch fills with light, arch cards on phones and at 1440,
   the plan page as an arch beside the passes, the public wash and clay band. Later rules win. */

/* 1. The next-class arch: light rises from the bottom. data-fill (site.js, steps of 5 from 15 to 90) sets --fill:
   90% today, about 40% two days out, 15% at least. The arch animates from 0 on load (900 ms). */
@property --fill { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes mat-arch-fill { from { --fill: 0%; } }
[data-fill="15"] { --fill: 15%; } [data-fill="20"] { --fill: 20%; } [data-fill="25"] { --fill: 25%; } [data-fill="30"] { --fill: 30%; }
[data-fill="35"] { --fill: 35%; } [data-fill="40"] { --fill: 40%; } [data-fill="45"] { --fill: 45%; } [data-fill="50"] { --fill: 50%; }
[data-fill="55"] { --fill: 55%; } [data-fill="60"] { --fill: 60%; } [data-fill="65"] { --fill: 65%; } [data-fill="70"] { --fill: 70%; }
[data-fill="75"] { --fill: 75%; } [data-fill="80"] { --fill: 80%; } [data-fill="85"] { --fill: 85%; } [data-fill="90"] { --fill: 90%; }
body.k-app:not(.pub) .m-home-next .m-class { --fill-c: #F4C7A1; --rest-c: #B9A6C9; }
body.k-app:not(.pub) .m-home-next .m-class,
body.k-app:not(.pub) .m-home-next .m-class[data-tod] { background: linear-gradient(to top, var(--fill-c) 0 var(--fill), var(--rest-c) var(--fill)); animation: mat-arch-fill 900ms ease-out; }
body.k-app:not(.pub) .m-home-next .m-class[data-tod="dawn"] { --fill-c: #F4C7A1; --rest-c: #F6DCC8; }
body.k-app:not(.pub) .m-home-next .m-class[data-tod="morning"] { --fill-c: #F4C7A1; --rest-c: #EAD9C2; }
body.k-app:not(.pub) .m-home-next .m-class[data-tod="midday"] { --fill-c: #F4C7A1; --rest-c: #B9A6C9; }
body.k-app:not(.pub) .m-home-next .m-class[data-tod="evening"] { --fill-c: #B9A6C9; --rest-c: #EAD9C2; }
body.k-app.pub .pub-arch-win { --fill-c: #B9A6C9; --rest-c: #EAD9C2; background: linear-gradient(to top, var(--fill-c) 0 var(--fill), var(--rest-c) var(--fill)); animation: mat-arch-fill 900ms ease-out; }
body.k-app.pub .pub-arch-win[data-tod="dawn"] { --fill-c: #F4C7A1; --rest-c: #F6DCC8; }
body.k-app.pub .pub-arch-win[data-tod="morning"] { --fill-c: #F4C7A1; --rest-c: #EAD9C2; }
body.k-app.pub .pub-arch-win[data-tod="evening"] { --fill-c: #B9A6C9; --rest-c: #EAD9C2; }
.m-until, .pub-arch-until { margin: 4px 0 0; font-family: var(--k-font); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--k-text); }
.m-until:empty, .pub-arch-until:empty { display: none; }
.m-when .m-until { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--k-text); margin-top: 4px; }
body.k-app:not(.pub) .m-home-next .m-class .m-until { color: #1E1A16; }
body.k-app.pub .pub-arch-until { margin: 6px 0 0; }
@media (prefers-reduced-motion: reduce) { body.k-app:not(.pub) .m-home-next .m-class, body.k-app.pub .pub-arch-win { animation: none; } }

/* Dark: the same two stops, deepened (dawn peach, evening lilac). */
@media (prefers-color-scheme: dark) {
  body.k-app:not(.pub) .m-home-next .m-class { --fill-c: #6B4E40; --rest-c: #2E2833; }
  body.k-app:not(.pub) .m-home-next .m-class[data-tod="dawn"] { --fill-c: #6B4E40; --rest-c: #3A3340; }
  body.k-app:not(.pub) .m-home-next .m-class[data-tod="morning"] { --fill-c: #6B4E40; --rest-c: #2E2833; }
  body.k-app:not(.pub) .m-home-next .m-class[data-tod="midday"] { --fill-c: #5A4A66; --rest-c: #2E2833; }
  body.k-app:not(.pub) .m-home-next .m-class[data-tod="evening"] { --fill-c: #5A4A66; --rest-c: #3A3340; }
  body.k-app:not(.pub) .m-home-next .m-class, body.k-app:not(.pub) .m-home-next .m-class[data-tod] { color: #F3EADF; }
  body.k-app:not(.pub) .m-home-next .m-class .m-until, body.k-app:not(.pub) .m-home-next .m-class .m-when b { color: #F3EADF; }
  body.k-app.pub .pub-arch-win, body.k-app.pub .pub-arch-win[data-tod] { --fill-c: #5B4A73; --rest-c: #3A3150; box-shadow: 0 0 0 2px #EAD9C2; }
  body.k-app.pub .pub-arch-win, body.k-app.pub .pub-arch-until, body.k-app.pub .pub-arch-win .pub-arch-when, body.k-app.pub .pub-arch-win .pub-arch-name, body.k-app.pub .pub-arch-win .pub-arch-meta { color: #F5EDE3; }
  body.k-app.pub .pub-arch-win .pub-arch-kicker { color: #F5EDE3; opacity: .8; }
  body.k-app.pub .pub-arch-win::after { background-color: #EAD9C2; }
}

/* Arch card padding: the top clears the curve (date and time), 110 px at 1440 to match Bookings. */
body.k-app:not(.pub) .m-home-next .m-class, body.k-app:not(.pub) .m-cards .m-class { padding: 120px 28px 28px; }
@media (min-width: 1024px) { body.k-app:not(.pub) .m-home-next .m-class, body.k-app:not(.pub) .m-cards .m-class { padding: 110px 40px 32px; } }

/* Public arch: the transom sits at 58% on phones so it never crosses the meta line. */
@media (max-width: 479px) { body.k-app.pub .pub-arch-win::after { top: 58%; } body.k-app.pub .pub-arch-win::before { top: 58%; } }

/* 2. Public hero at phone width: two lines of lead, the arch before the stats. */
@media (max-width: 1023px) {
  body.k-app.pub .pub-hero-copy { display: contents; }
  body.k-app.pub .pub-arch { order: 1; }
  body.k-app.pub .pub-facts { order: 2; margin-top: 0; }
}
@media (max-width: 479px) { body.k-app.pub .pub-hero .k-lead { font-size: 17px; max-width: none; } }
body.k-app.pub .pub-hero-copy > .k-kicker { text-align: center; }

/* 3. Phone: the week is a horizontal strip of arch cards (140 x 200, scroll-snap); the selected one is outlined.
   Classes: "Save my mat" follows the strip. */
@media (max-width: 1023px) {
  body.k-app:not(.pub) .m-week .r-days, body.k-app:not(.pub) .m-book-days .r-days { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 0 -16px; padding: 12px 16px 16px; scrollbar-width: none; }
  body.k-app:not(.pub) .m-week .r-days::-webkit-scrollbar, body.k-app:not(.pub) .m-book-days .r-days::-webkit-scrollbar { display: none; }
  body.k-app:not(.pub) .m-week .r-day, body.k-app:not(.pub) .m-book-days .r-day { flex: 0 0 140px; width: 140px; height: auto; min-height: 240px; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 8px 12px; border-radius: 70px 70px 16px 16px; background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-line-strong); overflow: visible; }
  body.k-app:not(.pub) .r-day[hidden] { display: none; }
  body.k-app:not(.pub) .m-week .r-day h3, body.k-app:not(.pub) .m-book-days .r-day h3 { flex-direction: column; align-items: center; gap: 0; margin: 0 0 4px; font-size: .9375rem; line-height: 1.2; }
  body.k-app:not(.pub) .m-week .r-day h3 span, body.k-app:not(.pub) .m-book-days .r-day h3 span { font-size: .75rem; }
  body.k-app:not(.pub) .m-week .r-day .k-list, body.k-app:not(.pub) .m-book-days .r-day .k-list { background: none; box-shadow: none; width: 100%; }
  body.k-app:not(.pub) .m-week .r-day .k-row, body.k-app:not(.pub) .m-book-days .r-day .k-row { flex-direction: column; align-items: center; gap: 4px; padding: 0; min-height: 0; width: 100%; background: none; box-shadow: none; }
  body.k-app:not(.pub) .m-week .r-day .k-row::before, body.k-app:not(.pub) .m-week .r-day .k-chev, body.k-app:not(.pub) .m-book-days .r-day .k-row::before, body.k-app:not(.pub) .m-book-days .r-day .k-chev { display: none; }
  body.k-app:not(.pub) .m-week .r-day .r-time, body.k-app:not(.pub) .m-book-days .r-day .r-time { width: auto; order: -1; font-family: var(--k-font-display); font-size: 28px; font-weight: 400; line-height: 1; color: var(--k-brand-text); }
  body.k-app:not(.pub) .m-week .r-day .k-tile-img, body.k-app:not(.pub) .m-book-days .r-day .k-tile-img { width: 44px; height: 52px; }
  body.k-app:not(.pub) .m-week .r-day .k-row-main, body.k-app:not(.pub) .m-book-days .r-day .k-row-main { align-items: center; text-align: center; }
  body.k-app:not(.pub) .m-week .r-day .k-row-title, body.k-app:not(.pub) .m-book-days .r-day .k-row-title { font-size: .9375rem; line-height: 1.2; }
  body.k-app:not(.pub) .m-week .r-day .k-row-sub, body.k-app:not(.pub) .m-book-days .r-day .k-row-sub { font-size: .75rem; }
  body.k-app:not(.pub) .m-book-days .r-day:has(a[aria-current="true"]) { outline: 2px solid #A84B2A; outline-offset: 3px; }
  body.k-app:not(.pub) .m-book-days .r-day a.k-row[aria-current="true"] { background: none; box-shadow: none; }
  body.k-app:not(.pub) .m-book-days { display: contents; }
  body.k-app:not(.pub) .m-book-days > .r-days { order: 1; }
  body.k-app:not(.pub) .m-book-days > .r-weeks { order: 0; }
  body.k-app:not(.pub) .m-book-days > .m-note { order: 3; }
  body.k-app:not(.pub) .m-book-board { display: flex; flex-direction: column; align-items: stretch; }
  body.k-app:not(.pub) .m-book-board > * { min-width: 0; }
  body.k-app:not(.pub) .m-book-board > aside { order: 2; }
}
@media (prefers-color-scheme: dark) { @media (max-width: 1023px) { body.k-app:not(.pub) .m-book-days .r-day:has(a[aria-current="true"]) { outline-color: #D9764F; } } }

/* 4. Classes at 1440: arch-topped week cards, 300 px tall, the selected card outlined as a whole. */
@media (min-width: 1024px) {
  body.k-app:not(.pub) .m-book-days .r-day { border-radius: 999px 999px 16px 16px; height: 300px; }
  body.k-app:not(.pub) .m-book-days .r-day a.k-row[aria-current="true"] { background: none; box-shadow: none; }
  body.k-app:not(.pub) .m-book-days .r-day:has(a[aria-current="true"]) { outline: 2px solid #A84B2A; outline-offset: 3px; }
}
@media (min-width: 1024px) and (prefers-color-scheme: dark) { body.k-app:not(.pub) .m-book-days .r-day:has(a[aria-current="true"]) { outline-color: #D9764F; } }

/* 5. Public, 1440: the wash runs on below the green band; cards on it are #FBF6EF; the clay band is 40vh with a 64 px heading;
   "Your mat, saved." is one size and colour per theme. */
@media (min-width: 1024px) { body.k-app.pub .pub-band ~ .pub-sec { background: linear-gradient(180deg, #F3E9DC 0%, #D9CCE3 100%) fixed; } }
body.k-app.pub .pub-band ~ .pub-sec .k-card, body.k-app.pub .pub-band ~ .pub-sec .k-plan { background: #FBF6EF; }
@media (prefers-color-scheme: dark) { body.k-app.pub .pub-band ~ .pub-sec { background: none; } body.k-app.pub .pub-band ~ .pub-sec .k-card, body.k-app.pub .pub-band ~ .pub-sec .k-plan { background: var(--k-surface); } }
body.k-app.pub .pub-hero h1 em { font-size: clamp(2.5rem, 4.5vw, 4rem); color: #9A4424; }
@media (prefers-color-scheme: dark) { body.k-app.pub .pub-hero h1 em { color: #D9774F; } }
body.k-app.pub .pub-cta-band { min-height: 40vh; display: flex; align-items: center; }
body.k-app.pub .pub-cta-band .pub-wrap { width: 100%; }
body.k-app.pub .pub-cta h2 { font-size: clamp(2.5rem, 4.5vw, 4rem); line-height: 1.05; }

/* 6. Passes at 1440: the current pass as a 420 px arch on the left; the three plans and "Switch, pause or cancel" on the right. */
@media (min-width: 1024px) {
  body.k-app:not(.pub) .m-plan-board { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: 40px; row-gap: 32px; align-items: start; }
  body.k-app:not(.pub) .m-plan-board > .k-span-8 { display: contents; }
  body.k-app:not(.pub) .m-plan-board .m-current { grid-column: 1; grid-row: 1 / span 2; border-radius: 50% 50% 20px 20px / 200px 200px 20px 20px; min-height: 540px; display: flex; flex-direction: column; justify-content: center; padding: 96px 40px 40px; text-align: center; align-items: center; }
  body.k-app:not(.pub) .m-plan-board .m-current h2 { font-size: 1.75rem; }
  body.k-app:not(.pub) .m-plan-board .m-plans { grid-column: 2; grid-row: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.k-app:not(.pub) .m-plan-board > aside { grid-column: 2; grid-row: 2; }
}
@media (min-width: 1024px) and (max-width: 1439px) { body.k-app:not(.pub) .m-plan-board .m-plans { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1023px) { body.k-app:not(.pub) .m-plan-board .m-current { border-radius: 50% 50% 20px 20px / 110px 110px 20px 20px; padding-top: 72px; } }

/* 7. Dark: the empty pass dots on the green band, 1.5 px #C9CDB8. */
@media (prefers-color-scheme: dark) { body.k-app.pub .pub-mini-card .k-dots li { border: 1.5px solid #C9CDB8; } }

/* 8. Arch class cards: their list has no background, so it needn't clip; its rounded corner cut the last letter of "45 min · 14 mats" at 1280. */
body.k-app:not(.pub) :is(.m-week, .m-book-days) .r-day .k-list { overflow: visible; border-radius: 0; }