/* YogaTesh — site styles. Phone first; wider screens add space, not new layouts.
   Palette and type come from the logo: forest green, gold, cream; Cormorant Garamond + Jost. */

:root {
  --bg: #1a2018;          /* forest green, the logo's ground */
  --bg-deep: #141912;
  --panel: #212a1f;
  --panel-2: #283226;
  --gold: #c9a84c;
  --gold-soft: #e2c97e;
  --cream: #efe7d6;
  --parch: #d4c4a0;       /* body text */
  --muted: rgba(212, 196, 160, 0.62);
  --line: rgba(201, 168, 76, 0.22);
  --line-soft: rgba(239, 231, 214, 0.1);
  --sub: #ffa24a;          /* subbed: the badge and who's covering (orange) */
  --alert: #ff6b6b;        /* cancelled, and form errors (red) */
  --new: #a3e635;          /* a one-day time change (green) */
  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --body: 'Jost', 'Segoe UI', system-ui, sans-serif;
  --header-h: 72px;
  --col: 720px;            /* the site's one column: logo to the end of the menu */
  --gutter: max(18px, env(safe-area-inset-left, 0px));
  --gutter-r: max(18px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--parch);
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--cream); margin: 0; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; }

/* One column for the whole site: on a laptop it runs from the logo's left edge to the end of "Portal".
   Every band's side padding grows so its content sits in that column, while backgrounds and lines run edge to edge. */
.wrap {
  padding-left: max(var(--gutter), calc((100% - var(--col)) / 2));
  padding-right: max(var(--gutter-r), calc((100% - var(--col)) / 2));
}
.measure { max-width: var(--col); margin-left: auto; margin-right: auto; }
.wide { max-width: var(--col); margin-left: auto; margin-right: auto; }
.wrap.wide { max-width: none; }   /* the header and footer bands: full width, content in the column */

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(26, 32, 24, 0.96);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
.site-header .bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-header .logo { display: block; flex: none; }
/* The full locked logo (eye, name, tagline) on every screen; it scales down on the smallest phones */
.site-header .logo img { height: 52px; width: auto; }
@media (max-width: 359px) { .site-header .logo img { height: 44px; } }
.desk-nav { display: none; }
/* Top right: the one gold button, Book a private ("Book" on phones). The Portal is a menu item, like every page. */
.hdr-actions { display: flex; gap: 8px; flex: none; }
.site-header .hdr-btn { min-height: 40px; padding: 8px 12px; font-size: 11px; letter-spacing: 0.08em; }
.hdr-btn .long { display: none; }
@media (min-width: 480px) {
  .hdr-btn .long { display: inline; }
  .hdr-btn .short { display: none; }
  .site-header .hdr-btn { padding: 8px 14px; font-size: 12px; letter-spacing: 0.1em; }
}

/* Bottom bar (phones and small tablets): every page one tap away. Privates in gold. */
/* Lifted so it's never missed: lighter than the page, a gold line on top, a soft shadow above */
.tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--panel-2); border-top: 1px solid var(--gold);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  padding: 0 var(--gutter-r) env(safe-area-inset-bottom, 0px) var(--gutter);
}
.tab-bar a {
  position: relative; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 12px; letter-spacing: 0.03em; color: var(--parch); text-decoration: none;
}
@media (max-width: 399px) {   /* six tabs on the smallest phones: a touch smaller, edge to edge */
  .tab-bar { padding-left: 4px; padding-right: 4px; }
  .tab-bar a { font-size: 11px; letter-spacing: 0; }
}
.tab-bar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tab-bar .lead { color: var(--gold-soft); }
.tab-bar .current { color: var(--cream); font-weight: 500; }
/* "You are here": a short gold bar along the top of the current tab */
.tab-bar .current::before { content: ''; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px; background: var(--gold); border-radius: 0 0 2px 2px; }
body { padding-bottom: calc(61px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 900px) {
  .tab-bar { display: none; }
  body { padding-bottom: 0; }
  /* The same six names and marks as the bottom bar: Privates in gold, the current page lit with a short gold line */
  .desk-nav { display: flex; gap: 22px; align-items: center; }
  .desk-nav a {
    position: relative; padding: 6px 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--parch); text-decoration: none; font-weight: 400; white-space: nowrap;
  }
  .desk-nav a.lead { color: var(--gold-soft); }
  .desk-nav a:hover { color: var(--gold); }
  .desk-nav a.current { color: var(--cream); font-weight: 500; }
  .desk-nav a.current::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 28px; height: 2px; margin-left: -14px; background: var(--gold); border-radius: 2px; }
  .site-header .logo img { height: 48px; }
  /* On a laptop the top row is just the logo and the menu; Book a private floats at the column's bottom edge */
  .site-header .hdr-actions { display: none; }
}

/* Book a private, floating (laptops only): fixed near the bottom of the screen, its right edge on the column's
   right edge (in line with "Portal" and the text). Steps aside over the footer and when the page's own form shows. */
.book-float { display: none; }
@media (min-width: 900px) {
  .book-float {
    display: flex; justify-content: flex-end; position: fixed; left: 0; right: 0; bottom: 24px; z-index: 40;
    pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  }
  .book-float .btn { pointer-events: auto; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
  .book-float.away { opacity: 0; transform: translateY(12px); }
  .book-float.away .btn { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .book-float { transition: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px; border-radius: 3px;
  font-family: var(--body); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid var(--gold);
}
.btn-primary { background: var(--gold); color: var(--bg-deep); }
.btn-primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn-ghost { background: transparent; color: var(--gold); }
.btn-ghost:hover { background: rgba(201, 168, 76, 0.08); }
.btn-block { width: 100%; }
.text-link { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201, 168, 76, 0.45); font-weight: 400; }
.text-link::after { content: ' →'; }

/* ---------- Page structure ---------- */
/* Every page opens the same way: small gold label, headline, one italic line (and, if needed, one short practical note) */
.hero { padding-block: 26px 24px; border-bottom: 1px solid var(--line-soft); }
.eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); font-weight: 400; margin-bottom: 10px; }
.hero h1 { font-size: clamp(32px, 8.6vw, 52px); line-height: 1.08; letter-spacing: -0.01em; }
.hero .sub { font-family: var(--display); font-style: italic; font-size: clamp(19px, 5vw, 24px); color: var(--parch); margin-top: 10px; line-height: 1.35; }
.hero .note { margin-top: 10px; max-width: 34em; font-size: 14px; color: var(--muted); }
.hero .ctas { margin-top: 28px; display: grid; gap: 14px; justify-items: start; }

.section { padding-block: 44px; border-bottom: 1px solid var(--line-soft); }
.section h2 { font-size: clamp(26px, 7vw, 36px); line-height: 1.12; margin-bottom: 16px; }
.section h3 { font-size: 24px; line-height: 1.2; margin-bottom: 8px; }
.prose { display: grid; gap: 18px; }   /* paragraphs run the full column, like the lists beside them */
.lead-line { font-family: var(--display); font-size: clamp(19px, 5vw, 22px); line-height: 1.4; color: var(--cream); }
.lead-line em { font-style: italic; }

.list-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.list-points li { padding-left: 18px; position: relative; }
.list-points li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.list-points b { color: var(--cream); font-weight: 500; }

.closing { padding-block: 52px; text-align: center; }
.closing h2 { font-size: clamp(26px, 7vw, 36px); margin-bottom: 22px; }
.two-ways { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; max-width: 520px; margin: 0 auto; }
.two-ways .btn { padding-inline: 12px; }

/* ---------- Classes (shared by Home, Group Classes, What I Teach) ---------- */
.day { margin-bottom: 18px; }
.day-head {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 5;
  background: var(--bg); padding: 10px 0 8px; border-bottom: 1px solid var(--line);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 400;
}
.day-head .today { color: var(--cream); margin-left: 6px; }
/* A class: time | name, description, one details line | the change badge, top right (all screen sizes) */
.class-row {
  position: relative;
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
/* The badge sits in the top-right corner; only the class name makes room for it, so the rest keeps the full width */
.class-row .status-badge { position: absolute; top: 15px; right: 12px; }
.class-row.is-subbed .name, .class-row.is-cancelled .name { padding-right: 92px; }
.class-row .time { font-family: var(--display); font-size: 21px; line-height: 1.1; color: var(--cream); }
.class-row .tag { display: block; font-family: var(--body); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; font-weight: 500; }
/* Class changes, each said once in its own colour: subbed in orange (badge and who's covering), cancelled in red
   (badge, struck through), and a one-day time change in green (the time itself, "Time change", the usual time) */
.class-row .tag.newtime { color: var(--new); font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.class-row.is-moved .time { color: var(--new); }
.class-row .usual { display: block; font-family: var(--body); font-size: 11px; color: var(--muted); margin-top: 2px; }
.class-row.is-subbed, .class-row.is-cancelled { border-radius: 4px; padding: 14px 12px; margin: 6px 0; }
.class-row.is-subbed { background: rgba(255, 162, 74, 0.07); border: 1px solid rgba(255, 162, 74, 0.32); }
.class-row.is-cancelled { background: rgba(255, 107, 107, 0.06); border: 1px solid rgba(255, 107, 107, 0.32); }
.status-badge {
  align-self: start; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; white-space: nowrap;
  padding: 2px 8px; border-radius: 3px;
}
.status-badge.sub { background: rgba(255, 162, 74, 0.16); color: var(--sub); border: 1px solid rgba(255, 162, 74, 0.6); }
.status-badge.cancelled { background: rgba(200, 40, 40, 0.3); color: var(--alert); border: 1px solid rgba(220, 80, 80, 0.6); }
.class-row .tag.free { color: var(--gold-soft); }
.class-row .name { color: var(--cream); font-weight: 400; font-size: 17px; line-height: 1.35; }
.class-row .name a { text-decoration: none; }
.class-row .name a:hover { color: var(--gold-soft); }
.class-row .meta { font-size: 13px; color: var(--muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center; }
.class-row .meta > * + *::before { content: '·'; margin-right: 8px; color: var(--muted); font-style: normal; }
.class-row .meta .badge::before { content: none; }
.class-row .cover { color: var(--sub); font-style: italic; }
@media (max-width: 639px) {   /* phones: who's covering gets its own line, so no stray dot at a line break */
  .class-row .cover { flex-basis: 100%; }
  .class-row .meta > .cover::before { content: none; }
}
.venue-btn {
  position: relative; background: none; border: 0; padding: 4px 0; color: var(--gold); cursor: pointer; font-size: 13px; font-weight: 400;
  text-decoration: underline; text-decoration-color: rgba(201, 168, 76, 0.45); text-underline-offset: 3px;
}
/* Fingertip-sized tap areas (44px tall) without changing how small links look */
.text-link.tap { position: relative; }
.venue-btn::after, .text-link.tap::after { content: ''; position: absolute; inset: -10px -6px; }
.class-row .desc { font-size: 14px; margin-top: 2px; }
.class-row.is-cancelled .time, .class-row.is-cancelled .name, .class-row.is-cancelled .venue-btn {
  text-decoration: line-through; text-decoration-color: var(--alert);
}
.cover-note { color: var(--sub); font-style: italic; }
.badge { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--line); color: var(--muted); }
.badge.restricted { border-color: rgba(227, 138, 126, 0.35); color: #d7a59d; }

.filters { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 38px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--parch); font-size: 13px; cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--gold); color: var(--bg-deep); border-color: var(--gold); font-weight: 500; }

.notice {
  border: 1px solid var(--line); border-left: 3px solid var(--gold); background: var(--panel);
  padding: 12px 14px; border-radius: 4px; font-size: 14px; margin-bottom: 12px;
}
.notice b { color: var(--cream); font-weight: 500; }
/* Home's schedule box, right under the opening: a gold frame, what's happening, and a big See the schedule button
   (the site has changed, so regulars looking for the schedule find it at once) */
.home-bar { padding-block: 22px 0; }
.home-bar .hb { margin: 0; padding: 18px; border: 1px solid var(--gold); border-left-width: 4px; }
.home-bar .hb .eyebrow { margin-bottom: 6px; }
.home-bar .hb-text { font-size: 16px; line-height: 1.55; color: var(--parch); }
.home-bar .hb-text b { font-size: 17px; }
.home-bar .hb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 16px; }
.home-bar .hb-btn { width: 100%; }
.home-bar .text-link { white-space: nowrap; }
/* Schedule page: a one-line signup invitation above the filters (the full box stays below the schedule) */
.updates-line { font-size: 14px; color: var(--parch); margin: 0 0 14px; }
@media (min-width: 640px) { .home-bar .hb-btn { width: auto; padding-inline: 34px; } }
@media (min-width: 900px) {   /* laptops: a little larger */
  .home-bar { padding-block: 28px 0; }
  .home-bar .hb { padding: 22px 26px; }
  .home-bar .hb-text { font-size: 18px; }
  .home-bar .hb-text b { font-size: 19px; }
}


#enquire, #open { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }

/* Schedule-updates box under the Group Classes schedule */
.updates-box { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 18px; display: grid; gap: 12px; justify-items: start; }
.updates-box h2 { font-size: clamp(24px, 6vw, 30px); }

/* ---------- Sheets (pop-up panels) ---------- */
dialog.sheet {
  border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%;
  background: var(--bg-deep); color: var(--parch); border-radius: 14px 14px 0 0;
  border-top: 1px solid var(--line); max-height: 92vh;
}
dialog.sheet.half { max-height: 60vh; }
dialog.sheet.full { height: 100%; max-height: 100%; border-radius: 0; margin: 0; }
dialog.sheet::backdrop { background: rgba(5, 8, 5, 0.62); }
.sheet-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--gutter-r) 12px var(--gutter); background: var(--bg-deep); border-bottom: 1px solid var(--line-soft);
}
.sheet.full .sheet-head { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.sheet-head h2 { font-size: 24px; }
.sheet-close { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--cream); font-size: 26px; cursor: pointer; border-radius: 4px; }
.sheet-body { padding: 18px var(--gutter-r) calc(24px + env(safe-area-inset-bottom, 0px)) var(--gutter); overflow: auto; }
.sheet .grab { width: 38px; height: 4px; border-radius: 2px; background: rgba(239, 231, 214, 0.25); margin: 8px auto 0; }
.sheet.full .grab { display: none; }
.venue-sheet .addr { color: var(--cream); font-size: 17px; margin-bottom: 8px; }
.venue-sheet .vnote { font-size: 14px; margin-bottom: 18px; }
.venue-sheet .vactions { display: grid; gap: 10px; }
.discard { display: none; margin-top: 12px; padding: 12px; border: 1px solid rgba(227, 138, 126, 0.4); border-radius: 4px; font-size: 14px; }
.discard.show { display: block; }
.discard .row { display: flex; gap: 10px; margin-top: 10px; }

@media (min-width: 700px) {
  dialog.sheet, dialog.sheet.full { max-width: 560px; margin: auto; border-radius: 10px; height: auto; max-height: 86vh; border: 1px solid var(--line); }
}
/* ---------- Client Portal page ---------- */

.cp-hero-grid { display: grid; gap: 36px; align-items: center; }
.cp-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 18px; }
/* An illustrated practice page: shows what clients get without needing photos */
.cp-preview {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); max-width: 420px; transform: rotate(-1.2deg);
}
.cp-preview-top { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.cp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.cp-print { margin-left: auto; padding: 3px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
.cp-preview-title { font-family: var(--display); font-size: 26px; color: var(--cream); margin-top: 12px; }
.cp-preview-meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.cp-preview-row { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.cp-preview-row b { display: block; color: var(--cream); font-weight: 500; font-size: 14px; }
.cp-preview-row i { display: block; font-size: 13px; color: var(--parch); }
.cp-thumb { width: 54px; height: 54px; border-radius: 6px; background: linear-gradient(160deg, rgba(201, 168, 76, 0.35), rgba(201, 168, 76, 0.08)); }
.cp-preview-note { margin-top: 10px; padding: 10px 12px; border-radius: 6px; background: rgba(201, 168, 76, 0.1); font-family: var(--display); font-style: italic; font-size: 17px; line-height: 1.35; color: var(--cream); }
.cp-preview-note b { display: block; font-family: var(--body); font-style: normal; font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.cp-cards { display: grid; gap: 14px; margin-top: 22px; }
.cp-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 20px; display: grid; gap: 8px; }
.cp-card svg, .cp-lock svg { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cp-card h3 { font-size: 24px; }
.cp-steps { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 18px; counter-reset: step; }
.cp-steps li { position: relative; padding-left: 52px; counter-increment: step; }
.cp-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-family: var(--display); font-size: 20px;
}
.cp-steps b { color: var(--cream); font-weight: 500; }
.cp-lock { display: grid; grid-template-columns: 30px 1fr; gap: 14px; margin-top: 28px; padding: 16px; border-radius: 8px; background: var(--bg-deep); border: 1px solid var(--line-soft); }
.cp-lock b { color: var(--cream); font-weight: 500; }
@media (min-width: 760px) {
  .cp-hero-grid { grid-template-columns: 1.1fr 1fr; }
  .cp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Forms ---------- */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label, .field .label { font-size: 13px; color: var(--parch); font-weight: 400; }
.field .hint { font-size: 12px; color: var(--muted); }
.input, .textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 4px; border: 1px solid var(--line);
  background: var(--panel); color: var(--cream); font: inherit; font-size: 16px;
}
.textarea { min-height: 110px; resize: vertical; }
.input:focus, .textarea:focus { outline: none; border-color: var(--gold); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; cursor: pointer; padding: 4px 0; }
.check input { width: 20px; height: 20px; accent-color: var(--gold); flex: none; margin-top: 3px; }
.check small { display: block; font-size: 12px; color: var(--muted); }
.check.consent { font-size: 13px; line-height: 1.5; }
.prompts { display: flex; flex-wrap: wrap; gap: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: 14px; min-height: 1px; }
.form-msg.error { color: var(--alert); }
.form-done { text-align: center; padding: 18px 0 6px; }
.form-done .tick { font-family: var(--display); font-size: 52px; color: var(--gold); line-height: 1; }
.form-done p { margin-top: 8px; color: var(--cream); }

/* ---------- Practices: one page, five tabs (Ashtanga first) ---------- */
/* The tab row sits under the header, slides sideways on phones and stays put while reading */
.pp-tabs {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 40;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  padding: 10px var(--gutter-r) 10px var(--gutter); background: var(--bg); border-bottom: 1px solid var(--line);
}
.pp-tabs::-webkit-scrollbar { display: none; }
.pp-tabs [role=tab] {
  flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 999px;
  background: none; border: 1px solid var(--line); color: var(--parch); font-size: 14px; cursor: pointer;
}
.pp-tabs [aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--bg-deep); font-weight: 500; }
@media (min-width: 900px) { .pp-tabs { justify-content: center; } }
.practice-page { padding-block: 22px 48px; }
.practice-panel { display: grid; gap: 16px; scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 72px); }
.practice-panel[hidden] { display: none; }
.practice-panel h2 { font-size: clamp(30px, 8vw, 42px); line-height: 1.08; }
.pp-opener { font-family: var(--display); font-style: italic; font-size: 24px; line-height: 1.3; color: var(--cream); }
.pp-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0; padding: 14px 0; border-block: 1px solid var(--line); }
.pp-meta dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pp-meta dd { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--cream); }
.pp-meta dd.pace { color: var(--gold-soft); }
.pp-body { display: grid; gap: 16px; }
.pp-body .pull { font-family: var(--display); font-size: 28px; line-height: 1.25; color: var(--cream); padding: 6px 0 6px 18px; border-left: 2px solid var(--gold); margin-block: 6px; }
.practise-it { margin-top: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); display: grid; gap: 12px; justify-items: start; }
.pp-next { font-size: 15px; }
.pp-next b { color: var(--cream); font-weight: 500; }
.pp-nav { padding-top: 6px; }
.pp-nav button { background: none; border: 0; border-bottom: 1px solid rgba(201, 168, 76, 0.45); padding: 0; color: var(--gold); font-size: 15px; cursor: pointer; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-deep); border-top: 1px solid var(--line); padding-block: 40px calc(32px + env(safe-area-inset-bottom, 0px)); }
.site-footer .flogo img { height: auto; width: 230px; }
.footer-signup { margin-top: 26px; }
.footer-signup .label { color: var(--cream); font-size: 15px; margin-bottom: 8px; display: block; }
.footer-signup .row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.footer-signup .btn { padding-inline: 18px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 26px; }
.footer-nav a { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--parch); padding: 13px 0; }
.footer-email { display: inline-block; margin-top: 8px; padding: 10px 0; color: var(--gold); text-decoration: none; }
.footer-legal { display: flex; gap: 18px; margin-top: 4px; }
.footer-legal a { font-size: 13px; color: var(--muted); text-decoration: none; padding: 12px 0; }
.legal-page h2 { font-size: clamp(24px, 6vw, 30px); margin-top: 18px; }
.legal { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 12px; line-height: 1.6; color: rgba(212, 196, 160, 0.5); }

/* Small helpers */
.muted { color: var(--muted); }
.stack-sm { display: grid; gap: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media (min-width: 640px) {
  .hero { padding-block: 56px 44px; }
  .section { padding-block: 64px; }
  .class-row { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------- An unlocked client page, shown inside the site ---------- */
.client-page { padding-block: 22px 40px; }
.cp-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cp-tools .eyebrow { margin: 0; }
.cp-tools .btn { min-height: 40px; padding: 8px 16px; font-size: 12px; }
/* Printing a client page: just the page, on white */
@media print {
  body.client-open { background: #fff; color: #1a1a1a; padding: 0; }
  body.client-open .site-header, body.client-open .tab-bar, body.client-open .book-float,
  body.client-open .site-footer, body.client-open .cp-tools { display: none !important; }
  body.client-open .client-page { padding: 0; }
}
/* On a client's own page the floating Book would sit over their routine, so it stays out of the way */
body.client-open .book-float { display: none; }