/* ==========================================================================
   BrightRoutines — site stylesheet v1
   Palette + type follow brand style sheet v6.2 "emerald sunrise".
   Rules kept from the brand sheet:
     emerald talks · amber decorates · tints whisper · ink reads
     sentence case · two weights max · body >= 11pt · >= 1/3 page empty
   ========================================================================== */

:root {
  /* Brand colours (v6.2) */
  --emerald:      #0B6B45;   /* headings, logo core, lines, icons   6.6:1 AA+ */
  --emerald-dark: #085135;   /* hover / pressed states                       */
  --ink:          #2B2E34;   /* body text                          13.6:1 AAA */
  --ink-soft:     #5A5F68;   /* captions, meta                       6.4:1 AA */
  --amber:        #F5A83C;   /* decoration only — never carries words        */
  --coral:        #C75233;   /* warm accent, labels & large text     4.5:1 AA */
  --coral-deep:   #9E3D22;   /* coral that must carry small text     7.0:1 AA */
  --mint-tint:    #D7EEDF;   /* fills only                                   */
  --amber-tint:   #FDEBC8;   /* fills only                                   */
  --coral-tint:   #FBE3DC;   /* fills only                                   */
  --paper:        #FFFFFF;
  --paper-warm:   #FBFAF7;   /* barely-there section break                   */
  --rule:         #E4E7E4;

  /* Type */
  --font: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", Arial, sans-serif;

  /* Spacing scale */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4.5rem; --s7: 6.5rem;

  --wrap: 1100px;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(11, 107, 69, 0.07), 0 10px 30px rgba(11, 107, 69, 0.05);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.125rem;      /* 18px — comfortable, low strain */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--emerald); text-underline-offset: 3px; }
a:hover { color: var(--emerald-dark); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-weight: 900;          /* Source Sans 3 Black */
  color: var(--emerald);
  line-height: 1.18;
  margin: 0 0 var(--s2);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 var(--s2); max-width: 68ch; }
.lede { font-size: 1.25rem; color: var(--ink); }
.meta { color: var(--ink-soft); font-size: 0.95rem; }
.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* coral-deep, not coral: at this size the label counts as small text and
     needs 4.5:1. Plain coral lands at 4.48:1 on white — a hair short. */
  color: var(--coral-deep);
  margin-bottom: var(--s1);
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s3); }
.section { padding: var(--s6) 0; }
.section--tight { padding: var(--s5) 0; }
.section--warm { background: var(--paper-warm); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section--mint { background: var(--mint-tint); }
.center { text-align: center; }
.center p { margin-left: auto; margin-right: auto; }
.stack > * + * { margin-top: var(--s2); }

/* Visible to screen readers only — used to keep the heading order
   unbroken (h1 -> h2 -> h3) where a section needs no visible title. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--emerald); color: #fff; padding: var(--s1) var(--s2); z-index: 100;
}
.skip:focus { left: var(--s2); top: var(--s2); }

/* Focus ring: emerald (6.6:1 on white) as the default, amber on emerald
   surfaces where emerald-on-emerald would be invisible. Both directions
   clear WCAG 2.2 non-text contrast (3:1). */
:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible,
.site-footer :focus-visible,
.signup .btn:focus-visible { outline-color: var(--amber); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(150%) blur(6px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: 108px;
}
.brand img { height: 68px; width: auto; }   /* 2x the original 34px */
.brand { display: inline-flex; align-items: center; }

.nav { display: flex; align-items: center; gap: var(--s3); }
.nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav a:hover { color: var(--emerald); border-bottom-color: var(--amber); }
.nav a[aria-current="page"] { color: var(--emerald); border-bottom-color: var(--emerald); }
/* The button in the nav must keep button colours — `.nav a` would otherwise
   out-specify `.btn` and render the label in charcoal on emerald. */
.nav a.btn { color: #fff; border-bottom-color: transparent; }
.nav a.btn:hover { color: #fff; border-bottom-color: transparent; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: 8px; padding: 8px 12px; font: inherit; font-weight: 600;
  color: var(--emerald); cursor: pointer;
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .brand img { height: 52px; }
  .site-header .wrap { min-height: 84px; }
  .nav {
    display: none; position: absolute; top: 84px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: #fff; border-bottom: 1px solid var(--rule); padding: var(--s2) var(--s3);
  }
  .nav.is-open { display: flex; }
  .nav a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .nav .btn { margin-top: var(--s2); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font: inherit; font-weight: 700; font-size: 1rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid var(--emerald);
  background: var(--emerald);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--emerald-dark); border-color: var(--emerald-dark); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--emerald); }
.btn--ghost:hover { background: var(--mint-tint); color: var(--emerald-dark); }
.btn--soon { border-color: var(--rule); background: #fff; color: var(--ink-soft); font-weight: 600; }
.btn--soon:hover { background: var(--paper-warm); color: var(--ink); border-color: var(--ink-soft); }
.btn--sm { padding: 10px 20px; font-size: 0.95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.btn-row--center { justify-content: center; }

/* ---------- Hero ---------- */
.hero { padding: var(--s6) 0 var(--s6); position: relative; overflow: hidden; }
.hero::before {   /* amber decorates — a soft sunrise, no words on it */
  content: ""; position: absolute; top: -140px; right: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--amber-tint) 0%, rgba(253,235,200,0) 70%);
  pointer-events: none;
}
.hero .wrap {
  position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s6); align-items: center;
}
.hero__tagline {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mint-tint); color: var(--emerald);
  font-weight: 700; font-size: 0.95rem;
  padding: 6px 16px; border-radius: 999px; margin-bottom: var(--s3);
}
.hero__art {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--rule);
}
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: var(--s4); }
  .hero__art { max-width: 380px; margin-inline: auto; }
}

/* ---------- Trust strip ---------- */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.trust__item h3 { font-size: 1.05rem; margin-bottom: 6px; }
.trust__item p { font-size: 1rem; margin: 0; color: var(--ink-soft); }
.trust__mark {
  width: 46px; height: 46px; margin-bottom: var(--s2);
  display: grid; place-items: center;
  border-radius: 12px; background: var(--mint-tint); color: var(--emerald);
}
.trust__mark svg { width: 24px; height: 24px; }
/* Rotate the tints so the strip isn't four identical green squares.
   Icons are decoration, so amber and coral are free to lead here. */
.trust__item:nth-child(2) .trust__mark { background: var(--amber-tint); color: var(--coral-deep); }
.trust__item:nth-child(3) .trust__mark { background: var(--coral-tint);  color: var(--coral-deep); }
.trust__item:nth-child(4) .trust__mark { background: var(--amber-tint); color: var(--emerald); }
@media (max-width: 880px) { .trust { grid-template-columns: repeat(2, 1fr); gap: var(--s3); } }
@media (max-width: 480px) { .trust { grid-template-columns: 1fr; } }

/* ---------- Product cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--s4); }
.card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  border-top: 5px solid var(--emerald);
}
/* A quiet colour rotation across the row — decoration only, no meaning attached. */
.grid .card:nth-child(2) { border-top-color: var(--amber); }
.grid .card:nth-child(3) { border-top-color: var(--coral); }
.card__img { background: var(--paper-warm); border-bottom: 1px solid var(--rule); }
.card__img img { width: 100%; }
.card__body { padding: var(--s3); display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: 6px; }
.card__body p { font-size: 1rem; }
.card__body .btn-row { margin-top: auto; padding-top: var(--s2); }
.badge {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: var(--amber-tint); color: #7A4E0E; margin-bottom: var(--s1);
}
.badge--soon { background: var(--rule); color: var(--ink-soft); }

/* ---------- Feature product block ---------- */
.feature { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s6); align-items: center; }
.feature__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.feature__gallery img { border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; gap: var(--s4); } }

.ticks { list-style: none; padding: 0; margin: 0 0 var(--s3); max-width: 62ch; }
.ticks li { position: relative; padding-left: 34px; margin-bottom: 12px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 20px; height: 20px; border-radius: 5px;
  background: var(--mint-tint);
  /* emerald tick, echoing the logo */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6B45' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 15px; background-position: center; background-repeat: no-repeat;
}

/* ---------- Email capture ---------- */
.signup {
  background: var(--mint-tint);
  border-radius: var(--radius);
  border-top: 6px solid var(--amber);
  padding: var(--s5);
  display: grid; grid-template-columns: 1fr 0.85fr; gap: var(--s5); align-items: center;
}
.signup h2 { margin-bottom: var(--s2); }
.signup p { font-size: 1.05rem; }
.form-card { background: #fff; border-radius: 12px; padding: var(--s3); box-shadow: var(--shadow); }
.field { margin-bottom: var(--s2); }
.field label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; color: var(--ink); }
.field input {
  width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px;
  border: 1.5px solid var(--rule); border-radius: 10px; background: #fff; color: var(--ink);
}
.field input:focus { border-color: var(--emerald); outline: none; box-shadow: 0 0 0 3px rgba(11,107,69,0.15); }
.form-card .btn { width: 100%; text-align: center; }
.form-note { font-size: 0.88rem; color: var(--ink-soft); margin: var(--s2) 0 0; }
@media (max-width: 880px) { .signup { grid-template-columns: 1fr; padding: var(--s4) var(--s3); gap: var(--s3); } }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--rule); padding: var(--s3) 0; }
.faq__item:first-child { border-top: 1px solid var(--rule); }
.faq__item h3 { margin-bottom: var(--s1); font-size: 1.15rem; }
.faq__item p  { margin-bottom: 0; max-width: none; }

/* ---------- Note / callout ---------- */
.note {
  border-left: 4px solid var(--amber);
  background: var(--paper-warm);
  padding: var(--s3);
  border-radius: 0 10px 10px 0;
}
.note p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--emerald); color: #E8F2EC; padding: var(--s6) 0 var(--s4); margin-top: var(--s6); }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: var(--s2); }
.site-footer a { color: #E8F2EC; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer img { height: 64px; margin-bottom: var(--s2); }   /* 2x */
.footer-tagline { color: #fff; font-weight: 700; margin-bottom: var(--s1); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s5); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid p { font-size: 1rem; color: #CFE3D8; }
.footer-bottom {
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 0.9rem; color: #CFE3D8;
  display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: space-between;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s4); } }

/* ==========================================================================
   v2 additions — two-audience structure, product pages, prose pages
   ========================================================================== */

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: var(--s3); }
.crumbs a { color: var(--ink-soft); text-decoration: underline; }
.crumbs a:hover { color: var(--emerald); }
.crumbs span[aria-current] { color: var(--ink); font-weight: 600; }
.crumbs span[aria-hidden] { margin: 0 6px; color: var(--rule); }

/* ---------- Compact hero for inner pages ---------- */
.hero--compact { padding: var(--s5) 0; }
.hero--teen::before { background: radial-gradient(circle at 50% 50%, var(--coral-tint) 0%, rgba(251,227,220,0) 70%); }
.hero__tagline--teen { background: var(--coral-tint); color: var(--coral-deep); }

/* ---------- Two-audience split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.split__card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  border-top: 6px solid var(--emerald);
  padding: var(--s4); display: flex; flex-direction: column;
}
.split__card--teens { border-top-color: var(--coral); }
.split__card h3 { font-size: 1.5rem; margin-bottom: 4px; }
.split__age {
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--s2);
}
.split__card .ticks { margin-bottom: var(--s3); }
.split__card .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* ---------- Section head ---------- */
.section-head { margin-bottom: var(--s4); padding-bottom: var(--s2); border-bottom: 2px solid var(--rule); }
.section-head h2 { margin-bottom: 4px; }
.section-head .meta { margin: 0; }

/* ---------- Cards: linked titles and plain variant ---------- */
.card__body h3 a { text-decoration: none; color: var(--emerald); }
.card__body h3 a:hover { text-decoration: underline; }
.card--plain { border-top-width: 5px; }
.grid .card--plain:nth-child(3n+2) { border-top-color: var(--amber); }
.grid .card--plain:nth-child(3n+3) { border-top-color: var(--coral); }
a.card__img { display: block; }

.badge--quiet { background: var(--rule); color: #4A4F57; }

/* ---------- Product page ---------- */
.product { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.product__gallery > img {
  width: 100%; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}
.product__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s2); }
.product__thumbs img { border: 1px solid var(--rule); border-radius: 8px; }
.product__info h1 { margin-top: 0; }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; gap: var(--s4); } }

/* ---------- Spec table ---------- */
.specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  margin: var(--s3) 0;
}
.specs > div { padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.specs > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.specs > div:nth-last-child(-n+2) { border-bottom: 0; }
.specs dt {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 2px;
}
.specs dd { margin: 0; font-weight: 600; color: var(--ink); }
@media (max-width: 480px) {
  .specs { grid-template-columns: 1fr; }
  .specs > div:nth-child(odd) { border-right: 0; }
  .specs > div { border-bottom: 1px solid var(--rule); }
}

/* ---------- Feature gallery variants ---------- */
.feature__gallery--two { grid-template-columns: 1fr 1fr; }
.feature__gallery--one { grid-template-columns: 1fr; }

/* ---------- Prose pages ---------- */
.prose { max-width: 720px; }
.prose h2 { margin-top: var(--s5); font-size: 1.5rem; }
.prose h2:first-of-type { margin-top: var(--s4); }
.prose .ticks { margin-bottom: var(--s3); }
.ticks--no li::before {
  background-color: var(--coral-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E3D22' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* ---------- Contact cards ---------- */
.contact-grid { display: grid; gap: var(--s3); margin: var(--s4) 0; }
.contact-card {
  border: 1px solid var(--rule); border-left: 5px solid var(--emerald);
  border-radius: 0 10px 10px 0; padding: var(--s3); background: var(--paper-warm);
}
.contact-card:nth-child(2) { border-left-color: var(--amber); }
.contact-card:nth-child(3) { border-left-color: var(--coral); }
.contact-card h2 { font-size: 1.15rem; margin-top: 0; margin-bottom: var(--s1); }
.contact-card p:last-child { margin-bottom: 0; }

/* ---------- Form: radio group ---------- */
.fieldset { border: 1px solid var(--rule); border-radius: 10px; padding: var(--s2); margin-bottom: var(--s2); }
.fieldset legend { font-weight: 700; font-size: 0.95rem; padding: 0 6px; color: var(--ink); }
.choice { display: flex; align-items: center; gap: 10px; padding: 7px 4px; cursor: pointer; font-size: 1rem; }
.choice input { width: 20px; height: 20px; accent-color: var(--emerald); margin: 0; flex: none; }
.choice:hover { color: var(--emerald); }

/* ---------- Footer headings (h2 for heading order, styled as h4) ---------- */
.footer-h { color: #fff; font-size: 1rem; font-weight: 900; margin: 0 0 var(--s2); }

/* ---------- Copyable email addresses ----------
   A mailto: link only works if the visitor's computer has a default mail app.
   Plenty don't — school laptops, webmail-only setups — and for them a plain
   link is a silent dead end. So the address is shown as selectable text with
   a copy button beside it, and the link is a bonus rather than the only way in.
   ------------------------------------------------------------------------- */
.email-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-top: var(--s2);
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.email-addr {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--emerald);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;          /* never overflow on a narrow phone */
  user-select: all;               /* one click selects the whole address */
}
.email-addr:hover { color: var(--emerald-dark); }

.copy-btn {
  font: inherit; font-size: 0.9rem; font-weight: 700;
  padding: 7px 14px;
  border: 1.5px solid var(--emerald);
  border-radius: 999px;
  background: #fff;
  color: var(--emerald);
  cursor: pointer;
  margin-left: auto;              /* sits at the right edge of the row */
  flex: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.copy-btn:hover { background: var(--mint-tint); }
.copy-btn.is-copied {
  background: var(--emerald); color: #fff; border-color: var(--emerald);
}
@media (max-width: 520px) {
  .copy-btn { margin-left: 0; }
}

/* ==========================================================================
   v3 — Shop dropdown, card alignment, footer logo fix
   ========================================================================== */

/* ---------- Nav dropdown ---------- */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group__btn {
  font: inherit; font-weight: 600; font-size: 1rem;
  color: var(--ink); background: none; border: 0;
  padding: 6px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-group__btn:hover { color: var(--emerald); border-bottom-color: var(--amber); }
/* the branch containing the current page stays visibly active */
.nav-group__btn[data-section-active] { color: var(--emerald); border-bottom-color: var(--emerald); }
.nav-group__chev { font-size: 0.7em; transition: transform 0.15s ease; }
.nav-group__btn[aria-expanded="true"] .nav-group__chev { transform: rotate(180deg); }

.nav-menu {
  display: none;
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 210px; margin: 0; padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 50;
}
.nav-group__btn[aria-expanded="true"] + .nav-menu { display: block; }
.nav-menu li { margin: 0; }
.nav-menu a {
  display: block; padding: 10px 12px; border-radius: 8px;
  text-decoration: none; font-weight: 600; color: var(--ink);
  border-bottom: 0;
}
.nav-menu a:hover { background: var(--mint-tint); color: var(--emerald); }
.nav-menu a[aria-current="page"] { color: var(--emerald); background: var(--mint-tint); }

@media (max-width: 760px) {
  /* On mobile the whole nav is already a stacked panel, so the dropdown
     becomes a plain indented sub-list rather than a floating menu. */
  .nav-group { display: block; width: 100%; }
  .nav-group__btn { width: 100%; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .nav-menu {
    position: static; transform: none; display: block;
    border: 0; box-shadow: none; padding: 0 0 0 var(--s2); min-width: 0;
  }
  .nav-menu a { padding: 10px 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .nav-menu a:hover { background: none; }
}

/* ---------- Card image alignment ----------
   Product previews are different shapes (A4 portrait vs US Letter), so a
   full-bleed image made every card a different height and the row looked
   ragged. Fixing the frame's aspect ratio and cropping from the top keeps
   the covers readable while making every card line up. */
.card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
}
.card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;   /* keep the title area of a cover visible */
}
/* Cards with no preview yet get a tinted panel of the same size, so a
   "coming soon" card sits level with the ones that have artwork. */
.card__img--placeholder {
  background: var(--mint-tint);
  display: grid; place-items: center;
  color: var(--emerald);
  border-bottom: 1px solid var(--rule);
}
.card__img--placeholder svg { width: 46px; height: 46px; opacity: 0.55; }
.grid .card--plain .card__img--placeholder { background: var(--paper-warm); }

/* ---------- Footer logo ----------
   The global `img { max-width: 100% }` was fighting the fixed height and
   squashing the wordmark. Pinning width to auto restores the aspect ratio. */
.site-footer img { height: 56px; width: auto; max-width: 100%; }

/* ==========================================================================
   v4 — nav affordances, dropdown separation, button sizing
   ========================================================================== */

/* A 0.7em chevron was almost invisible at nav size and gave no hint the item
   opened anything. Bigger, heavier, and nudged onto the text baseline. */
.nav-group__chev {
  font-size: 0.95em;
  line-height: 1;
  color: var(--emerald);
  transform-origin: center;
}
.nav-group__btn:hover .nav-group__chev { color: var(--emerald-dark); }

/* Menu items were touching, so a hovered item and the current page ran
   together into one block. A gap plus a clear resting state keeps them
   readable as separate rows. */
.nav-menu li + li { margin-top: 5px; }
.nav-menu a {
  border: 1.5px solid transparent;   /* reserve the space so nothing shifts */
}
.nav-menu a:hover {
  background: var(--mint-tint);
  border-color: var(--mint-tint);
  color: var(--emerald);
}
/* The current page is marked by an outline rather than a fill, so it never
   merges with a filled hover on the row above or below. */
.nav-menu a[aria-current="page"] {
  background: #fff;
  border-color: var(--emerald);
  color: var(--emerald);
}
.nav-menu a[aria-current="page"]:hover { background: var(--mint-tint); }

/* "Free sample" was cramped against its pill. */
.btn--sm { padding: 12px 26px; font-size: 0.95rem; }
.nav a.btn { padding: 12px 26px; }

/* Sub-heading inside a merged contact card */
.contact-sub {
  font-size: 1.02rem;
  margin-top: var(--s3);
  margin-bottom: var(--s1);
  color: var(--emerald);
}

/* ---------- Single-card rows ----------
   A lone card in an auto-fit grid stretches to the full width and shouts
   louder than the thing it is announcing. Cap the track so one card stays
   card-sized. */
.grid--narrow { grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); justify-content: start; }

/* ---------- "Next up" strip ----------
   For a product that is planned but not built. Deliberately quieter than a
   card: no image, no border-top accent, one line of text. Its visual weight
   should match its status. */
.upnext {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--s2);
  margin-top: var(--s4);
  padding: 14px var(--s3);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--amber);
  border-radius: 0 10px 10px 0;
  font-size: 0.98rem;
}
.upnext__label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); flex: none;
}
.upnext__name { font-weight: 700; color: var(--emerald); }
.upnext__text { color: var(--ink-soft); flex: 1 1 260px; margin: 0; max-width: none; }
.upnext a { font-weight: 700; white-space: nowrap; }

/* ==========================================================================
   v5 — button alignment, working mobile menu, spacing
   ========================================================================== */

/* Card buttons sit centred so a single "Tell me when it's ready" is not
   stranded against the left edge of a wide card. */
.card__body .btn-row { justify-content: center; }

/* Placeholder artwork for products that are planned but not built. */
.card__img--art { background: var(--mint-tint); }

/* ---------- Mobile menu ----------
   Three things were broken here: the Resources chevron did nothing because
   the sub-list was forced visible, the Free sample pill inherited the
   full-width rule meant for plain nav links, and there was no way to close
   the panel once open. */
@media (max-width: 760px) {

  /* The sub-list is now genuinely collapsible, same as desktop. */
  .nav-menu { display: none; }
  .nav-group__btn[aria-expanded="true"] + .nav-menu { display: block; }
  .nav-group__btn { font-size: 1rem; }
  .nav-group__chev { font-size: 1.05em; }

  /* Free sample is a button, not a nav row — keep it its own size. */
  .nav a.btn {
    width: auto;
    align-self: flex-start;
    padding: 11px 22px;
    border-bottom: 0;
    margin-top: var(--s3);
  }

  /* The toggle says what it will do next, so closing is discoverable. */
  .nav-toggle[aria-expanded="true"] {
    background: var(--emerald); color: #fff; border-color: var(--emerald);
  }

  /* The hero art had a full section's padding under it before the next
     block, which read as a large empty gap on a narrow screen. */
  .hero { padding: var(--s4) 0 var(--s3); }
  .hero--compact { padding: var(--s3) 0; }
  .section { padding: var(--s5) 0; }
  .section--tight { padding: var(--s4) 0; }
  .hero__art { margin-bottom: 0; }
}

/* Three-shelf split on the homepage */
.split--three { grid-template-columns: repeat(3, 1fr); }
.split__card--cards { border-top-color: var(--amber); }
@media (max-width: 980px) { .split--three { grid-template-columns: 1fr; } }

/* Confirms which product a "tell me when it's ready" click was about. */
.interest-note {
  display: inline-block;
  background: var(--amber-tint); color: #7A4E0E;
  font-weight: 700; font-size: 0.95rem;
  padding: 8px 14px; border-radius: 999px;
  margin-bottom: var(--s2);
}

/* ==========================================================================
   v6 — left slide-in mobile menu, prominent toggle, notify page
   ========================================================================== */

/* The empty amber pill bug: `hidden` sets display:none, but the rule below
   used to override it with display:inline-block, so an empty pill rendered
   on every page. Explicitly respect the attribute. */
.interest-note[hidden] { display: none !important; }

.site-header { --header-h: 108px; }

/* Toggle: solid emerald pill, icon only. Two icons, one shown at a time. */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--emerald); border: 0; border-radius: 999px;
  color: #fff; cursor: pointer;
  order: -1;                      /* sits left of the logo on mobile */
  flex: none;
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-open { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }

/* Dim behind the panel. Tapping it closes the menu. */
.nav-dim {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--header-h);
  background: rgba(15, 25, 20, 0.42);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 55;
}
.nav-dim.is-open { opacity: 1; visibility: visible; }
body.nav-locked { overflow: hidden; }

@media (max-width: 760px) {
  .site-header { --header-h: 84px; }
  .site-header .wrap { min-height: var(--header-h); gap: var(--s2); justify-content: flex-start; }
  .nav-toggle { display: inline-flex; }
  .brand { margin-right: auto; }

  /* Panel slides in from the left, under the header so the close button
     never moves. 280px, capped so it always leaves page visible beside it. */
  .nav {
    position: fixed; top: var(--header-h); left: 0; bottom: 0;
    width: 280px; max-width: 82vw;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    background: #fff;
    border-right: 1px solid var(--rule); border-bottom: 0;
    padding: var(--s3) var(--s3) var(--s4);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 60;
  }
  .nav.is-open { display: flex; transform: translateX(0); }

  .nav a { width: 100%; padding: 13px 0; border-bottom: 1px solid var(--rule); }
  .nav-group__btn { border-bottom: 1px solid var(--rule); }

  /* Sub-list indented under its parent with a mint rule, as mocked. */
  .nav-menu {
    padding: 4px 0 4px var(--s2);
    border-left: 2px solid var(--mint-tint);
    margin: 6px 0 6px 2px;
  }
  .nav-menu a { padding: 9px 0; font-size: 0.97rem; }
  .nav-menu li + li { margin-top: 0; }

  /* Free sample sits below a divider as the one action, not a fifth link. */
  .nav a.btn {
    width: auto; align-self: flex-start;
    margin-top: var(--s3); padding: 11px 22px;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* ---------- Notify page ---------- */
.notify { max-width: 520px; margin: 0 auto; text-align: center; }
.notify h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: var(--s3); }
.notify .form-card { text-align: left; }
.notify .btn { width: 100%; text-align: center; }
.notify__alt { font-size: 0.95rem; color: var(--ink-soft); margin-top: var(--s3); }

/* ==========================================================================
   v7 — fix the trapped panel, restore logo-left / button-right
   ========================================================================== */

/* --header-h must live on :root, not on .site-header: .nav-dim is a sibling
   of the header and so never inherited it, leaving top:auto. */
:root { --header-h: 108px; }

@media (max-width: 760px) {
  :root { --header-h: 84px; }

  /* THE MENU BUG. `backdrop-filter` makes an element a containing block for
     position:fixed descendants, so the panel was being positioned inside the
     header's own box — computing to 56px tall and cropping every item after
     the first. Dropping the blur on mobile returns the panel to the viewport.
     The header keeps its solid background, so nothing looks different. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }

  /* Logo on the left, button on the right — the panel still opens from the
     left, which is the common arrangement and keeps the logo in the usual
     place for a returning visitor. */
  .site-header .wrap { justify-content: space-between; }
  .nav-toggle { order: 0; }
  .brand { margin-right: 0; }
}

/* ==========================================================================
   v8 — header pair on the left (menu button, then logo)
   ========================================================================== */
@media (max-width: 760px) {
  /* The button sits immediately left of the logo, directly above the panel
     it opens, so the thing you tap and the thing that appears share a spot.
     `order: -1` moves the button ahead of the logo without changing markup
     order, which keeps the logo first for screen readers and on desktop. */
  .site-header .wrap { justify-content: flex-start; gap: 12px; }
  .nav-toggle { order: -1; }
  .brand { margin-right: auto; }
}

/* ==========================================================================
   v9 — THE MENU CLICK BUG
   .site-header is position:sticky with z-index:40, which makes it a stacking
   context. The panel is a descendant, so its z-index:60 is confined inside
   that context and cannot outrank anything on the page. The dim, being a
   sibling of the header at z-index:55, therefore painted OVER the panel and
   intercepted every tap — the menu looked open but nothing was clickable.

   Fix: lift the whole header (and with it the panel) above the dim while the
   menu is open. Raising the header raises its entire stacking context, which
   is the only thing that actually moves the panel forward.
   ========================================================================== */
body.nav-locked .site-header { z-index: 70; }
.nav-dim { z-index: 55; }

/* ==========================================================================
   v10 — spec panel, buy buttons, radio list, preview lightbox
   ========================================================================== */

/* ---------- Spec panel ----------
   Was a bare bordered table that belonged to no part of the design. Mint
   fill ties it to the signup block and the hero pill; label left, value
   right makes it scannable instead of eight stacked lines. */
.specs {
  display: block;
  background: var(--mint-tint);
  border: 0; border-radius: 12px;
  padding: var(--s2) var(--s3);
  margin: var(--s3) 0;
}
.specs > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2);
  padding: 9px 0;
  border: 0; border-top: 1px solid rgba(11, 107, 69, 0.15);
}
.specs > div:first-child { border-top: 0; }
.specs dt {
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--emerald); margin: 0;
}
.specs dd { font-weight: 700; color: var(--ink); text-align: right; }

/* ---------- Buy buttons ----------
   A grey outlined button is the universal signal for "disabled". These are
   real links, so they look real: one solid primary, one outlined secondary,
   with an honest note underneath until the shops open. */
.buy-row { display: grid; gap: 10px; margin-top: var(--s3); }
.buy-row .btn { width: 100%; text-align: center; }
.btn--soon {
  border-color: var(--emerald); background: var(--emerald); color: #fff; font-weight: 700;
}
.btn--soon:hover { background: var(--emerald-dark); border-color: var(--emerald-dark); color: #fff; }
.btn--soon.btn--ghost { background: transparent; color: var(--emerald); }
.btn--soon.btn--ghost:hover { background: var(--mint-tint); color: var(--emerald-dark); }
.buy-note { font-size: 0.88rem; color: var(--ink-soft); text-align: center; margin: var(--s2) 0 0; }

/* ---------- Radio list ----------
   The dot was centred against a wrapping label, so it floated mid-paragraph.
   Aligning to the first line fixes that; the whole row is now the target. */
.choice {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 12px; margin-bottom: 8px;
  border: 1.5px solid var(--rule); border-radius: 10px;
  cursor: pointer;
}
.choice:last-child { margin-bottom: 0; }
.choice:hover { border-color: var(--emerald); }
.choice input { margin-top: 3px; }
.choice:has(input:checked) { border-color: var(--emerald); background: #F2F9F5; }
.choice__name { display: block; font-weight: 700; color: var(--ink); }
.choice__age  { display: block; font-size: 0.9rem; color: var(--ink-soft); font-weight: 400; }

/* ---------- Preview lightbox ---------- */
.zoomable { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(12, 20, 16, 0.86);
  display: none; align-items: center; justify-content: center;
  padding: 56px 16px;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: min(94vw, 720px); max-height: 84vh;
  width: auto; height: auto;
  border-radius: 6px; background: #fff;
}
.lightbox__btn {
  position: absolute; z-index: 2;
  width: 46px; height: 46px; border-radius: 999px;
  border: 0; background: rgba(255, 255, 255, 0.18); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.3); }
.lightbox__btn svg { width: 24px; height: 24px; }
.lightbox__close { top: 14px; right: 14px; }
.lightbox__prev  { left: 12px;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__count {
  position: absolute; bottom: 16px; left: 0; right: 0;
  text-align: center; color: #fff; font-size: 0.95rem; margin: 0;
}
@media (max-width: 560px) {
  .lightbox { padding: 52px 8px; }
  .lightbox__btn { width: 40px; height: 40px; }
}

/* ==========================================================================
   v11 — tidy the open menu
   ========================================================================== */
@media (max-width: 760px) {
  /* The mint rule down the left of the sub-list added a second vertical
     edge inside a panel that already has one. The indent alone is enough
     to show these items belong to Resources. */
  .nav-menu { border-left: 0; padding-left: var(--s2); margin-left: 0; }

  /* Touch devices keep :hover stuck after a tap, which left an amber
     underline sitting beneath Resources once the panel opened. Only apply
     the hover tint where hovering is genuinely possible. */
  @media (hover: none) {
    .nav a:hover,
    .nav-group__btn:hover { border-bottom-color: var(--rule); }
  }
}

/* ==========================================================================
   v12 — remove the hero glow
   The decorative amber circle behind the hero headline is gone on every
   screen. Amber still appears where it reads as intent rather than tint:
   card top-borders, badges, the signup panel edge and the Next up strip.
   ========================================================================== */
.hero::before { content: none; }
.hero--teen::before { content: none; }

/* Bare signup: the free sample page already carries its own heading and
   intro, so the shared block would say the same thing twice. */
.signup--bare { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }

/* Reverted: enlarging .eyebrow hit all 47 labels across the site, not just
   "Available now". Kept at the original size so the whole set stays uniform. */

/* Trust strip stays two across on the narrowest phones rather than becoming
   four stacked blocks — the section is supporting detail and should not
   cost a screen and a half of scrolling. */
@media (max-width: 480px) {
  .trust { grid-template-columns: repeat(2, 1fr); gap: var(--s3) var(--s2); }
  .trust__item p { font-size: 0.92rem; }
  .trust__mark { width: 38px; height: 38px; margin-bottom: 8px; }
  .trust__mark svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   v13 — shorter "in the workshop" panel
   A placeholder announcing something that does not exist yet was taking the
   same height as a real product cover. Shorter on both, and shorter still on
   mobile where vertical space is scarcest. The artwork sits inside the middle
   band of the image, so the tighter mobile crop never cuts it.
   ========================================================================== */
.card__img--art { aspect-ratio: 8 / 3; }          /* about half its old height */
.card__img--art img { object-position: center center; }

@media (max-width: 760px) {
  .card__img--art { aspect-ratio: 4 / 1; }        /* about a third of the old height */
}

/* With a short placeholder the body has spare height, and pinning the button
   to the bottom left a hole in the middle. Centre the whole block instead, so
   a workshop card reads as balanced beside a taller product card. */
@media (min-width: 761px) {
  .card--art .card__body { justify-content: center; }
  .card--art .card__body .btn-row { margin-top: var(--s3); padding-top: 0; }
}

/* Section intros were an inline margin, which a media query cannot reach. */
.section-intro { margin-bottom: var(--s5); }

/* ==========================================================================
   v14 — mobile vertical rhythm
   Measured at 390px: the page ran 10,232px, with 192px of dead space between
   the last section and the footer alone (section padding + footer margin +
   footer padding, all stacked). Desktop spacing is untouched.
   ========================================================================== */
@media (max-width: 760px) {

  /* 1. Biggest single win: the footer had a 72px margin on top of its own
        72px padding, on top of the section's 48px. Three gaps doing one job. */
  .site-footer { margin-top: 0; padding: var(--s4) 0 var(--s3); }

  /* 2. Section padding 48 -> 32 top and bottom, across seven sections. */
  .section { padding: var(--s4) 0; }
  .section--tight { padding: var(--s3) 0; }

  /* 3. Two sections with the same background in a row read as one block,
        so 64px of padding between them is invisible dead space. */
  .section--warm + .section--warm { padding-top: 0; border-top: 0; }

  /* 4. Intro blocks above a grid: 48 -> 24. */
  .section-intro { margin-bottom: var(--s3); }

  /* 5. Card grids and FAQ rows. */
  .grid { gap: var(--s3); }
  .faq__item { padding: var(--s2) 0; }
  .split { gap: var(--s3); }

  /* 6. The signup panel carried desktop padding. */
  .signup { padding: var(--s3); }

  /* 7. Paragraph rhythm inside long prose pages. */
  .prose h2 { margin-top: var(--s4); }
}

/* ==========================================================================
   v15 — revert the desktop workshop panel
   Back to the same 4:3 frame as a product cover, so a workshop card is the
   same shape as its neighbours and nothing needs re-aligning. The artwork is
   now a wide graphic, so it is contained rather than cropped and sits centred
   on the mint panel. Mobile keeps the short strip, which was the part that
   actually needed the height back.
   ========================================================================== */
.card__img--art { aspect-ratio: 4 / 3; }
.card__img--art img {
  object-fit: contain;
  background: var(--mint-tint);
  padding: var(--s2);
}

/* The centring was only needed because the panel was short. With the frame
   back to full height the body flows from the top like every other card. */
@media (min-width: 761px) {
  .card--art .card__body { justify-content: flex-start; }
  .card--art .card__body .btn-row { margin-top: auto; padding-top: var(--s2); }
}

@media (max-width: 760px) {
  .card__img--art { aspect-ratio: 4 / 1; }
  .card__img--art img { object-fit: cover; padding: 0; }
}

/* ==========================================================================
   v16 — desktop vertical rhythm
   Measured at 1280px: 5,964px tall, 144px between every section and 216px of
   dead space before the footer. Trimmed with a lighter hand than mobile —
   a wide screen needs breathing room, it just does not need this much.
   ========================================================================== */
@media (min-width: 761px) {

  /* Three rules were stacking before the footer: the section's bottom
     padding, the footer's top margin, and the footer's top padding. */
  .site-footer { margin-top: 0; padding: var(--s5) 0 var(--s4); }

  /* 72 -> 48 top and bottom. Still 96px between sections. */
  .section { padding: var(--s5) 0; }
  .section--tight { padding: var(--s4) 0; }

  /* Same background twice in a row reads as one block, so the padding
     between them is invisible space. */
  .section--warm + .section--warm { padding-top: 0; border-top: 0; }

  /* Heading block above a grid. */
  .section-intro { margin-bottom: var(--s4); }

  /* The hero opened with 72px above the tagline. */
  .hero { padding: var(--s5) 0 var(--s5); }

  /* Feature rows keep their generous column gap; only the row gap tightens,
     which is what shows when the two halves stack. */
  .feature { column-gap: var(--s6); row-gap: var(--s4); }

  .signup { padding: var(--s4); }
}

/* ==========================================================================
   v17 — product preview size on desktop
   The main preview rendered 490x692px, taking 77% of a 900px screen, and the
   gallery column ran 923px. An A4 page shown at near-full height is more than
   anyone needs to judge it — and the lightbox exists for a proper look, so
   the inline copy only has to be an invitation to open it.
   ========================================================================== */
@media (min-width: 761px) {
  .product__gallery { max-width: 340px; margin-inline: auto; }
  .product__gallery > img {
    width: auto; max-width: 100%; max-height: 430px;
    margin-inline: auto; display: block;
  }
  .product__thumbs { gap: 10px; }
  .product__thumbs img { max-height: 120px; width: 100%; object-fit: cover; object-position: top; }
}

/* ==========================================================================
   v18 — a lone card must not stretch across the row
   `auto-fit` collapses empty tracks, so a section holding a single card gave
   it the full row: on /products the haircut cover rendered 1050x787px.
   `auto-fill` keeps the empty tracks, so one card occupies one column and
   sits the same size as it would beside two siblings. Multi-card rows are
   unchanged — this only affects rows that do not fill.
   ========================================================================== */
.grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* ==========================================================================
   v19 — workshop panel is now text, not a picture of text
   The label was baked into a JPEG, so its size was whatever the image scaled
   to — about 13px on desktop — and it could not differ between breakpoints.
   As real text it stays sharp, sizes independently per screen, and is one
   less asset to cache-bust.
   ========================================================================== */
.card__img--art {
  background: var(--mint-tint);
  display: grid; place-items: center;
  padding: var(--s2);
}
.art { text-align: center; color: var(--emerald); }
.art__mark { width: 44px; height: 44px; display: block; margin: 0 auto 10px; }
.art__sun { color: var(--amber); }
.art__title {
  font-weight: 900; color: var(--emerald);
  /* was rendering ~13px as baked-in image text; +30% as asked */
  font-size: 1.26rem; line-height: 1.2; margin: 0 0 4px; max-width: none;
}
.art__sub {
  /* A literal +30% on this line lands at ~10px, below the point where it is
     comfortably readable. Set to 15px, which is the smallest size used
     anywhere else on the site. */
  color: var(--ink-soft); font-size: 1.14rem; line-height: 1.3;
  margin: 0; max-width: none;
}

@media (max-width: 760px) {
  /* Green block 20% taller: 4/1 gave 85px, 10/3 gives 102px. */
  .card__img--art { aspect-ratio: 10 / 3; padding: var(--s1) var(--s2); }
  /* Short strip, so the mark sits beside the words rather than above. */
  .art { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
  .art__mark { width: 34px; height: 34px; margin: 0; flex: none; }
  .art__title { font-size: 1.26rem; margin: 0; }
  .art__sub { font-size: 1.14rem; }
}