/* ===========================================================================
   מרחב המאסטרמיינד — בשביל ההורות

   Built to read as part of 2-parents.co.il. Everything below was measured on
   the live site (24.10.2026), not guessed:

   - Colour: teal #00809D, green #6AA343, cyan #1DAECE, pale cyan #E4F6FA,
     ink #222. The cyan-to-teal fade is theirs (the "numbers" band).
   - Type: their face is the commercial "ספוילר פס", which cannot be copied.
     Heebo is the closest free match — same squared letters, same range from
     hairline to black — and is set the way they set theirs: every section
     title is half regular, half heavy, in one colour.
   - Shape: the "leaf" corner, border-radius 0 30px — two opposite corners
     round, two sharp — on cards, tags and photos; one deep 80px corner on the
     teal block; 40px top corners on the gradient band.

   One deliberate departure: their green buttons carry 16px text at 3:1
   contrast, which is too faint to read. Here green is used only where the
   label is large and bold enough for that contrast to pass; smaller buttons
   are teal.
   ========================================================================= */

:root {
  --teal: #00809d;
  --teal-deep: #065a6f;
  --leaf: #6aa343;
  /* The brand green one step darker, for green text. On white the brand green
     only just reaches 3:1, and on the pale-cyan backgrounds it falls below; this
     shade holds 3.4:1 or better on both. Buttons keep the exact brand green. */
  --leaf-text: #5a9137;
  --cyan: #1daece;
  --mist: #e4f6fa;
  --paper: #ffffff;
  --ink: #222222;
  --muted: #4d5d63;

  --line: rgba(6, 90, 111, 0.16);
  --line-soft: rgba(6, 90, 111, 0.08);
  --shadow: 0 14px 34px rgba(6, 90, 111, 0.09);
  --shadow-lift: 0 20px 44px rgba(6, 90, 111, 0.16);

  --wrap: 1180px;
  --gutter: clamp(18px, 5vw, 48px);
  --radius: 18px;
  --radius-lg: 25px;
  --leaf-r: 0 30px;
  --leaf-r-mirror: 30px 0;

  --font-display: "Heebo", "Assistant", system-ui, sans-serif;
  --font-body: "Heebo", "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;

  --icon-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4-6.5 8-6.5s7 2.5 8 6.5'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* `hidden` has to win over any class that sets `display`. Without this, a form
   with `display: flex` stays on screen after the script hides it, and a nav
   link made `display: flex` for the phone menu shows to people who must not
   see it. */
[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--teal-deep);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--teal);
}

h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.12;
  color: var(--teal);
}

h3 {
  font-size: clamp(1.12rem, 1.8vw, 1.32rem);
  line-height: 1.3;
  color: var(--teal-deep);
}

/* The brand's section title: one phrase heavy, the rest regular, both in the
   same colour ("**מה לומדים** אצלנו?"). Which half is heavy follows the
   meaning, not a rule. */
.duo {
  font-weight: 400;
  line-height: 1.05;
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
}

.duo b {
  font-weight: 800;
}

.duo-teal {
  color: var(--teal);
}

.duo-green {
  color: var(--leaf-text);
}

.duo-white {
  color: #fff;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Keeps the heading ladder intact where a visible heading would only repeat
   what the page title already says. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  background: var(--teal-deep);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
}

.skip-link:focus {
  inset-inline-start: 50%;
  transform: translateX(50%);
}

.wrap {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* No tracking: letter-spacing pulls Hebrew words apart and reads as a
   Latin-typography habit carried over by mistake. */
.eyebrow {
  margin: 0 0 0.5em;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--teal-deep);
}

main:focus {
  outline: none;
}

.lede {
  font-size: clamp(1.03rem, 1.5vw, 1.22rem);
  line-height: 1.68;
  color: var(--muted);
  max-width: 62ch;
}

.fine-print {
  margin-top: 28px;
  font-size: 0.94rem;
  color: var(--muted);
  max-width: 68ch;
}

.source-note {
  font-size: 0.88rem;
  color: var(--muted);
}

/* Inline link inside a sentence: the negative margin gives it a 44px hit area
   without pushing the surrounding lines apart. */
.source-note a {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
}

/* An honest marker for anything the brief says still needs a real connection
   or a real asset. Visible on purpose — it is a handover note, not a badge. */
.todo-chip {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px 10px;
  border: 1px dashed var(--teal);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal-deep);
  background: var(--mist);
  white-space: nowrap;
}

/* ------------------------------- buttons ------------------------------- */

.primary-button,
.secondary-button,
.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.primary-button {
  background: var(--teal);
  color: #fff;
}

.primary-button:hover {
  background: var(--teal-deep);
}

.secondary-button,
.pill-button {
  background: transparent;
  color: var(--teal-deep);
  border-color: var(--teal);
}

.secondary-button:hover,
.pill-button:hover {
  background: var(--mist);
}

.primary-button.full {
  width: 100%;
}

/* The brand's big green call to action. The label is 19px bold, the size at
   which white on this green reaches the contrast large text needs — which is
   why green is kept for these and not used on every button. */
.cta-green {
  min-height: 54px;
  padding: 12px 30px;
  background: var(--leaf);
  border: 1px solid #fff;
  border-radius: 42px;
  font-size: 1.1875rem;
  font-weight: 700;
}

.cta-green:hover {
  background: #5a9137;
}

/* A white outline pill for use on teal and on the gradient band. */
.ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 10px 24px;
  border: 1.5px solid #fff;
  border-radius: 30px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.ghost-light:hover {
  background: #fff;
  color: var(--teal-deep);
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid var(--leaf);
  align-self: flex-start;
  line-height: 1.3;
  border-radius: 0;
}

.text-button:hover {
  color: var(--teal);
}

.icon-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}

/* ------------------------------- header -------------------------------- */

.preview-banner {
  background: var(--teal-deep);
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 10px var(--gutter);
  text-align: center;
}

.preview-banner strong {
  font-weight: 700;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px var(--gutter);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line-soft);
}

.brand {
  display: block;
  flex: 0 0 auto;
}

.brand-logo {
  height: clamp(46px, 6vw, 68px);
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  margin-inline-start: auto;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--teal-deep);
}

.site-nav a.is-current {
  color: var(--teal-deep);
  border-bottom-color: var(--leaf);
}

/* The topics under "ספריית התכנים": separate pale-cyan buttons with centred
   dark text and no surrounding panel, as in the brand site's menus. The list's
   top padding bridges the gap to the heading, so the pointer can travel from
   one to the other without the menu closing. */
.nav-drop {
  position: relative;
  display: inline-flex;
}

.nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
}

.nav-drop-toggle:hover,
.nav-drop.is-open .nav-drop-toggle,
.nav-drop-toggle.is-current {
  color: var(--teal-deep);
}

.nav-drop-toggle.is-current {
  border-bottom-color: var(--leaf);
}

.nav-drop-caret {
  width: 0;
  height: 0;
  border-inline: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 160ms ease;
}

.nav-drop.is-open .nav-drop-caret {
  transform: rotate(180deg);
  color: var(--teal);
}

.nav-drop-list {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline-start: -16px;
  z-index: 50;
  flex-direction: column;
  gap: 5px;
  width: 230px;
  max-height: calc(100vh - 130px);
  margin: 0;
  padding: 6px 0 0;
  overflow-y: auto;
  list-style: none;
}

.nav-drop.is-open .nav-drop-list {
  display: flex;
}

.site-nav .nav-drop-list a {
  display: flex;
  justify-content: center;
  min-height: 46px;
  padding: 10px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--mist);
  color: var(--ink);
  font-weight: 500;
  text-align: center;
  box-shadow: 0 6px 14px rgba(6, 90, 111, 0.1);
  transition: background-color 150ms ease, color 150ms ease;
}

.site-nav .nav-drop-list a:hover {
  background: #d3eef4;
  color: var(--teal-deep);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The sign-in button. It has to out-rank `.site-nav a` (which strips padding
   and draws an underline for plain links), so it is scoped under the nav. A
   filled pill with a person mark: it is the one action in the header, so it is
   the only filled thing there. The icon is a CSS mask because the label is
   rewritten by script when the visitor signs in or out. */
.site-nav .nav-actions a {
  gap: 9px;
  min-height: 46px;
  padding: 10px 24px 10px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgba(0, 128, 157, 0.22);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.site-nav .nav-actions a::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon-person) center / contain no-repeat;
  mask: var(--icon-person) center / contain no-repeat;
}

.site-nav .nav-actions a:hover {
  background: var(--teal-deep);
  color: #fff;
  box-shadow: 0 8px 20px rgba(6, 90, 111, 0.28);
  transform: translateY(-1px);
}

.site-nav .nav-actions a:active {
  transform: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  margin-inline-start: auto;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--teal-deep);
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

/* ------------------------------ the hero ------------------------------- */

/* As on the brand home page: a photograph of the community, washed almost
   to white, behind everything. The overflow clip keeps the floating tags
   from widening the page on narrow screens. */
.hero-shell {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(228, 246, 250, 0.9) 100%),
    url("assets/community.jpeg") center 35% / cover no-repeat;
}

/* The portrait takes the first track, which is the right-hand side in a
   right-to-left page, and stands on the bottom edge so Liat appears to rise
   out of the teal block below. The title gets the other side and nothing else. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 440px) minmax(0, 1fr);
  grid-template-areas: "figure text";
  align-items: end;
  column-gap: clamp(24px, 5vw, 72px);
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding: clamp(28px, 5vw, 64px) var(--gutter) 0;
}

.hero-text {
  grid-area: text;
  align-self: center;
  padding-block-end: clamp(24px, 5vw, 72px);
}

/* The brand's three-tone stack: a light line in ink, the key word heavy in
   teal, the closing phrase heavy in green. */
.hero-title {
  display: flex;
  flex-direction: column;
  gap: 0.08em;
  margin: 0;
  line-height: 1;
}

.hero-title .t-light {
  font-weight: 300;
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.hero-title .t-teal {
  font-weight: 800;
  color: var(--teal);
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  letter-spacing: -0.01em;
}

.hero-title .t-green {
  font-weight: 800;
  color: var(--leaf-text);
  font-size: clamp(2.1rem, 4.6vw, 4rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}

.hero-figure {
  grid-area: figure;
  position: relative;
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 440px;
}

.hero-portrait {
  display: block;
  width: 100%;
  height: auto;
}

/* The white leaf-cornered tags that float over the photo on the brand site.
   There they hold figures; here they hold what is actually true of the space. */
.hero-tags {
  margin: 0;
  padding: 0;
  list-style: none;
}

.leaf-tag {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 18px 12px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--leaf-r);
  line-height: 1.15;
  box-shadow: 0 10px 26px rgba(6, 90, 111, 0.12);
}

/* 19px heavy: the size at which the brand green passes contrast on white. */
.leaf-tag b {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--leaf-text);
}

.leaf-tag span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}

.hero-tags .leaf-tag {
  position: absolute;
  max-width: 190px;
}

/* Placed around Liat, never on her face. In the photo her face spans roughly
   31–66% of the width and 17–42% of the height, so the tags keep to the outer
   thirds beside her head and to the lower half on her shoulders. */
.tag-a {
  top: 4%;
  inset-inline-end: -8%;
}

.tag-b {
  top: 56%;
  inset-inline-start: -6%;
  border-radius: var(--leaf-r-mirror);
}

.tag-c {
  bottom: 8%;
  inset-inline-end: -2%;
}

/* -------------------------- the teal block ----------------------------- */

/* Full width, one deep corner — the block under the hero on the brand site. */
.teal-block {
  background: var(--teal);
  color: #fff;
  border-radius: 0 0 80px 0;
}

.teal-block-inner {
  padding-block: clamp(36px, 5vw, 64px);
}

.teal-block h2 {
  margin-bottom: 0.4em;
}

.teal-block p {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
}

.teal-block .free-line {
  margin: 18px 0 26px;
  font-weight: 500;
}

.teal-block .free-line b {
  font-weight: 800;
}

/* ---------------------- what is a mastermind --------------------------- */

.band-fade {
  background: linear-gradient(180deg, #ffffff 0%, var(--mist) 100%);
}

.mm-intro {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  margin-bottom: clamp(56px, 7vw, 96px);
}

.mm-copy h2 {
  margin-bottom: 0.5em;
}

.mm-copy .lede {
  color: var(--ink);
  font-weight: 500;
}

.mm-copy p {
  max-width: 60ch;
}

/* A photograph handled like the course cards: leaf corners and a teal wash. */
.photo-card {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 0 40px;
  overflow: hidden;
  background: var(--mist);
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 128, 157, 0.18) 40%, rgba(6, 90, 111, 0.88) 100%);
}

.photo-card figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: 18px 24px 20px;
  color: #fff;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
}

/* The one sentence kept from the longer version: why this matters at home. */
.mm-note {
  max-width: 780px;
  margin: 0 auto;
  padding: 26px clamp(22px, 4vw, 40px);
  background: #fff;
  border-radius: 0 40px;
  color: var(--teal-deep);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
}

/* Centred sub-titles inside the section, as the brand site centres its own. */
.sub-duo {
  text-align: center;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  margin: 0 auto 30px;
}

/* White cards with a teal tab in the corner — the "why study with us" cards. */
.why-card {
  position: relative;
  padding: 58px 22px 24px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(6, 90, 111, 0.07);
}

.why-tab {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  margin: 0;
  padding: 9px 20px 10px;
  background: var(--teal);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  border-start-start-radius: var(--radius-lg);
  border-end-end-radius: 18px;
}

.why-card p {
  margin: 0;
}

/* ------------------------ community beyond the screen ------------------ */

.band-together {
  background: linear-gradient(180deg, var(--mist) 0%, #ffffff 100%);
}

.together-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px;
  max-width: 980px;
  margin-inline: auto;
}

.together-grid .why-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.together-when {
  margin: 0;
  font-weight: 800;
  color: var(--teal);
}

.wa-button {
  gap: 10px;
  margin-top: auto;
}

.wa-button svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.wa-locked {
  margin-top: auto;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Inline sign-in link: a 44px hit area without spreading the line. */
.wa-locked a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  font-weight: 700;
}

/* --------------------------- the promo band ---------------------------- */

/* The brand's cyan-and-teal band. The fade runs teal to cyan, top to bottom,
   so the white headline and paragraph sit on the teal, where they are
   readable; the lower, lighter part holds only white tags and buttons with
   their own backgrounds. */
.band-promo-wrap {
  background: var(--mist);
  padding-top: 0;
}

.promo {
  padding: clamp(40px, 5vw, 68px) clamp(22px, 5vw, 64px);
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal) 70%, var(--cyan) 100%);
  border-radius: 0 60px;
  color: #fff;
  text-align: center;
}

.promo h2 {
  margin-bottom: 0.45em;
}

.promo-lede {
  max-width: 62ch;
  margin: 0 auto 30px;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

.promo-actions {
  justify-content: center;
}

/* The brand's white button with teal text, for use on the band. */
.btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 10px 24px;
  background: #fff;
  border: 1px solid var(--teal);
  border-radius: 30px;
  color: var(--teal-deep);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.btn-white:hover {
  background: var(--mist);
}

/* The portrait used on the community page. */
.portrait-frame {
  position: relative;
  border-radius: 0 40px;
  background: var(--mist);
  overflow: hidden;
}

.portrait-frame img {
  width: 100%;
  display: block;
}

.portrait-frame.compact {
  max-width: 260px;
}

/* ------------------------------- bands --------------------------------- */

.band {
  padding-block: clamp(44px, 6.5vw, 92px);
}

.band-mist {
  background: var(--mist);
}

.band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(24px, 3.5vw, 44px);
}

.band-head h2 {
  margin-bottom: 0;
}

.band-sub {
  margin: 8px 0 0;
  color: var(--muted);
}

.band-intro {
  border-block: 1px solid var(--line-soft);
}

.intro-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(20px, 4vw, 64px);
}

.intro-lead h2 {
  margin-bottom: 0;
}

/* List items sit on the trail: a hairline with a station dot, not a bullet.
   Everything is keyed to the inline-start side, so the rail lands on the
   right in Hebrew and would flip correctly in an LTR locale. */
.trail-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-inline-start: 2px solid var(--line);
}

.trail-list li {
  position: relative;
  padding-inline-start: 24px;
  padding-block-end: 16px;
}

.trail-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: -6px;
  top: 11px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--leaf);
}

.trail-list li:last-child {
  padding-block-end: 0;
}

/* ------------------------------- topics -------------------------------- */

/* Five topics fit one row at full width. Narrower than that the count is
   rebalanced below so the opening five never leave a lone card on its own row. */
.topic-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}


@media (max-width: 699px) {
  .topic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .topic-card {
    padding-inline: 10px;
  }

  .topic-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* A topic card is a mark and a name, both on the centre line. The mark sits in
   a tinted disc so five different drawings read as one family. */
.topic-card {
  flex: 0 1 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 30px 16px 26px;
  border: 1px solid var(--line);
  border-radius: var(--leaf-r);
  background: var(--paper);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.topic-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.topic-card h3 {
  margin: 0;
}

.topic-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--teal-deep);
  transition: background-color 160ms ease;
}

.topic-card:hover .topic-icon {
  background: #d3eef4;
}

/* Two strokes per drawing: the main line in the deep teal, one detail in the
   brand green. The green is a flourish, never what carries the meaning. */
.topic-icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topic-icon svg .accent {
  stroke: var(--leaf);
}

.topic-card .topic-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal-deep);
}

.band-mist .topic-card {
  border-color: rgba(6, 90, 111, 0.12);
}

/* -------------------------------- steps -------------------------------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.step {
  position: relative;
  padding-top: 26px;
  border-top: 2px solid var(--line);
}

.step-mark {
  position: absolute;
  top: -7px;
  inset-inline-start: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--leaf);
}

.step h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.step p {
  color: var(--muted);
  margin: 0;
}

/* ------------------------------- people -------------------------------- */

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.band-people {
  background: var(--mist);
}

.person-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 0 40px;
  background: #fff;
}

.person-card:nth-child(even) {
  border-radius: 40px 0;
}

.person-card h2 {
  margin: 0;
  font-weight: 800;
}

.person-card p {
  margin: 0;
  color: var(--muted);
}

/* ----------------------------- page heads ------------------------------ */

.page-head {
  padding-block: clamp(34px, 5vw, 72px) clamp(20px, 3vw, 36px);
  background: linear-gradient(180deg, var(--mist) 0%, #ffffff 100%);
}

.page-head h1 {
  margin-bottom: 0.4em;
}

/* ------------------------------ community ------------------------------ */

.community-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.community-photo {
  margin: 0;
  border-radius: 0 40px;
  overflow: hidden;
  background: var(--mist);
}

.community-copy h2 {
  margin-top: 0;
}

.community-copy p {
  color: var(--muted);
}

.values-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.values-row li {
  padding: 10px 24px;
  border-radius: var(--leaf-r);
  background: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--teal);
  font-size: 1.1rem;
}

.values-row li:nth-child(even) {
  border-radius: var(--leaf-r-mirror);
}

.bio-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.bio-portrait {
  text-align: center;
}

.bio-name {
  margin: 16px 0 0;
  font-family: var(--font-display);
  color: var(--teal-deep);
  font-size: 1.15rem;
}

.bio-role {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.bio-copy p {
  color: var(--muted);
}

/* -------------------------------- CTA ---------------------------------- */

/* The teal block again, this time with its deep corner at the top. */
.band-cta {
  background: var(--teal);
  color: #fff;
  border-radius: 80px 0 0 0;
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.band-cta h2 {
  color: #fff;
  margin-bottom: 0.2em;
}

.band-cta p {
  color: #fff;
  max-width: 58ch;
  margin-bottom: 22px;
}

/* ------------------------------- library ------------------------------- */

.library-body {
  padding-bottom: clamp(48px, 7vw, 96px);
}

.gate-card {
  max-width: 620px;
  margin-bottom: clamp(48px, 7vw, 96px);
  padding: clamp(26px, 4vw, 40px);
  border-radius: 0 40px;
  background: var(--mist);
}

.gate-card h2,
.gate-card .gate-title {
  margin-top: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 700;
}

.gate-card p {
  color: var(--muted);
  margin-bottom: 22px;
}

.filters {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  align-items: start;
  gap: clamp(18px, 3vw, 36px);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-soft);
}

.search-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.search-field label,
.topic-filter legend {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--teal-deep);
  padding: 0;
}

.search-field input {
  min-height: 48px;
  padding: 10px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.search-field input:focus {
  border-color: var(--teal);
}

.topic-filter {
  margin: 0;
  padding: 0;
  border: 0;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 9px;
}

.chip {
  min-height: 44px;
  padding: 9px 18px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.chip:hover {
  border-color: var(--teal);
  color: var(--teal-deep);
}

.chip[aria-pressed="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.result-count {
  margin: 22px 0 18px;
  font-size: 0.92rem;
  color: var(--muted);
}

.recording-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.recording-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--leaf-r);
  background: var(--paper);
  overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.recording-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--mist);
  overflow: hidden;
}

.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Branded stand-in when a recording has no cover image yet: the trail arc on
   a tinted panel, tinted with that topic's shade. No stock photography and
   nothing that pretends to be a frame from the session. */
.card-cover-fallback {
  display: block;
  width: 100%;
  height: 100%;
}

.card-topic {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--teal-deep);
}

.card-demo {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(22, 35, 42, 0.82);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 20px 20px 22px;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.card-meta .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--leaf);
}

.card-body h3 {
  margin: 0;
}

.card-summary {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-tags li {
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--muted);
}

.card-action {
  margin-top: auto;
  padding-top: 14px;
}

.card-action .primary-button {
  width: 100%;
  min-height: 44px;
  padding-inline: 18px;
  font-size: 0.97rem;
}

.empty-state {
  max-width: 560px;
  margin-top: 36px;
  padding: clamp(24px, 4vw, 38px);
  border-radius: 0 40px;
  background: var(--mist);
}

.empty-state h2 {
  margin-top: 0;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.empty-state p {
  color: var(--muted);
}

.topic-empty {
  padding: 26px;
  border-radius: var(--leaf-r);
  color: var(--muted);
  background: var(--mist);
}

/* -------------------------------- watch -------------------------------- */

.watch-wrap {
  padding-block: clamp(22px, 3vw, 40px) clamp(48px, 7vw, 96px);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: none;
}

.back-link:hover {
  color: var(--teal);
}

.watch-head {
  margin: 18px 0 22px;
  max-width: 70ch;
}

.watch-head h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  margin-bottom: 0.3em;
}

.watch-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.93rem;
  color: var(--muted);
}

.watch-meta .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--leaf);
}

.player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0 40px;
  overflow: hidden;
  background: var(--teal-deep);
}

.player-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.player-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Stand-in for a recording with no Vimeo link attached yet. It is deliberately
   not a play button: it must not read as a player that is merely slow. */
.player-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 28px;
  color: #fff;
  text-align: center;
}

.player-placeholder strong {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 400;
}

.player-placeholder span {
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.player-error {
  padding: 22px;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--mist);
  color: var(--teal-deep);
}

.watch-body {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(24px, 3vw, 40px);
}

.watch-summary h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.watch-summary p {
  color: var(--muted);
}

.watch-files {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.watch-files a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 9px 18px;
  border: 1.5px solid var(--teal);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
}

.watch-aside h2 {
  font-size: 1.05rem;
}

.related-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.related-list a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}

.related-list a:hover {
  color: var(--teal);
}

.related-list .related-date {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
}

/* -------------------------------- login -------------------------------- */

.login-wrap {
  padding-block: clamp(40px, 6vw, 88px);
  display: flex;
  justify-content: center;
}

.login-card {
  width: min(520px, 100%);
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line-soft);
  border-radius: 0 40px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.login-card h1 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.login-intro {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.97rem;
}

.login-form label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--teal-deep);
}

.login-form input {
  min-height: 50px;
  padding: 11px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.login-form input:focus {
  border-color: var(--teal);
}

.code-input {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.4em;
  text-align: center;
}

.login-form .primary-button {
  margin-top: 8px;
}

.login-form .text-button {
  align-self: center;
  margin-top: 4px;
}

.login-status {
  margin: 16px 0 0;
  min-height: 1.5em;
  font-size: 0.95rem;
  color: var(--teal-deep);
}

.login-status.is-error {
  color: #a3314f;
}

.login-help {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9rem;
  color: var(--muted);
}

/* -------------------------------- footer ------------------------------- */

/* Centred on a white-to-pale-cyan fade, with the links as white pills — the
   brand site's footer. */
.site-footer {
  background: linear-gradient(180deg, #ffffff 0%, var(--mist) 100%);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-block: clamp(36px, 5vw, 56px) clamp(24px, 3vw, 36px);
}

.footer-logo {
  height: 64px;
  width: auto;
  margin-bottom: 10px;
}

.footer-tagline {
  margin: 0;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink);
}

.footer-free {
  margin: 0;
  font-weight: 500;
  color: var(--teal-deep);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 16px;
  color: var(--ink);
}

.footer-contact a {
  display: inline-block;
  padding-block: 10px;
  margin-block: -10px;
  font-weight: 700;
  color: var(--teal-deep);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 18px;
  border-radius: 30px;
  background: #fff;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(6, 90, 111, 0.08);
}

.footer-links a:hover {
  color: var(--teal-deep);
  box-shadow: 0 4px 14px rgba(6, 90, 111, 0.16);
}

.footer-base {
  border-top: 1px solid var(--line);
}

.footer-base p {
  width: min(var(--wrap), 100%);
  margin: 0 auto;
  padding: 16px var(--gutter);
  font-size: 0.86rem;
  color: var(--muted);
}

/* -------------------------------- sheet -------------------------------- */

.sheet {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink);
}

.sheet::backdrop {
  background: rgba(6, 90, 111, 0.45);
}

.sheet-close {
  display: flex;
  justify-content: flex-start;
  padding: 14px 14px 0;
}

.sheet-body {
  padding: 4px clamp(20px, 4vw, 32px) clamp(22px, 4vw, 32px);
}

.sheet-body h2 {
  margin-top: 0;
}

.account-email {
  font-weight: 600;
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}

.account-role {
  color: var(--muted);
  font-size: 0.92rem;
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* ------------------------------- routing ------------------------------- */

.view {
  display: none;
}

.view.is-active {
  display: block;
  animation: view-in 260ms ease both;
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------ responsive ----------------------------- */

@media (max-width: 1000px) {
  .intro-grid,
  .mm-intro,
  .community-grid,
  .watch-body,
  .bio-grid {
    grid-template-columns: 1fr;
  }

  .bio-grid {
    justify-items: start;
  }

  .filters {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
  }

  .site-nav a.is-current {
    border-bottom-color: var(--leaf);
  }

  /* Inside the phone menu the topics open in place, pushing the rest down. */
  .nav-drop {
    display: block;
  }

  .nav-drop-toggle {
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    border-bottom: 1px solid var(--line-soft);
    text-align: start;
  }

  .nav-drop-list {
    position: static;
    width: auto;
    max-height: none;
    padding: 8px 0 10px;
  }

  .site-nav .nav-drop-list a {
    box-shadow: none;
  }

  .nav-actions {
    margin-top: 14px;
  }

  .site-nav .nav-actions a {
    justify-content: center;
    min-height: 50px;
  }

  .nav-actions a {
    flex: 1;
  }

  /* On a phone the title comes first and the portrait follows, still standing
     on the teal block — the order the brand site uses on a phone too. */
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "figure";
    row-gap: 8px;
    padding-top: clamp(26px, 5vw, 44px);
  }

  .hero-text {
    padding-block-end: 0;
  }

  .hero-figure {
    max-width: 310px;
  }

  .hero-tags .leaf-tag {
    max-width: 132px;
    padding: 8px 12px 9px;
  }

  .leaf-tag b {
    font-size: 1.1rem;
  }

  .leaf-tag span {
    font-size: 0.86rem;
  }

  /* On a phone the tags take up a larger share of the photo, so all three go
     below her face. */
  .tag-a {
    top: 47%;
    inset-inline-end: -9%;
  }

  .tag-b {
    top: 64%;
    inset-inline-start: -9%;
  }

  .tag-c {
    bottom: 4%;
    inset-inline-end: -6%;
  }

  .teal-block {
    border-radius: 0 0 60px 0;
  }
}

@media (max-width: 560px) {
  .recording-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    gap: 14px;
  }

  .hero-actions .primary-button,
  .hero-actions .ghost-light,
  .hero-actions .btn-white {
    width: 100%;
    text-align: center;
  }

  .values-row li {
    font-size: 0.94rem;
    padding: 8px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}