/* Hepzora — base + components. Master Spec §55 Accessibility, §56 Performance */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }  /* display:* must not defeat the hidden attribute */
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--hz-font-body);
  font-size: var(--hz-step-0);
  line-height: var(--hz-leading-body);
  color: var(--hz-text);
  background: var(--hz-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas { display: block; max-width: 100%; height: auto; }

h1,h2,h3,h4 {
  font-family: var(--hz-font-heading);
  font-weight: 500;
  line-height: var(--hz-leading-tight);
  text-wrap: balance;
}
h1 { font-size: var(--hz-step-5); }
h2 { font-size: var(--hz-step-4); }
h3 { font-size: var(--hz-step-2); }
p  { text-wrap: pretty; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

/* Visible focus everywhere — §55 */
:focus-visible {
  outline: 2px solid var(--hz-botanical);
  outline-offset: 3px;
  border-radius: var(--hz-radius-sm);
}

.hz-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--hz-ink); color: var(--hz-cream);
  padding: var(--hz-s3) var(--hz-s5);
}
.hz-skip:focus { left: var(--hz-s4); top: var(--hz-s4); }

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

/* ---------- Layout ---------- */
.hz-container { width: 100%; max-width: var(--hz-container); margin-inline: auto; padding-inline: var(--hz-gutter); }
.hz-container--narrow { max-width: var(--hz-container-narrow); }
.hz-section { padding-block: var(--hz-section-y); }
.hz-section--alt  { background: var(--hz-surface-alt); }
.hz-section--deep { background: var(--hz-surface-deep); color: var(--hz-cream); }
/* Large editorial band: muted sage with warm ivory type. */
.hz-section--editorial{background:var(--hz-surface-editorial);color:var(--hz-on-editorial)}
.hz-section--editorial h2,.hz-section--editorial h3{color:var(--hz-cream)}
.hz-section--editorial .hz-eyebrow{color:color-mix(in srgb,var(--hz-cream) 82%,transparent)}
.hz-section--editorial .hz-lede,.hz-section--editorial .hz-prose{color:color-mix(in srgb,var(--hz-cream) 92%,transparent)}
.hz-section--editorial .hz-flow__step{border-top-color:color-mix(in srgb,var(--hz-cream) 34%,transparent)}
.hz-section--editorial .hz-flow__step::before{color:color-mix(in srgb,var(--hz-cream) 70%,transparent)}
/* CTA on sage: the deep botanical keeps its weight as the action colour */
.hz-section--editorial .hz-btn--on-dark{background:var(--hz-botanical);color:var(--hz-cream)}
.hz-section--editorial .hz-btn--on-dark:hover{background:var(--hz-ink)}
.hz-stack > * + * { margin-top: var(--hz-s4); }
.hz-stack--lg > * + * { margin-top: var(--hz-s6); }

/* ---------- Type helpers ---------- */
.hz-eyebrow {
  font-family: var(--hz-font-body);
  font-size: var(--hz-step--1);
  letter-spacing: var(--hz-tracking-wide);
  text-transform: uppercase;
  color: var(--hz-text-muted);           /* olive — passes AA */
  font-weight: 600;
}
.hz-lede { font-size: var(--hz-step-1); color: var(--hz-text-muted); max-width: var(--hz-measure); }
.hz-prose { max-width: var(--hz-measure); }
.hz-prose > * + * { margin-top: var(--hz-s4); }

/* Spaced-capital wordmark treatment from the brand kit */
.hz-wordmark {
  font-family: var(--hz-font-heading);
  letter-spacing: var(--hz-tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------- Buttons ---------- */
.hz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hz-s2);
  font-family: var(--hz-font-body);
  font-size: var(--hz-step--1);
  font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--hz-s4) var(--hz-s6);
  border-radius: var(--hz-radius);
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  min-height: 48px;                       /* touch target — §55 */
  transition: background var(--hz-dur) var(--hz-ease),
              color var(--hz-dur) var(--hz-ease),
              border-color var(--hz-dur) var(--hz-ease);
}
.hz-btn--primary { background: var(--hz-botanical); color: var(--hz-cream); }
.hz-btn--primary:hover { background: var(--hz-olive); }
.hz-btn--secondary { background: transparent; color: var(--hz-ink); border-color: var(--hz-ink); }
.hz-btn--secondary:hover { background: var(--hz-ink); color: var(--hz-cream); }
.hz-btn--on-dark { background: var(--hz-cream); color: var(--hz-ink); }
.hz-btn--on-dark:hover { background: var(--hz-stone); }
.hz-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ---------- Header ---------- */
.hz-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--hz-cream) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hz-border);
}
.hz-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--hz-s5); min-height: 68px; }
.hz-header__brand { font-size: var(--hz-step-1); text-decoration: none; }
.hz-nav { display: none; gap: var(--hz-s6); }
@media (min-width: 900px) { .hz-nav { display: flex; align-items: center; } }
.hz-nav a {
  font-size: var(--hz-step--1); letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--hz-text-muted); font-weight: 600;
  padding-block: var(--hz-s2);
}
.hz-nav a:hover, .hz-nav a[aria-current="page"] { color: var(--hz-ink); }

/* ---------- Hero ---------- */
.hz-hero { position: relative; min-height: min(84svh, 760px); display: grid; align-items: center; overflow: hidden; }
.hz-hero__media { position: absolute; inset: 0; z-index: 0; }
.hz-hero__media img, .hz-hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
/* Scrim protects the left-third safe zone the hero asset was chosen for */
.hz-hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgb(250 248 245 / 0.96) 0%, rgb(250 248 245 / 0.88) 28%,
    rgb(250 248 245 / 0.45) 52%, rgb(250 248 245 / 0.06) 78%);
}
@media (max-width: 760px) {
  .hz-hero__media img, .hz-hero__media video { object-position: 62% center; }
  .hz-hero__media::after {
    background: linear-gradient(180deg, rgb(250 248 245 / 0.30) 0%, rgb(250 248 245 / 0.80) 46%, rgb(250 248 245 / 0.97) 72%);
  }
}
.hz-hero__content { position: relative; z-index: 1; max-width: 34rem; padding-block: var(--hz-s9); }
@media (max-width: 760px) { .hz-hero__content { padding-top: 42svh; } }
.hz-hero__actions { display: flex; flex-wrap: wrap; gap: var(--hz-s4); margin-top: var(--hz-s6); }

/* ---------- Cards / grid ---------- */
.hz-grid { display: grid; gap: var(--hz-s6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .hz-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .hz-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.hz-card { display: flex; flex-direction: column; gap: var(--hz-s3); }
.hz-card__media {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--hz-radius);
  background: var(--hz-surface-alt);
}
.hz-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--hz-ease); }
.hz-card:hover .hz-card__media img { transform: scale(1.035); }
.hz-card__name { font-family: var(--hz-font-heading); font-size: var(--hz-step-1); }
.hz-card__meta { font-size: var(--hz-step--1); color: var(--hz-text-muted); }
.hz-card__price { font-weight: 600; }

/* Stock states — Master Spec §7 */
.hz-stock { font-size: var(--hz-step--1); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.hz-stock--out { color: var(--hz-olive); }

/* ---------- Flow / steps ---------- */
.hz-flow { display: grid; gap: var(--hz-s5); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 780px) { .hz-flow { grid-template-columns: repeat(4, 1fr); } }
.hz-flow__step { padding-top: var(--hz-s5); border-top: 1px solid var(--hz-border); }
.hz-flow__step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; font-family: var(--hz-font-heading);
  font-size: var(--hz-step-1); color: var(--hz-text-decorative); /* sage: large + decorative = OK */
  margin-bottom: var(--hz-s2);
}
.hz-section--deep .hz-flow__step { border-top-color: rgb(250 248 245 / 0.25); }
.hz-section--deep .hz-flow__step::before { color: var(--hz-accent); }

/* ---------- Journey / proof ---------- */
.hz-journey__frame { border-radius: var(--hz-radius); overflow: hidden; background: var(--hz-surface-alt); }
.hz-journey__caption { font-size: var(--hz-step--1); color: var(--hz-text-muted); margin-top: var(--hz-s3); }
.hz-disclaimer {
  font-size: var(--hz-step--1); color: var(--hz-text-muted);
  border-left: 2px solid var(--hz-stone); padding-left: var(--hz-s4); max-width: var(--hz-measure);
}

/* ---------- Testimonials ---------- */
.hz-quote { display: flex; flex-direction: column; gap: var(--hz-s3); padding: var(--hz-s6); background: var(--hz-white); border: 1px solid var(--hz-border); border-radius: var(--hz-radius); height: 100%; }
.hz-quote__stars { color: var(--hz-olive); letter-spacing: 0.15em; font-size: var(--hz-step--1); }
.hz-quote__body { font-family: var(--hz-font-heading); font-size: var(--hz-step-1); line-height: 1.45; }
.hz-quote__attr { font-size: var(--hz-step--1); color: var(--hz-text-muted); margin-top: auto; }

/* ---------- Footer ---------- */
.hz-footer { background: var(--hz-ink); color: var(--hz-stone); padding-block: var(--hz-s8) var(--hz-s6); }
.hz-footer a { color: var(--hz-stone); text-decoration: none; }
.hz-footer a:hover { color: var(--hz-cream); text-decoration: underline; }
.hz-footer__grid { display: grid; gap: var(--hz-s7); grid-template-columns: 1fr; }
@media (min-width: 780px) { .hz-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.hz-footer__head { font-size: var(--hz-step--1); letter-spacing: var(--hz-tracking-wide); text-transform: uppercase; color: var(--hz-cream); margin-bottom: var(--hz-s4); }
.hz-footer ul { list-style: none; padding: 0; }
.hz-footer li + li { margin-top: var(--hz-s2); }
.hz-footer__legal { margin-top: var(--hz-s8); padding-top: var(--hz-s5); border-top: 1px solid rgb(210 203 193 / 0.2); font-size: var(--hz-step--1); display: flex; flex-wrap: wrap; gap: var(--hz-s4); justify-content: space-between; }

/* ---------- Scroll reveal (§56: transform/opacity only) ---------- */
.hz-reveal { opacity: 0; transform: translateY(12px); transition: opacity 620ms var(--hz-ease), transform 620ms var(--hz-ease); }
.hz-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hz-reveal { opacity: 1; transform: none; transition: none; } }

.hz-notice { background: var(--hz-stone); color: var(--hz-ink); font-size: var(--hz-step--1); text-align: center; padding: var(--hz-s3) var(--hz-s4); }

/* Anchor targets must clear the sticky header — found in browser verification */
:root { --hz-header-h: 92px; }
main > section, [id] { scroll-margin-top: calc(var(--hz-header-h) + var(--hz-s4)); }

/* ---------- Development placeholder (never production data) ---------- */
.hz-ph{display:inline-flex;align-items:center;gap:.4em;font-family:var(--hz-font-body);
  font-size:.78em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.15em .5em;border-radius:2px;background:repeating-linear-gradient(45deg,
  #F7E9CE,#F7E9CE 6px,#F1DDBA 6px,#F1DDBA 12px);color:#6B4E12;border:1px dashed #B08D3F;cursor:help}
.hz-ph::before{content:"⚠"}

/* ---------- Assessment ---------- */
.hz-assess{min-height:100svh;display:flex;flex-direction:column;background:var(--hz-surface)}
.hz-assess__top{position:sticky;top:0;z-index:10;background:var(--hz-surface);
  border-bottom:1px solid var(--hz-border);padding:var(--hz-s4) 0}
.hz-progress{height:3px;background:var(--hz-border);border-radius:3px;overflow:hidden}
.hz-progress__bar{height:100%;background:var(--hz-botanical);transition:width 420ms var(--hz-ease)}
.hz-assess__meta{display:flex;justify-content:space-between;align-items:center;
  margin-top:var(--hz-s3);font-size:var(--hz-step--1);color:var(--hz-text-muted)}
.hz-assess__body{flex:1;display:flex;align-items:flex-start;padding-block:var(--hz-s7) var(--hz-s8)}
.hz-assess__foot{position:sticky;bottom:0;background:var(--hz-surface);
  border-top:1px solid var(--hz-border);padding:var(--hz-s4) 0}
.hz-assess__foot .hz-container{display:flex;gap:var(--hz-s4);justify-content:space-between}

.hz-q{border:0;padding:0;margin:0 0 var(--hz-s7)}
.hz-q__title{font-family:var(--hz-font-heading);font-size:var(--hz-step-3);
  line-height:1.2;padding:0;margin-bottom:var(--hz-s3);text-wrap:balance}
.hz-q__help{font-size:var(--hz-step--1);color:var(--hz-text-muted);margin-bottom:var(--hz-s4);max-width:52ch}

.hz-opts{display:grid;gap:var(--hz-s3);grid-template-columns:1fr}
@media(min-width:560px){.hz-opts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.hz-opts--visual{grid-template-columns:repeat(3,1fr)}}

.hz-opt{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
  text-align:left;padding:var(--hz-s4) var(--hz-s5);min-height:60px;
  background:var(--hz-white);border:1px solid var(--hz-border);border-radius:var(--hz-radius);
  font-family:inherit;font-size:var(--hz-step-0);color:var(--hz-text);cursor:pointer;
  transition:border-color 200ms var(--hz-ease),background 200ms var(--hz-ease),box-shadow 200ms var(--hz-ease)}
.hz-opt:hover{border-color:var(--hz-olive)}
.hz-opt.is-on{border-color:var(--hz-botanical);background:color-mix(in srgb,var(--hz-botanical) 6%,var(--hz-white));
  box-shadow:inset 0 0 0 1px var(--hz-botanical)}
.hz-opt__label{font-weight:600}
.hz-opt__hint{font-size:var(--hz-step--1);color:var(--hz-text-muted);font-weight:400}
.hz-opt__slot{margin-top:var(--hz-s2);width:100%;aspect-ratio:4/3;display:grid;place-items:center;
  border:1px dashed var(--hz-stone);border-radius:2px;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--hz-text-decorative);background:var(--hz-surface-alt)}

.hz-summary{max-width:44rem}
.hz-summary__list{list-style:none;padding:0;margin:var(--hz-s6) 0}
.hz-summary__list li{display:flex;justify-content:space-between;gap:var(--hz-s4);
  padding:var(--hz-s3) 0;border-bottom:1px solid var(--hz-border)}
.hz-summary__list span{color:var(--hz-text-muted);font-size:var(--hz-step--1);
  letter-spacing:.06em;text-transform:uppercase}
.hz-summary__actions{display:flex;flex-wrap:wrap;gap:var(--hz-s4);margin:var(--hz-s6) 0}

/* ---------- Routine result / PDF-style deliverable (Master Spec §22, §25) ---------- */
.hz-routine{max-width:52rem;margin-inline:auto;padding-block:var(--hz-s7) var(--hz-s9)}
.hz-routine__cover{padding-bottom:var(--hz-s6);margin-bottom:var(--hz-s7);
  border-bottom:2px solid var(--hz-botanical)}
.hz-routine__cover h1{font-size:var(--hz-step-4);margin-top:var(--hz-s2)}
.hz-routine__profile{color:var(--hz-text-muted);margin-top:var(--hz-s3)}
.hz-routine__date{font-size:var(--hz-step--1);color:var(--hz-text-decorative);margin-top:var(--hz-s2)}
.hz-routine__section{margin-bottom:var(--hz-s7)}
.hz-routine__section h2{font-size:var(--hz-step-2);margin-bottom:var(--hz-s4);
  padding-bottom:var(--hz-s2);border-bottom:1px solid var(--hz-border)}
.hz-routine__section p+p{margin-top:var(--hz-s3)}
.hz-kv{list-style:none;padding:0}
.hz-kv li{display:flex;justify-content:space-between;gap:var(--hz-s4);padding:var(--hz-s3) 0;
  border-bottom:1px solid var(--hz-border)}
.hz-kv span{color:var(--hz-text-muted);font-size:var(--hz-step--1);letter-spacing:.05em;text-transform:uppercase}
.hz-priorities{padding-left:1.2em}
.hz-priorities li{padding:var(--hz-s2) 0;font-family:var(--hz-font-heading);font-size:var(--hz-step-1)}
.hz-steps{padding-left:1.2em}.hz-steps>li{padding:var(--hz-s3) 0}
.hz-substeps{padding-left:1.2em;margin-top:var(--hz-s2)}
.hz-substeps li{font-size:var(--hz-step--1);color:var(--hz-text-muted);padding:.15rem 0}
.hz-bullets{padding-left:1.2em}.hz-bullets li{padding:.25rem 0}
.hz-note{font-size:var(--hz-step--1);color:var(--hz-text-muted);margin-top:var(--hz-s3);
  border-left:2px solid var(--hz-stone);padding-left:var(--hz-s4)}
.hz-safety{background:#FFF6E8;border:1px solid #E0B978;border-radius:var(--hz-radius);
  padding:var(--hz-s5);margin-bottom:var(--hz-s7)}
.hz-safety h2{font-size:var(--hz-step-1);margin-bottom:var(--hz-s2)}
.hz-routine__foot{border-top:2px solid var(--hz-botanical);padding-top:var(--hz-s6)}
.hz-routine__actions{display:flex;flex-wrap:wrap;gap:var(--hz-s4);margin-bottom:var(--hz-s5)}
.hz-devbox{margin-top:var(--hz-s6);font-size:var(--hz-step--1)}
.hz-devbox summary{cursor:pointer;color:var(--hz-text-muted)}
.hz-devbox pre{background:var(--hz-surface-alt);padding:var(--hz-s4);border-radius:var(--hz-radius);
  overflow-x:auto;font-size:.72rem;line-height:1.5;margin-top:var(--hz-s3)}
.hz-statuswrap{min-height:60svh;display:grid;place-items:center;text-align:center}

@media print{
  .hz-header,.hz-footer,.hz-routine__actions,.hz-devbox,.hz-skip,.hz-notice{display:none!important}
  body{background:#fff}
  .hz-routine{max-width:none;padding:0}
  .hz-routine__section{break-inside:avoid}
  a[href]::after{content:""}
}

/* ---------- Catalogue / PDP ---------- */
.hz-crumbs{font-size:var(--hz-step--1);color:var(--hz-text-muted);margin-bottom:var(--hz-s5)}
.hz-crumbs a{color:inherit}
.hz-pdp{display:grid;gap:var(--hz-s7);grid-template-columns:1fr}
@media(min-width:900px){.hz-pdp{grid-template-columns:1.1fr 1fr;gap:var(--hz-s8)}}
.hz-pdp__media img{width:100%;border-radius:var(--hz-radius);background:var(--hz-surface-alt)}
.hz-pdp__alt{margin-top:var(--hz-s4)}
.hz-pdp__price{font-size:var(--hz-step-2);font-family:var(--hz-font-heading)}
.hz-pdp__info h2{font-size:var(--hz-step-0);letter-spacing:.06em;text-transform:uppercase;
  color:var(--hz-text-muted);margin-bottom:var(--hz-s2);font-family:var(--hz-font-body);font-weight:700}
.hz-card__name a{text-decoration:none}
.hz-card__name a:hover{text-decoration:underline}

/* Dev-only banner — production build gate refuses to ship while any remain */
.hz-devbanner{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#2B2416;color:#F7E9CE;
  padding:var(--hz-s3) var(--hz-s5);font-size:var(--hz-step--1);border-top:2px solid #B08D3F}
.hz-devbanner ul{margin:var(--hz-s2) 0 0 1.1em}
.hz-devbanner summary{cursor:pointer;display:inline}

/* ---------- Admin ---------- */
.hz-adm{background:var(--hz-surface-alt);min-height:100svh}
.hz-adm__top{background:var(--hz-ink);color:var(--hz-cream);padding:var(--hz-s5) 0}
.hz-adm__top .hz-container{display:flex;justify-content:space-between;align-items:center;gap:var(--hz-s4);flex-wrap:wrap}
.hz-adm__warn{background:#7A2E2E;color:#fff;padding:var(--hz-s3) 0;font-size:var(--hz-step--1);text-align:center}
.hz-adm__stats{display:grid;gap:var(--hz-s4);grid-template-columns:repeat(2,1fr);margin:var(--hz-s6) 0}
@media(min-width:760px){.hz-adm__stats{grid-template-columns:repeat(4,1fr)}}
.hz-adm__stat{background:var(--hz-white);border:1px solid var(--hz-border);border-radius:var(--hz-radius);padding:var(--hz-s5)}
.hz-adm__stat strong{display:block;font-family:var(--hz-font-heading);font-size:var(--hz-step-3)}
.hz-adm__stat span{font-size:var(--hz-step--1);color:var(--hz-text-muted);letter-spacing:.05em;text-transform:uppercase}
.hz-adm__stat.is-warn strong{color:#8A5A00}
.hz-adm__row{background:var(--hz-white);border:1px solid var(--hz-border);border-radius:var(--hz-radius);margin-bottom:var(--hz-s4)}
.hz-adm__row summary{cursor:pointer;padding:var(--hz-s4) var(--hz-s5);display:flex;gap:var(--hz-s4);align-items:center;flex-wrap:wrap}
.hz-adm__name{font-family:var(--hz-font-heading);font-size:var(--hz-step-1);flex:1}
.hz-adm__cat{font-size:var(--hz-step--1);color:var(--hz-text-muted);text-transform:uppercase;letter-spacing:.05em}
.hz-adm__pct{font-size:var(--hz-step--1);font-weight:700;padding:.15em .6em;border-radius:99px}
.hz-adm__pct.is-ok{background:#E4EEE0;color:#2F4B25}
.hz-adm__pct.is-warn{background:#F7E9CE;color:#6B4E12}
.hz-adm__form{padding:0 var(--hz-s5) var(--hz-s5);display:grid;gap:var(--hz-s4);grid-template-columns:1fr}
@media(min-width:760px){.hz-adm__form{grid-template-columns:repeat(2,1fr)}}
.hz-adm__f{display:flex;flex-direction:column;gap:.3rem}
.hz-adm__f--check{flex-direction:row;align-items:center;gap:.5rem}
.hz-adm__label{font-size:var(--hz-step--1);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--hz-text-muted)}
.hz-adm__label em{margin-left:.5em;font-style:normal;font-size:.85em;background:#F7E9CE;color:#6B4E12;
  padding:.1em .45em;border-radius:2px;border:1px dashed #B08D3F;cursor:help}
.hz-adm__f input,.hz-adm__f textarea,.hz-adm__f select{font:inherit;font-size:var(--hz-step-0);
  padding:.55rem .7rem;border:1px solid var(--hz-border);border-radius:var(--hz-radius);
  background:var(--hz-white);color:var(--hz-text);min-height:44px}
.hz-adm__f input:focus,.hz-adm__f textarea:focus,.hz-adm__f select:focus{border-color:var(--hz-botanical)}
.hz-adm__media{grid-column:1/-1;border-top:1px solid var(--hz-border);padding-top:var(--hz-s4)}
#gapOut{white-space:pre-wrap;background:var(--hz-ink);color:var(--hz-cream);padding:var(--hz-s5);
  border-radius:var(--hz-radius);font-size:var(--hz-step--1);margin-top:var(--hz-s4)}

/* ---------- Hero video: responsive reframing (owner directive 2026-08-24) ----------
   The H2 desktop clip centres the subject. object-position shifts her toward the
   right so the headline keeps the clear left third the scrim is built for. */
.hz-hero__media--video{background:var(--hz-cream-warm)}
.hz-hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hz-hero__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.hz-hero__vid--desk{display:none;object-position:64% center}
.hz-hero__vid--mob{display:block;object-position:50% 32%}
/* Single-element hero: the variant class is applied by video-loader.js so the
   framing rules still apply, without a second element existing to be fetched. */
.hz-hero__vid.is-desk{display:block;object-position:64% center}
.hz-hero__vid.is-mob{display:block;object-position:50% 32%}
@media(min-width:768px){
  .hz-hero__vid--desk{display:block}
  .hz-hero__vid--mob{display:none}
}
@media(min-width:1100px){ .hz-hero__vid--desk,.hz-hero__vid.is-desk{object-position:70% center} }
@media(min-width:1500px){ .hz-hero__vid--desk,.hz-hero__vid.is-desk{object-position:74% center} }

/* Motion + data respect: poster only (§36, §55) */
@media (prefers-reduced-motion: reduce){
  .hz-hero__vid{display:none!important}
  .hz-hero__fallback{z-index:0}
}

/* ---------- Mobile corrections (found in device testing) ---------- */
@media (max-width: 767px){
  .hz-header__inner{min-height:70px;gap:var(--hz-s3)}
  .hz-header__brand{font-size:var(--hz-step-0)}
  /* Mobile header is deliberately two elements: logo and menu. A third control
     crowded 375px and forced the CTA down to an illegible 10.88px. The routine
     CTA is the first thing inside the drawer instead, at full width. */
  .hz-header__cta{display:none}
  .hz-header__inner{flex-wrap:nowrap;justify-content:space-between}
  .hz-logo{height:46px}
  .hz-hero{min-height:auto}
  /* The hero now carries a positioning line AND supporting copy, so the old
     34svh offset pushed the primary CTA to the very edge of a 375px fold. */
  .hz-hero__content{padding-top:24svh;padding-bottom:var(--hz-s6)}
  .hz-hero h1{font-size:clamp(1.9rem,7.5vw,2.6rem)}
  .hz-hero__actions .hz-btn{width:100%;justify-content:center}
  .hz-notice{font-size:.72rem;padding:var(--hz-s2) var(--hz-s4)}
  .hz-section{padding-block:clamp(2.5rem,9vw,4rem)}
}
/* Long single words must never force a horizontal scrollbar */
h1,h2,h3,p{overflow-wrap:break-word}

/* NOTE: `overflow-x:hidden` was previously set on html+body here. It made
   <html> a scroll container, which stopped native loading="lazy" from ever
   firing for below-the-fold images — the Guide image the owner saw broken.
   The real overflow was fixed at source with minmax(0,1fr) grid tracks, so the
   blanket hidden is not needed and is removed. */
body{max-width:100%}

/* WCAG 2.2 AA target size (2.5.8): standalone links need adequate hit area */
.hz-footer li a,.hz-nav a,.hz-crumbs a{display:inline-block;padding-block:.45rem;min-height:24px}
.hz-footer li+li{margin-top:var(--hz-s1)}

/* ---------- Editorial texture band (campaign footage, non-demonstrative) ---------- */
.hz-texture{display:grid;gap:var(--hz-s6);grid-template-columns:1fr;align-items:center;
  margin-top:var(--hz-s8);padding-top:var(--hz-s7);border-top:1px solid var(--hz-border)}
@media(min-width:820px){.hz-texture{grid-template-columns:.8fr 1fr;gap:var(--hz-s8)}}
.hz-texture__media{border-radius:var(--hz-radius);overflow:hidden;background:var(--hz-surface-alt);
  max-width:24rem;aspect-ratio:3/4}
.hz-texture__media video{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion: reduce){.hz-texture__media video{display:none}
  .hz-texture__media{background-image:url('../media/routine-teaser-mobile-poster.jpg');
    background-size:cover;background-position:center}}

/* ---------- Development demo index ---------- */
.hz-demo{display:block;padding:var(--hz-s5);background:var(--hz-white);
  border:1px solid var(--hz-border);border-radius:var(--hz-radius);text-decoration:none;
  transition:border-color 200ms var(--hz-ease)}
.hz-demo:hover{border-color:var(--hz-botanical)}
.hz-demo+.hz-demo{margin-top:var(--hz-s3)}
.hz-demo__label{display:block;font-family:var(--hz-font-heading);font-size:var(--hz-step-1)}
.hz-demo__note{display:block;font-size:var(--hz-step--1);color:var(--hz-text-muted);margin-top:.25rem}

/* Admin: single-column form below 760px; inputs must never be clipped */
@media (max-width: 759px){
  .hz-adm__form{grid-template-columns:1fr}
  .hz-adm__row summary{flex-wrap:wrap;gap:var(--hz-s2)}
  .hz-adm__name{flex:1 1 100%}
  .hz-adm__top .hz-container{flex-direction:column;align-items:flex-start}
}
.hz-adm__f input,.hz-adm__f textarea,.hz-adm__f select{max-width:100%;width:100%}
.hz-adm__form,.hz-adm__row{min-width:0}
.hz-adm__f{min-width:0}

/* Grid tracks must be allowed to shrink below item min-content.
   `1fr` means `minmax(auto,1fr)`, so a textarea's intrinsic width can force a
   track wider than its container. `minmax(0,1fr)` is the fix. */
.hz-adm__form{grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.hz-adm__form{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hz-adm__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.hz-adm__stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hz-grid{grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.hz-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.hz-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hz-opts{grid-template-columns:minmax(0,1fr)}
@media(min-width:560px){.hz-opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.hz-opts--visual{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hz-adm__f textarea,.hz-adm__f input,.hz-adm__f select{min-width:0}

/* ---------- Pricing presentation ---------- */
.hz-price{font-family:var(--hz-font-heading);font-size:var(--hz-step-3);line-height:1.1;
  margin-top:var(--hz-s5);color:var(--hz-ink)}
.hz-price__note{font-family:var(--hz-font-body);font-size:var(--hz-step--1);
  color:var(--hz-text-muted);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.hz-price__flow{font-size:var(--hz-step--1);color:var(--hz-text-muted);margin-top:var(--hz-s3);max-width:44ch}
.hz-buybar{display:flex;flex-wrap:wrap;gap:var(--hz-s5);align-items:center;justify-content:space-between;
  padding:var(--hz-s6);background:var(--hz-white);border:1px solid var(--hz-border);
  border-radius:var(--hz-radius);margin-top:var(--hz-s6)}
.hz-buybar .hz-price{margin-top:var(--hz-s2)}

/* ---------- Editorial split + product trio ---------- */
.hz-split{display:grid;gap:var(--hz-s7);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.hz-split{grid-template-columns:1fr 1.15fr;gap:var(--hz-s9)}}
.hz-figure{margin:0;border-radius:var(--hz-radius);overflow:hidden;background:var(--hz-surface-alt)}
.hz-figure video,.hz-figure img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.hz-figure figcaption{font-size:var(--hz-step--1);color:var(--hz-text-muted);padding:var(--hz-s3) 0}
.hz-minilist{list-style:none;padding:0;margin-top:var(--hz-s4);border-top:1px solid var(--hz-border)}
.hz-minilist a{display:flex;justify-content:space-between;gap:var(--hz-s4);padding:var(--hz-s3) 0;
  border-bottom:1px solid var(--hz-border);text-decoration:none;transition:padding 220ms var(--hz-ease)}
.hz-minilist a:hover{padding-inline-start:var(--hz-s2)}
.hz-minilist span{color:var(--hz-text-muted);font-size:var(--hz-step--1)}
.hz-trio{display:grid;gap:var(--hz-s5);grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--hz-s8)}
.hz-trio a{text-decoration:none;display:block}
.hz-trio img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--hz-radius);
  background:var(--hz-white);transition:transform 700ms var(--hz-ease)}
.hz-trio a:hover img{transform:scale(1.03)}
.hz-trio span{display:block;margin-top:var(--hz-s3);font-size:var(--hz-step--1);
  letter-spacing:.06em;text-transform:uppercase;color:var(--hz-text-muted)}

/* ---------- Review your answers ---------- */
.hz-review__group{margin-bottom:var(--hz-s5)}
.hz-review__row{display:flex;gap:var(--hz-s4);align-items:flex-start;justify-content:space-between;
  padding:var(--hz-s4) 0;border-bottom:1px solid var(--hz-border)}
.hz-review__q{font-size:var(--hz-step--1);color:var(--hz-text-muted);margin-bottom:.2rem}
.hz-review__a{font-family:var(--hz-font-heading);font-size:var(--hz-step-1)}
.hz-review__edit{background:none;border:1px solid var(--hz-border);border-radius:var(--hz-radius);
  padding:.4rem .8rem;font:inherit;font-size:var(--hz-step--1);cursor:pointer;min-height:36px;
  color:var(--hz-text-muted);white-space:nowrap}
.hz-review__edit:hover{border-color:var(--hz-botanical);color:var(--hz-ink)}
.hz-confirm{display:flex;gap:var(--hz-s3);align-items:flex-start;font-size:var(--hz-step--1);
  color:var(--hz-text-muted);max-width:60ch}
.hz-confirm input{margin-top:.2rem;width:20px;height:20px;flex:0 0 auto;accent-color:var(--hz-botanical)}

/* ---------- Routine steps (enriched deterministic output) ---------- */
.hz-steps2{list-style:none;padding:0;margin:0}
.hz-step{padding:var(--hz-s5) 0;border-bottom:1px solid var(--hz-border)}
.hz-step:last-child{border-bottom:0}
.hz-step__t{font-family:var(--hz-font-heading);font-size:var(--hz-step-1);margin-bottom:var(--hz-s2)}
.hz-step__what{font-size:var(--hz-step-0);margin-bottom:var(--hz-s2)}
.hz-step__how{color:var(--hz-text-muted);margin-bottom:var(--hz-s2)}
.hz-step__why{background:color-mix(in srgb,var(--hz-botanical) 5%,transparent);
  border-left:2px solid var(--hz-botanical);padding:var(--hz-s3) var(--hz-s4);
  border-radius:0 var(--hz-radius) var(--hz-radius) 0;margin-bottom:var(--hz-s2);font-size:var(--hz-step--1)}
.hz-step__why span{display:block;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:.68rem;color:var(--hz-botanical);margin-bottom:.2rem}
.hz-step__detail{font-size:var(--hz-step--1);color:var(--hz-text-muted);font-style:italic}

/* ---------- Your First 30 Days ---------- */
.hz-plan__weeks{display:grid;gap:var(--hz-s4);grid-template-columns:1fr;margin-bottom:var(--hz-s6)}
@media(min-width:760px){.hz-plan__weeks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.hz-plan__weeks{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hz-plan__week{background:var(--hz-white);border:1px solid var(--hz-border);
  border-radius:var(--hz-radius);padding:var(--hz-s5)}
.hz-plan__n{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hz-text-decorative);font-weight:700}
.hz-plan__title{font-family:var(--hz-font-heading);font-size:var(--hz-step-1);margin:.2rem 0 var(--hz-s3)}
.hz-plan__week ul{padding-left:1.05em;margin:0}
.hz-plan__week li{font-size:var(--hz-step--1);padding:.3rem 0;color:var(--hz-text-muted)}
.hz-plan__week li strong{color:var(--hz-ink)}
.hz-plan__recurring{background:var(--hz-surface-alt);border-radius:var(--hz-radius);padding:var(--hz-s5)}
.hz-plan__recurring h3{font-size:var(--hz-step-0);letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--hz-font-body);font-weight:700;color:var(--hz-text-muted);margin-bottom:var(--hz-s3)}
.hz-devonly{margin-top:var(--hz-s6);padding-top:var(--hz-s5);border-top:1px dashed #B08D3F}

/* ---------- Editorial page hero (video-led) ---------- */
.hz-editorial{position:relative;min-height:min(62svh,560px);display:grid;align-items:end;overflow:hidden}
.hz-editorial__media{position:absolute;inset:0}
.hz-editorial__media video{width:100%;height:100%;object-fit:cover}
.hz-editorial__media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(34 34 23/.05) 0%,rgb(34 34 23/.15) 45%,rgb(250 248 245/.94) 100%)}
.hz-editorial__copy{position:relative;z-index:1;padding-block:var(--hz-s8) var(--hz-s7);max-width:38rem}
@media (prefers-reduced-motion: reduce){.hz-editorial__media video{display:none}}

/* ---------- PDP gallery ---------- */
.hz-gallery__main img{width:100%;border-radius:var(--hz-radius);background:var(--hz-surface-alt)}
.hz-gallery__video{margin:var(--hz-s4) 0 0}
.hz-gallery__video video{width:100%;border-radius:var(--hz-radius);background:var(--hz-ink);display:block}
.hz-gallery__video figcaption{font-size:var(--hz-step--1);color:var(--hz-text-muted);padding-top:var(--hz-s2)}

/* ---------- Product card: whole card opens the PDP, CTA opens TikTok ---------- */
.hz-card{position:relative}
.hz-card__link{text-decoration:none;color:inherit}
/* stretched link — large accessible hit area covering the card, but NOT the CTA */
.hz-card__link::after{content:'';position:absolute;inset:0;z-index:1;border-radius:var(--hz-radius)}
.hz-card__link:focus-visible::after{outline:2px solid var(--hz-botanical);outline-offset:4px}
.hz-card__cta{position:relative;z-index:2}       /* sits above the stretched link */
.hz-card:hover .hz-card__name{text-decoration:underline;text-underline-offset:.22em}
.hz-stock--out{color:var(--hz-olive);font-weight:700}

/* Owner founder hero: the founder is CENTRED in this footage (unlike the H2 clip,
   which framed her right). Keep the crop centred or she is cropped out; the scrim
   carries the headline instead of relying on empty space. */
.hz-hero__vid--desk,.hz-hero__vid.is-desk{object-position:56% center}
@media(min-width:1100px){.hz-hero__vid--desk,.hz-hero__vid.is-desk{object-position:60% center}}
.hz-hero__vid--mob,.hz-hero__vid.is-mob{object-position:50% 30%}
/* Stronger scrim, because the subject now sits behind the headline area. */
/* Scrim: opaque enough on the left for AA headline contrast, then clears quickly so
   the footage keeps its warmth on the right. */
.hz-hero__media--video::after{content:'';position:absolute;inset:0;
  background:linear-gradient(98deg,rgb(250 248 245/.96) 0%,rgb(250 248 245/.88) 26%,
  rgb(250 248 245/.42) 48%,rgb(250 248 245/.06) 72%,rgb(250 248 245/0) 100%)}
@media(max-width:760px){.hz-hero__media--video::after{
  background:linear-gradient(180deg,rgb(250 248 245/.25) 0%,rgb(250 248 245/.82) 48%,rgb(250 248 245/.98) 74%)}}

/* ---------- Real Hepzora logo (supplied asset, proportions preserved) ---------- */
.hz-logo{height:42px;width:auto;display:block}
@media(min-width:768px){.hz-logo{height:56px}}
@media(min-width:1100px){.hz-logo{height:64px}}
.hz-logo--sm{height:22px;width:auto}
.hz-header__brand{display:inline-flex;align-items:center;text-decoration:none}
.hz-footer__brand{margin:0 0 var(--hz-s3)}
/* The logo artwork is dark; on the dark footer it needs inverting to stay legible */
-hz-unused{}
.hz-logo--footer{height:52px;filter:invert(1) brightness(1.9) saturate(.35)}

/* ---------- Guide preview carousel ---------- */
.hz-car{position:relative}
.hz-car__track{display:flex;gap:var(--hz-s5);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:0;padding-bottom:var(--hz-s3);
  scrollbar-width:none;-ms-overflow-style:none}
.hz-car__track::-webkit-scrollbar{display:none}
.hz-car__track:focus-visible{outline:2px solid var(--hz-botanical);outline-offset:6px;border-radius:var(--hz-radius)}
.hz-car__slide{flex:0 0 86%;scroll-snap-align:start;margin:0;border-radius:var(--hz-radius);
  overflow:hidden;background:var(--hz-surface-alt);box-shadow:var(--hz-shadow-soft)}
@media(min-width:640px){.hz-car__slide{flex-basis:60%}}
@media(min-width:960px){.hz-car__slide{flex-basis:42%}}
@media(min-width:1280px){.hz-car__slide{flex-basis:34%}}
.hz-car__slide img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:contain;background:#fff}
.hz-car__ui{display:flex;align-items:center;gap:var(--hz-s4);margin-top:var(--hz-s5)}
.hz-car__btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--hz-border);
  background:var(--hz-white);color:var(--hz-ink);font-size:1rem;cursor:pointer;
  display:grid;place-items:center;transition:border-color 200ms var(--hz-ease),background 200ms var(--hz-ease)}
.hz-car__btn:hover:not(:disabled){border-color:var(--hz-botanical);background:var(--hz-surface-alt)}
.hz-car__btn:disabled{opacity:.32;cursor:default}
.hz-car__dots{display:flex;gap:var(--hz-s2);flex:1;justify-content:center}
.hz-car__dot{width:8px;height:8px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:var(--hz-border);transition:background 260ms var(--hz-ease),transform 260ms var(--hz-ease)}
.hz-car__dot.is-on{background:var(--hz-botanical);transform:scale(1.4)}
@media (prefers-reduced-motion: reduce){.hz-car__track{scroll-behavior:auto}}

/* ---------- PDP benefits ---------- */
.hz-benefits{list-style:none;padding:0;margin:0}
.hz-benefits li{position:relative;padding-left:1.4em;padding-block:.3rem}
.hz-benefits li::before{content:'';position:absolute;left:0;top:.85em;width:6px;height:6px;
  border-radius:50%;background:var(--hz-botanical)}

/* Split variants + section-level disclaimer placement */
.hz-split--portrait{align-items:center}
@media(min-width:900px){.hz-split--portrait{grid-template-columns:.62fr 1fr}}
.hz-figure--vertical video{aspect-ratio:9/16;max-height:70svh}
.hz-figure--square img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:var(--hz-radius)}
.hz-disclaimer--section{margin-top:var(--hz-s6);padding-top:var(--hz-s5);
  border-top:1px solid var(--hz-border);border-left:0;padding-left:0;
  font-size:var(--hz-step--1);opacity:.85;max-width:60ch}

/* Admin money field: GBP in, pence stored */
.hz-adm__money{display:flex;align-items:center;gap:.35rem;border:1px solid var(--hz-border);
  border-radius:var(--hz-radius);background:var(--hz-white);padding-left:.7rem}
.hz-adm__money span{color:var(--hz-text-muted);font-weight:600}
.hz-adm__money input{border:0!important;padding-left:0!important;background:transparent}
.hz-adm__money:focus-within{border-color:var(--hz-botanical)}
.hz-adm__pct.is-feat{background:#E4EEE0;color:#2F4B25}
.hz-adm__members{max-height:230px;overflow:auto;border:1px solid var(--hz-border);
  border-radius:var(--hz-radius);background:var(--hz-white)}
.hz-adm__members table{width:100%;border-collapse:collapse;font-size:var(--hz-step--1)}
.hz-adm__members th{position:sticky;top:0;background:var(--hz-surface-alt);text-align:left;
  padding:.5rem .7rem;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--hz-text-muted)}
.hz-adm__members td{padding:.45rem .7rem;border-top:1px solid var(--hz-border)}

/* Split with no media: centre the single column rather than leaving a hole */
.hz-split--single{grid-template-columns:minmax(0,1fr)!important;max-width:44rem}

/* Secondary tax note under a price — deliberately quiet */
.hz-price__tax{font-size:.78rem;color:var(--hz-text-muted);opacity:.85;margin-top:.35rem}

/* Journey qualification: short line under the section, fuller note as small-print */
.hz-journey__note{font-size:var(--hz-step--1);color:var(--hz-text-muted);
  margin-top:var(--hz-s6);max-width:62ch}
.hz-smallprint{font-size:.72rem;line-height:1.55;color:var(--hz-text-muted);opacity:.72;
  margin-top:var(--hz-s4);padding-top:var(--hz-s4);border-top:1px solid var(--hz-border);max-width:70ch}

.hz-footer__legalnav{display:flex;flex-wrap:wrap;gap:var(--hz-s4);font-size:var(--hz-step--1)}
.hz-pending{background:#F7E9CE;border:1px dashed #B08D3F;color:#4A3708;
  padding:var(--hz-s5);border-radius:var(--hz-radius);margin-block:var(--hz-s4)}

.hz-adm__gallery{display:flex;gap:var(--hz-s3);flex-wrap:wrap;margin-bottom:var(--hz-s4)}
.hz-adm__gallery figure{margin:0;width:110px}
.hz-adm__gallery img,.hz-adm__gallery video{width:110px;height:82px;object-fit:cover;
  border-radius:var(--hz-radius);background:var(--hz-surface-alt);display:block}
.hz-adm__gallery figcaption{font-size:.65rem;color:var(--hz-text-muted);margin-top:.25rem;
  letter-spacing:.04em;text-transform:uppercase}

/* Not-found state for a mistyped or retired product URL. */
.hz-empty{padding:var(--hz-s7) 0;max-width:38rem}
.hz-empty h1{margin-bottom:var(--hz-s3)}
.hz-empty__actions{display:flex;gap:var(--hz-s3);flex-wrap:wrap;margin-top:var(--hz-s5)}

/* ============================================================
   MOBILE NAVIGATION — hamburger + slide-out drawer
   Desktop keeps the horizontal nav; the drawer is mobile only.
   ============================================================ */
.hz-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:0 11px;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.hz-burger span{display:block;height:2px;width:100%;background:var(--hz-ink);
  border-radius:2px;transition:transform .28s ease,opacity .2s ease}
.hz-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hz-burger.is-open span:nth-child(2){opacity:0}
.hz-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hz-burger:focus-visible{outline:2px solid var(--hz-ink);outline-offset:2px;border-radius:6px}

.hz-scrim{position:fixed;inset:0;background:rgba(20,20,16,.44);z-index:78;
  opacity:0;pointer-events:none;transition:opacity .3s ease}
body.hz-noscroll{overflow:hidden}
body.hz-noscroll .hz-scrim{opacity:1;pointer-events:auto}

.hz-drawer{position:fixed;top:0;right:0;bottom:0;width:min(88vw,380px);z-index:80;
  background:var(--hz-cream);display:flex;flex-direction:column;
  padding:var(--hz-s5) var(--hz-s5) var(--hz-s7);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(101%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow:-18px 0 44px rgba(20,20,16,.16);visibility:hidden}
.hz-drawer.is-open{transform:translateX(0);visibility:visible}
@media (prefers-reduced-motion: reduce){
  .hz-drawer{transition:none}.hz-scrim{transition:none}.hz-burger span{transition:none}}

.hz-drawer__top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--hz-s5)}
.hz-logo--drawer{height:44px;width:auto}
.hz-drawer__close{width:46px;height:46px;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;border-radius:50%}
.hz-drawer__close svg,.hz-drawer__toggle svg{width:22px;height:22px;fill:none;
  stroke:var(--hz-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hz-drawer__close:focus-visible,.hz-drawer__toggle:focus-visible{
  outline:2px solid var(--hz-ink);outline-offset:2px}

.hz-drawer__cta{width:100%;justify-content:center;text-align:center;
  margin-bottom:var(--hz-s5);min-height:52px;font-size:.86rem}

.hz-drawer__nav{display:flex;flex-direction:column}
.hz-drawer__link{display:block;padding:var(--hz-s4) 0;text-decoration:none;
  color:var(--hz-ink);font-family:var(--hz-font-heading);font-size:1.12rem;
  line-height:1.3;border-bottom:1px solid var(--hz-rule)}
.hz-drawer__link:hover{color:var(--hz-accent-deep)}
.hz-drawer__group{border-bottom:1px solid var(--hz-rule)}
.hz-drawer__grouphead{display:flex;align-items:center;justify-content:space-between}
.hz-drawer__grouphead .hz-drawer__link{flex:1;border-bottom:0}
.hz-drawer__toggle{width:48px;height:48px;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;flex:0 0 auto;border-radius:50%}
.hz-drawer__toggle svg{transition:transform .25s ease}
.hz-drawer__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.hz-drawer__sub{list-style:none;margin:0;padding:0 0 var(--hz-s3) var(--hz-s4)}
.hz-drawer__sub a{display:block;padding:.62rem 0;text-decoration:none;
  color:var(--hz-text-muted);font-size:.95rem}
.hz-drawer__sub a:hover{color:var(--hz-ink)}

.hz-footer__cta{margin-top:var(--hz-s5);display:inline-flex}

/* The drawer and burger exist only below the desktop nav breakpoint. */
@media (max-width: 899px){
  .hz-burger{display:flex}
}
@media (min-width: 900px){
  .hz-drawer,.hz-scrim{display:none}
  .hz-header__cta{display:inline-flex}
}

/* Admin: save feedback and legal-section editing */
.hz-adm__toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);
  background:var(--hz-ink);color:var(--hz-cream);padding:.75rem 1.15rem;border-radius:8px;
  font-size:.9rem;z-index:200;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  box-shadow:0 10px 30px rgba(0,0,0,.22);max-width:min(92vw,32rem);text-align:center}
.hz-adm__toast.is-on{opacity:1;transform:translate(-50%,0)}
.hz-adm__toast.is-bad{background:#7a2723}
.hz-adm__sec{border:1px solid var(--hz-rule);border-radius:8px;padding:var(--hz-s4);
  margin-bottom:var(--hz-s4);background:rgba(255,255,255,.5)}
.hz-adm__actions{display:flex;gap:var(--hz-s3);flex-wrap:wrap;margin-top:var(--hz-s3)}
.hz-adm__badges{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.hz-adm__pill{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.22rem .5rem;border-radius:99px;background:var(--hz-rule);white-space:nowrap}
.hz-adm__pill--ok{background:#dfe7d4;color:#33421f}
.hz-adm__pill--warn{background:#f2e3c9;color:#6a4a12}
.hz-adm__pill--gap{background:#f3d9d5;color:#7a2723}
.hz-adm__hint{display:block;font-size:.78rem;color:var(--hz-text-muted);margin-top:.35rem;
  line-height:1.45}
.hz-adm__f--wide{grid-column:1/-1}

/* Legal pages — long-form reading measure */
.hz-legal__sec{margin-top:var(--hz-s6)}
.hz-legal__sec h2{font-size:var(--hz-step-1);margin-bottom:var(--hz-s3)}
.hz-legal__sec p{margin-bottom:var(--hz-s3);max-width:36rem}
.hz-legal .hz-lede{max-width:36rem}

/* Feature block: full-width media with the write-up beneath it.
   Used where the film should lead rather than sit beside the copy. */
.hz-feature{display:flex;flex-direction:column;gap:var(--hz-s6);align-items:center}
.hz-feature__media{margin:0;width:100%;max-width:64rem;border-radius:var(--hz-radius);
  overflow:hidden;background:var(--hz-rule)}
.hz-feature__media video{display:block;width:100%;height:auto}
.hz-feature__body{max-width:44rem;width:100%;text-align:left}
@media (min-width: 900px){ .hz-feature__body{text-align:center} }
@media (prefers-reduced-motion: reduce){ .hz-feature__media video{display:none} }

/* Hero positioning line — sits between headline and supporting copy. */
.hz-hero__position{font-family:var(--hz-font-heading);font-size:var(--hz-step-1);
  line-height:1.3;margin-top:var(--hz-s4);max-width:30rem;color:var(--hz-accent-deep)}
.hz-hero__content .hz-lede{margin-top:var(--hz-s4);max-width:34rem}
@media (max-width: 767px){
  .hz-hero__position{font-size:1.05rem;margin-top:var(--hz-s3)}
  .hz-hero__content .hz-lede{font-size:.98rem;line-height:1.6}
}

/* Assessment reference diagrams (authored SVG, no photography). */
.hz-opt--art{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.4rem;padding-top:var(--hz-s4)}
.hz-opt__art{display:block;width:100%;max-width:104px;margin:0 auto}
.hz-optsvg{display:block;width:100%;height:auto;aspect-ratio:1/1}
.hz-opt--art .hz-opt__label{font-weight:600}
.hz-opt--art .hz-opt__hint{font-size:.78rem;line-height:1.4}
.hz-opt.is-on .hz-optsvg{opacity:1}
.hz-optsvg{opacity:.88;transition:opacity .2s ease}
.hz-opt:hover .hz-optsvg{opacity:1}
@media (max-width: 559px){ .hz-opt__art{max-width:78px} }

/* Visual options read better two-up on a phone than one enormous card each. */
@media (max-width: 559px){
  .hz-opts--visual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hz-s3)}
  .hz-opts--visual .hz-opt{padding:var(--hz-s3)}
  .hz-opts--visual .hz-opt__label{font-size:.86rem;line-height:1.3}
  .hz-opt__art{max-width:88px}
}

/* ============================================================
   HEADER LAYOUT
   Mobile: hamburger left · logo centred · nothing right.
   The third grid column is an empty counterweight the same width as the
   burger, so the logo is optically centred rather than merely "middle-ish".
   ============================================================ */
@media (max-width: 899px){
  .hz-header__inner{display:grid;grid-template-columns:48px 1fr 48px;
    align-items:center;gap:var(--hz-s3);min-height:74px}
  .hz-header__inner::after{content:'';display:block}   /* right counterweight */
  .hz-burger{grid-column:1;justify-self:start}
  .hz-header__brand{grid-column:2;justify-self:center;display:flex;align-items:center}
  .hz-header .hz-nav,.hz-header__cta{display:none}
  .hz-logo{height:50px;width:auto}
}
@media (min-width: 900px){
  .hz-header__inner{display:flex;align-items:center;gap:var(--hz-s5)}
  .hz-header__brand{order:1}
  .hz-nav{order:2;margin-left:auto}
  .hz-header__cta{order:3}
  .hz-burger{display:none}
}

/* At the 900–1100px band the nav and CTA together are tight enough that the
   header CTA wrapped to two lines and inflated the header. Tighten the nav gap
   and keep the CTA on one line through that band. */
@media (min-width:900px) and (max-width:1100px){
  .hz-nav{gap:var(--hz-s4)}
  .hz-header__cta{white-space:nowrap;padding-inline:var(--hz-s4);font-size:.82rem}
}

/* Destructive admin action — visually distinct from ordinary secondary buttons. */
.hz-btn--danger{background:transparent;color:#7a2723;border:1px solid #c9a5a0}
.hz-btn--danger:hover{background:#7a2723;color:var(--hz-cream);border-color:#7a2723}

/* Admin stat cards: the global `overflow-wrap:break-word` on <p> split labels
   mid-word ("Product s") once the grid cells got narrow. Labels are short —
   let the grid give them room instead of breaking them. */
.hz-adm__statl{overflow-wrap:normal;word-break:keep-all;hyphens:none;
  font-size:var(--hz-step--1);color:var(--hz-text-muted);letter-spacing:.04em}
.hz-adm__statn{font-family:var(--hz-font-heading);font-size:var(--hz-step-3);line-height:1.1}
.hz-adm__stats{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}

/* The footer CTA sat as botanical #2F4B25 on the near-black footer — only a
   1.63:1 edge, so the button barely read as a button. The muted olive gives
   3.22:1 against the footer (passes the 3:1 UI-component minimum) and keeps
   cream text at 4.80:1. */
.hz-footer .hz-footer__cta{background:var(--hz-surface-editorial);color:var(--hz-cream)}
.hz-footer .hz-footer__cta:hover{background:var(--hz-surface-deep)}

/* ============================================================
   FEATURED CAMPAIGN WAITLIST — homepage band
   Sits after the reviews and before the final CTA. Renders only when the
   owner has featured a campaign; otherwise the section does not exist.
   ============================================================ */
.hz-fw__inner{display:grid;gap:var(--hz-s6);align-items:center}
@media (min-width:900px){
  .hz-fw__inner{grid-template-columns:1.05fr .95fr;gap:var(--hz-s8)}
  .hz-fw__inner--single{grid-template-columns:minmax(0,42rem);justify-content:center;text-align:center}
  .hz-fw__inner--single .hz-fw__form{justify-content:center}
}
.hz-fw__body{min-width:0}
.hz-fw__media{margin:0;border-radius:var(--hz-radius);overflow:hidden;background:rgb(255 255 255 / .08)}
.hz-fw__media img,.hz-fw__media video{display:block;width:100%;height:auto}
@media (prefers-reduced-motion: reduce){ .hz-fw__media video{display:none} }

.hz-fw__form{display:flex;flex-wrap:wrap;gap:var(--hz-s3);margin-top:var(--hz-s5)}
.hz-fw__input{flex:1 1 15rem;min-width:0;padding:.9rem 1rem;border-radius:var(--hz-radius);
  border:1px solid rgb(250 248 245 / .45);background:rgb(250 248 245 / .1);
  color:var(--hz-cream);font:inherit;font-size:1rem;min-height:52px}
.hz-fw__input::placeholder{color:rgb(250 248 245 / .7)}
.hz-fw__input:focus{outline:2px solid var(--hz-cream);outline-offset:2px;
  background:rgb(250 248 245 / .16)}
.hz-fw__cta{flex:0 0 auto;min-height:52px}
@media (max-width:559px){ .hz-fw__cta{flex:1 1 100%;justify-content:center;text-align:center} }

.hz-fw__msg{margin-top:var(--hz-s3);min-height:1.4em;font-size:.95rem}
.hz-fw__msg.is-ok{color:var(--hz-cream);font-weight:600}
.hz-fw__msg.is-bad{color:#F6D9D4}
.hz-fw__note{margin-top:var(--hz-s3);color:rgb(250 248 245 / .72)}

/* Identity step + inline fields in the assessment */
.hz-q--identity{display:block}
.hz-field{display:block;margin-top:var(--hz-s5)}
.hz-field__label{display:block;font-weight:600;margin-bottom:var(--hz-s2);font-size:1rem}
.hz-field__input{width:100%;max-width:26rem;padding:.85rem 1rem;font:inherit;font-size:1rem;
  border:1px solid var(--hz-rule);border-radius:var(--hz-radius);background:var(--hz-white);
  min-height:52px}
.hz-field__input:focus{outline:2px solid var(--hz-botanical);outline-offset:1px;
  border-color:var(--hz-botanical)}
.hz-field__hint{display:block;font-size:.85rem;color:var(--hz-text-muted);margin-top:.4rem;
  line-height:1.5;max-width:30rem}
.hz-field__err{color:#7a2723;font-weight:600;margin-top:var(--hz-s3);min-height:1.3em}
.hz-field--inset{margin-top:var(--hz-s6);padding-top:var(--hz-s5);
  border-top:1px solid var(--hz-rule)}
.hz-whofor{display:flex;gap:var(--hz-s3);flex-wrap:wrap;margin-top:var(--hz-s3)}
.hz-opt--slim{flex:1 1 12rem;padding:var(--hz-s3) var(--hz-s4);text-align:center;min-height:52px;
  display:flex;align-items:center;justify-content:center}

/* Personal address line at the top of a delivered routine */
.hz-routine__addressed{font-size:var(--hz-step-0);color:var(--hz-text-muted);
  margin-bottom:var(--hz-s5);max-width:36rem}

/* Admin: new-product form and media block */
.hz-newprod{border:1px solid var(--hz-botanical);border-radius:var(--hz-radius);
  padding:var(--hz-s5);background:var(--hz-white);margin-bottom:var(--hz-s5)}
.hz-adm__media{border:1px solid var(--hz-rule);border-radius:8px;padding:var(--hz-s4);
  display:grid;gap:var(--hz-s4)}
@media(min-width:760px){.hz-adm__media{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hz-adm__media legend{font-weight:700;padding:0 .4rem}

/* Print-only blocks are invisible on screen; app/styles/print.css reveals them. */
.hz-print-cover,.hz-print-footer{display:none}

/* THE MARK, ON SCREEN.
   The routine, plan and tracker pages carry no site header — they are a
   private document rather than a browsable page — so without this the only
   Hepzora logo on them was the one inside the print-only cover, and the
   customer saw the brand appear for the first time in their print preview.
   Print hides it again, because the printed cover carries its own. */
.hz-doc__logo{display:block;height:auto;width:150px;max-width:60%;
  margin:0 0 var(--hz-s4)}
@media(min-width:768px){.hz-doc__logo{width:180px}}

/* ============================================================
   ANNOUNCEMENT STRIP
   One site-wide message, owner-controlled. Brand palette and a quiet weight —
   the owner asked for noticeable, not a flashing sale bar. It is prepended to
   <body>, so it needs no reserved space when absent: nothing is inserted and
   nothing shifts.
   ============================================================ */
.hz-announce{background:var(--hz-olive);color:var(--hz-cream);
  padding:var(--hz-s3) var(--hz-s4);text-align:center}
.hz-announce__msg{margin:0;font-size:var(--hz-step--1);line-height:1.45;
  letter-spacing:.02em;max-width:60rem;margin-inline:auto}
@media(min-width:768px){.hz-announce__msg{font-size:var(--hz-step-0)}}

/* ============================================================
   CONSENT BANNER
   Renders only when a non-essential script has been registered. No such
   script exists today, so this is currently unused by design.
   "Reject all" is styled identically to "Accept all" — under UK PECR
   refusing must be as easy as accepting, so it is not a quiet ghost button.
   ============================================================ */
.hz-consent{position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--hz-cream);border-top:2px solid var(--hz-surface-deep);
  box-shadow:0 -10px 40px rgba(20,20,16,.16);padding:var(--hz-s5) 0}
.hz-consent__inner{max-width:64rem;margin:0 auto;padding:0 var(--hz-s5);
  display:grid;gap:var(--hz-s5)}
@media(min-width:900px){.hz-consent__inner{grid-template-columns:1.6fr auto;align-items:center}}
.hz-consent__title{font-family:var(--hz-font-heading);font-size:var(--hz-step-1);
  margin-bottom:var(--hz-s2)}
.hz-consent__text{font-size:.95rem;line-height:1.6;max-width:42rem}
.hz-consent__actions{display:flex;gap:var(--hz-s3);flex-wrap:wrap;align-items:center}
.hz-consent__actions .hz-btn{flex:1 1 auto;min-height:48px;justify-content:center;
  text-align:center;white-space:nowrap}
.hz-consent__cats{margin-top:var(--hz-s4);display:grid;gap:var(--hz-s3)}
.hz-consent__cat{display:flex;gap:var(--hz-s3);align-items:flex-start;
  font-size:.9rem;line-height:1.5}
.hz-consent__cat input{margin-top:.25rem;width:20px;height:20px;flex:0 0 auto}
.hz-consent__catdesc{color:var(--hz-text-muted);font-size:.85rem}
@media(max-width:559px){
  .hz-consent__actions{flex-direction:column;align-items:stretch}
  .hz-consent__actions .hz-btn{width:100%}
}
@media print{ .hz-consent{display:none!important} }

/* Shown when a routine cannot be found in this browser. */
.hz-statusnote{max-width:38rem;padding:var(--hz-s7) 0}
.hz-statusnote h1{margin-bottom:var(--hz-s4)}
.hz-statusnote p{margin-bottom:var(--hz-s4)}

/* ============================================================
   ADMIN SIGN-IN
   Replaces the page body until the server confirms a session, so no
   management interface renders before authentication. Deliberately plain:
   this screen exists to be typed into, not looked at.
   ============================================================ */
.hz-login {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--hz-s5);
  background: var(--hz-cream);
}
.hz-login__form {
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  gap: var(--hz-s3);
}
.hz-login__eyebrow {
  font-size: var(--hz-step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hz-olive);
  margin: 0;
}
.hz-login__title {
  font-family: var(--hz-font-heading);
  font-size: var(--hz-step-3);
  margin: 0 0 var(--hz-s2);
}
.hz-login__hint {
  font-size: var(--hz-step--1);
  color: var(--hz-text-subtle);
  margin: 0;
}
.hz-login__field { display: flex; flex-direction: column; gap: var(--hz-s1); }
.hz-login__label {
  font-size: var(--hz-step--1);
  font-weight: 600;
  letter-spacing: .04em;
}
.hz-login__input {
  font: inherit;
  padding: var(--hz-s2) var(--hz-s3);
  border: 1px solid var(--hz-rule);
  border-radius: 3px;
  background: #fff;
  color: var(--hz-ink);
}
.hz-login__input:focus-visible {
  outline: 2px solid var(--hz-olive);
  outline-offset: 1px;
  border-color: var(--hz-olive);
}
.hz-login__error {
  font-size: var(--hz-step--1);
  color: #7A2723;
  background: #F7E4E2;
  border: 1px solid #7A2723;
  border-radius: 3px;
  padding: var(--hz-s2) var(--hz-s3);
  margin: 0;
}
.hz-login__submit { margin-top: var(--hz-s2); }
.hz-login__link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--hz-step--1);
  color: var(--hz-olive);
  text-decoration: underline;
  cursor: pointer;
  align-self: center;
}
.hz-adm__who {
  align-self: center;
  font-size: var(--hz-step--1);
  color: var(--hz-cream);
  opacity: .85;
}

/* ---------- 30-Day Challenge: a calendar, not a summary ---------- */
.hz-plan__lede{font-size:var(--hz-step-0);color:var(--hz-text-subtle);margin:0 0 var(--hz-s5)}
.hz-plan__wk{margin-bottom:var(--hz-s6)}
.hz-plan__wkhead{border-left:3px solid var(--hz-olive);padding-left:var(--hz-s3);margin-bottom:var(--hz-s4)}
.hz-plan__note{font-size:var(--hz-step--1);color:var(--hz-text-subtle);margin:var(--hz-s1) 0 0;max-width:44rem}
.hz-plan__days{list-style:none;margin:0;padding:0;display:grid;gap:var(--hz-s2)}
.hz-plan__day{border:1px solid var(--hz-rule);border-radius:3px;padding:var(--hz-s3);
  display:grid;grid-template-columns:5.5rem 1fr;gap:var(--hz-s3);align-items:start}
.hz-plan__day--wash{border-left:3px solid var(--hz-olive);background:color-mix(in srgb,var(--hz-botanical) 4%,transparent)}
.hz-plan__day--rest{opacity:.72}
.hz-plan__daynum{font-size:var(--hz-step--1);letter-spacing:.08em;text-transform:uppercase;
  color:var(--hz-olive);margin:0;font-weight:700}
.hz-plan__daytitle{font-weight:700;margin:0;grid-column:2}
.hz-plan__acts{grid-column:2;margin:var(--hz-s1) 0 0;padding-left:1.1rem;
  font-size:var(--hz-step--1);color:var(--hz-ink)}
.hz-plan__acts li{margin-bottom:.25rem}
@media (max-width:600px){
  .hz-plan__day{grid-template-columns:1fr}
  .hz-plan__daytitle,.hz-plan__acts{grid-column:1}
}

/* ---------- Routine document: opening, snapshot, noticed, coaching ---------- */
.hz-intro__greet{font-family:var(--hz-font-heading);font-size:var(--hz-step-2);margin:0 0 var(--hz-s3)}
.hz-intro p{max-width:42rem}
.hz-snap{list-style:none;padding:0;margin:0;display:grid;gap:var(--hz-s2)}
.hz-snap li{display:grid;grid-template-columns:11rem 1fr;gap:var(--hz-s3);
  padding-bottom:var(--hz-s2);border-bottom:1px solid var(--hz-rule-faint,#E2DFD8)}
.hz-snap__k{font-size:var(--hz-step--1);letter-spacing:.05em;text-transform:uppercase;color:var(--hz-text-subtle)}
.hz-snap__v{font-weight:600}
.hz-snap__n{grid-column:2;font-size:var(--hz-step--1);color:var(--hz-text-subtle)}
.hz-noticed{margin:0 0 var(--hz-s4);padding-left:1.2rem;max-width:44rem}
.hz-noticed li{margin-bottom:var(--hz-s2)}
.hz-noticed__close{max-width:44rem;font-weight:600}
.hz-check{border-left:3px solid var(--hz-olive);background:color-mix(in srgb,var(--hz-botanical) 5%,transparent);
  padding:var(--hz-s3);border-radius:0 3px 3px 0;margin:0 0 var(--hz-s3);max-width:44rem}
.hz-check__t{font-size:var(--hz-step--1);letter-spacing:.06em;text-transform:uppercase;
  color:var(--hz-olive);font-weight:700;margin:0 0 var(--hz-s1)}
.hz-check__n{font-size:var(--hz-step--1);color:var(--hz-text-subtle);margin:var(--hz-s1) 0 0}
.hz-trouble{margin:0;max-width:46rem}
.hz-trouble dt{font-weight:700;margin-top:var(--hz-s3)}
.hz-trouble dd{margin:var(--hz-s1) 0 0 0;color:var(--hz-text-subtle)}
@media (max-width:600px){.hz-snap li{grid-template-columns:1fr}.hz-snap__n{grid-column:1}}

/* ---------- Document 2: the weekly journal (printable tracker) ---------- */
.hz-journal{max-width:44rem;margin:0 auto;padding:var(--hz-s6) var(--hz-s4) var(--hz-s9)}
.hz-jr__brand{font-size:var(--hz-step--1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--hz-olive);margin:0 0 var(--hz-s2)}
.hz-jr__head h1{font-family:var(--hz-font-heading);font-size:var(--hz-step-3);margin:0 0 var(--hz-s3)}
.hz-jr__intro,.hz-jr__how{max-width:38rem;color:var(--hz-text-subtle)}
.hz-jr__how{font-size:var(--hz-step--1)}
.hz-jr__week{border-top:1.5px solid var(--hz-olive);padding-top:var(--hz-s4);margin-top:var(--hz-s6)}
.hz-jr__week h2{font-family:var(--hz-font-heading);font-size:var(--hz-step-2);margin:0 0 var(--hz-s2)}
.hz-jr__check{font-style:italic;color:var(--hz-text-subtle);max-width:38rem;margin:0 0 var(--hz-s4)}
.hz-jr__scales{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--hz-s2) var(--hz-s5);margin-bottom:var(--hz-s4)}
@media(max-width:560px){.hz-jr__scales{grid-template-columns:1fr}}
.hz-jr__scale{display:flex;justify-content:space-between;align-items:center;gap:var(--hz-s3);
  border-bottom:1px solid var(--hz-rule-faint,#E2DFD8);padding-bottom:var(--hz-s2)}
.hz-jr__scalelabel{font-weight:600}
.hz-jr__nums{display:flex;gap:var(--hz-s2)}
.hz-jr__nums b{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;
  border:1px solid var(--hz-rule,#C9C6BC);border-radius:50%;font-weight:400}
.hz-jr__prompt{margin-bottom:var(--hz-s4)}
.hz-jr__plabel{font-weight:600;margin:0 0 var(--hz-s2)}
.hz-jr__lines{display:grid;gap:1.5rem}
.hz-jr__lines span{display:block;border-bottom:1px solid var(--hz-rule,#C9C6BC);height:1px}
.hz-jr__foot{margin-top:var(--hz-s6);border-top:1px solid var(--hz-rule,#C9C6BC);padding-top:var(--hz-s4)}

/* ---------- cadence chips, priorities, subsections (blueprint layout) ---------- */
.hz-chips{display:flex;flex-wrap:wrap;gap:var(--hz-s2);margin:0 0 var(--hz-s3)}
.hz-chip{background:var(--hz-olive-soft,#EDEFE4);color:var(--hz-olive);font-size:var(--hz-step--1);
  font-weight:700;padding:.3em .75em;border-radius:2px;letter-spacing:.02em}
.hz-subhead{font-family:var(--hz-font-heading);font-weight:600;font-size:var(--hz-step-1);
  margin:var(--hz-s5) 0 var(--hz-s2)}
.hz-priorities2{counter-reset:pr;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--hz-s3)}
.hz-priorities2 li{counter-increment:pr;position:relative;padding-left:2.4rem}
.hz-priorities2 li::before{content:counter(pr);position:absolute;left:0;top:-1px;width:1.6rem;height:1.6rem;
  border:1px solid var(--hz-olive);border-radius:50%;display:grid;place-items:center;
  font-family:var(--hz-font-heading);font-size:.8rem;color:var(--hz-olive);font-weight:600}
.hz-priorities2 b{display:block;font-weight:700}
.hz-priorities2 span{color:var(--hz-text-subtle);font-size:var(--hz-step--1)}
.hz-steps2--n{counter-reset:st}
.hz-steps2--n .hz-step{counter-increment:st;position:relative;padding-left:2.6rem}
.hz-steps2--n .hz-step::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:var(--hz-s5);
  font-family:var(--hz-font-heading);font-size:var(--hz-step-1);color:var(--hz-olive);font-weight:600}

/* ---------- Document 2: the 30-Day Plan calendar ---------- */
.hz-plandoc{max-width:48rem;margin:0 auto;padding:var(--hz-s6) var(--hz-s4) var(--hz-s9)}
.hz-cal__head h1{font-family:var(--hz-font-heading);font-size:var(--hz-step-3);margin:.3em 0 .5em}
.hz-cal__key{list-style:none;display:flex;gap:var(--hz-s4);padding:0;margin:var(--hz-s3) 0 0;
  font-size:var(--hz-step--1);color:var(--hz-text-subtle)}
.hz-cal__key li{display:flex;align-items:center;gap:.4em}
.hz-cal__swatch{display:inline-block;width:.7rem;height:.7rem;border-radius:2px}
.hz-cal__swatch--wash{background:var(--hz-olive)}
.hz-cal__swatch--rest{background:var(--hz-olive-soft,#EDEFE4);border:1px solid var(--hz-olive)}
.hz-cal__swatch--care{background:transparent;border:1px solid var(--hz-rule,#C9C6BC)}
.hz-cal__page{margin-top:var(--hz-s6)}
.hz-cal__weekhead{display:flex;justify-content:space-between;align-items:baseline;
  margin:var(--hz-s5) 0 var(--hz-s2);font-size:var(--hz-step--1);letter-spacing:.06em;
  text-transform:uppercase;color:var(--hz-text-subtle)}
.hz-cal__weekhead span:first-child{color:var(--hz-olive);font-weight:700}
.hz-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem}
.hz-cal__day{border:1px solid var(--hz-rule,#C9C6BC);border-radius:3px;padding:.4rem .35rem;
  min-height:4.6rem;display:flex;flex-direction:column;gap:.25rem}
.hz-cal__n{font-family:var(--hz-font-heading);font-size:.8rem;color:var(--hz-text-subtle);
  font-variant-numeric:tabular-nums}
.hz-cal__act{font-size:.68rem;line-height:1.25;color:var(--hz-ink)}
.hz-cal__day--wash{background:var(--hz-olive-soft,#EDEFE4);border-color:transparent}
.hz-cal__day--wash .hz-cal__n,.hz-cal__day--wash .hz-cal__act{color:var(--hz-olive);font-weight:700}
.hz-cal__day--rest{opacity:.6}
.hz-cal__check{margin-top:var(--hz-s3);padding:var(--hz-s3) var(--hz-s4);border-left:3px solid var(--hz-olive);
  background:color-mix(in srgb,var(--hz-botanical) 5%,transparent);border-radius:0 3px 3px 0}
.hz-cal__check b{display:block;font-size:var(--hz-step--1);letter-spacing:.06em;text-transform:uppercase;
  color:var(--hz-olive);margin-bottom:.2em}
.hz-cal__check p{margin:0}
/* The day-by-day instructions under each week's grid. The grid says what KIND
   of day it is; this says what to do on it. */
.hz-cal__days{list-style:none;margin:var(--hz-s4) 0 0;padding:0;
  display:flex;flex-direction:column;gap:var(--hz-s3)}
.hz-cal__dayrow{padding:var(--hz-s3) 0;border-top:1px solid var(--hz-rule,#C9C6BC)}
.hz-cal__dayhead{margin:0 0 .3em;font-size:var(--hz-step--1);letter-spacing:.04em}
.hz-cal__dayhead b{font-family:var(--hz-font-heading);font-size:var(--hz-step-0);
  letter-spacing:0;margin-right:.5em}
.hz-cal__dayhead span{text-transform:uppercase;letter-spacing:.08em;color:var(--hz-olive)}
.hz-cal__dayrow--wash .hz-cal__dayhead span{font-weight:700}
.hz-cal__dayrow--rest .hz-cal__dayhead span{color:#6B6E55}
.hz-cal__todo{margin:0;padding-left:1.1rem}
.hz-cal__todo li{margin-bottom:.25em;line-height:1.5}

@media (max-width:640px){
  .hz-cal__grid{grid-template-columns:repeat(4,1fr)}
  .hz-cal__act{font-size:.62rem}
}

/* THE SAVE PROMPT.
   The customer's documents live behind one link for 24 months and then stop
   existing. That is worth saying once, clearly, near the top — not in a footer
   at the end of a fifteen-page document. Quiet card rather than an alert: it
   is a reminder, not a warning. */
.hz-save{border:1px solid var(--hz-olive);border-radius:4px;
  background:color-mix(in srgb,var(--hz-botanical) 4%,transparent);
  padding:var(--hz-s5);margin:0 0 var(--hz-s7)}
.hz-save__h{font-family:var(--hz-font-heading);font-size:var(--hz-step-1);
  margin:0 0 var(--hz-s2);color:var(--hz-olive)}
.hz-save__p{margin:0 0 var(--hz-s4);max-width:44rem}
.hz-save__alt{margin:0;font-size:var(--hz-step--1);color:var(--hz-text-subtle)}

/* The "was" price on a launch offer. Quiet — the offer price is the headline,
   and this is the comparison, not a second shout. [hidden] does the hiding, so
   an unset compare-at price leaves no gap on the line. */
.hz-price__was{font-size:var(--hz-step--1);color:var(--hz-text-subtle);margin-inline:.4em}
.hz-price__was s{text-decoration-thickness:from-font}
.hz-price__was[hidden]{display:none}

/* Whether the announcement is actually live, as opposed to merely switched on. */
.hz-adm__state{margin:0 0 var(--hz-s3);font-weight:700}
.hz-adm__state--on{color:var(--hz-botanical)}
.hz-adm__state--off{color:var(--hz-text-subtle)}

/* --- Admin: a payment that took money and delivered nothing ---------------
   Loud on purpose. This should never appear; when it does it outranks
   everything else on the page. */
.hz-adm__alert{background:#FDECEC;border:1px solid #C0392B;border-left:4px solid #C0392B;
  border-radius:4px;padding:var(--hz-s5);margin-bottom:var(--hz-s6)}
.hz-adm__alert h2{color:#8E2A1E;font-size:var(--hz-step-1);margin:0 0 var(--hz-s3)}
.hz-adm__alert p{color:#5C2018;margin:0 0 var(--hz-s4);max-width:60ch}
.hz-adm__alert table{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff}
.hz-adm__alert th,.hz-adm__alert td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid #F0C9C4}
.hz-adm__alert th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#8E2A1E}
.hz-adm__ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700}

/* The plan and tracker are embedded in the routine page for printing only.
   They must never appear on screen — the screen keeps its own pages. */
.hz-doc--plan, .hz-doc--tracker { display: none; }

/* The one thing about printing the page genuinely cannot control: the
   browser's own headers and footers. Said plainly rather than left as a
   surprise on a £30 document. */
.hz-printtip{border-left:3px solid var(--hz-olive);padding-left:var(--hz-s3);
  margin:var(--hz-s4) 0}

/* Four print options, laid out as a row that wraps on a phone. */
.hz-printmenu { display: flex; flex-wrap: wrap; gap: var(--hz-s3); margin: var(--hz-s4) 0; }

/* A value the customer is shown rather than asked for (the delivery address,
   which comes from their payment and is already confirmed). */
.hz-field__static { margin: 0; font-weight: 600; color: var(--hz-ink, #222217); word-break: break-all; }

/* One click from a flagged payment to it in Stripe. A link, never a refund
   button: the restricted key has no Refunds permission and that stays true. */
.hz-adm__stripe { font-size: .8rem; font-weight: 600; white-space: nowrap; }