/* MyHive marketing site: one stylesheet for every page.
   Sizes are the mockups' own pixels (1680px artboards) times --u, so a laptop shows the same
   proportions; max() keeps a floor for phones. Page backgrounds match the mockups (#fbf7f5). */
:root {
  --u: min(1px, calc(100vw / 1680));
  --bg: #fbf7f5;
  --ink: #1d1d1b;
  --muted: #3a3a38;
  --soft: #6e6e6a;
  --yellow: #ffdd15;
  --gutter: max(16px, calc(125 * var(--u)));
  /* the hexagon unit: About's header cluster and the footer clusters both read it, so their cells always match */
  --hex: var(--u);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.btn {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  font-size: max(14px, calc(26 * var(--u)));
  line-height: 1;
  padding: max(10px, calc(16 * var(--u))) max(18px, calc(36 * var(--u)));
  border-radius: 999px;
  text-decoration: none;
  transition: filter .15s;
}
.btn.lg { font-size: max(15px, calc(30 * var(--u))); padding: max(11px, calc(15 * var(--u))) max(20px, calc(36 * var(--u))); }
.btn:hover { filter: brightness(.95); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Top bar. Pinned to the top of the window; nav.js slides it away (.away) while the page scrolls down
   and back on the way up, and gives it a hairline shadow once the page has moved (.lifted). */
.bar {
  position: sticky; top: 0; z-index: 50;
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex; align-items: center; gap: max(18px, calc(40 * var(--u)));
  height: max(48px, calc(65 * var(--u)));
  padding: 0 max(16px, calc(22 * var(--u)));
  background: #fff;
}
.bar.lifted { box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 20px -10px rgba(0,0,0,.18); }
.bar.away { transform: translateY(-100%); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }
.bar .logo img { width: max(26px, calc(40 * var(--u))); }
.bar nav { display: flex; gap: max(18px, calc(56 * var(--u))); }
.bar nav a { font-size: max(13px, calc(17 * var(--u))); font-weight: 600; text-decoration: none; }
.bar nav a { padding: 4px 0; border-bottom: 2px solid transparent; }
.bar nav a:hover { border-bottom-color: var(--ink); }
.bar nav a[aria-current="page"] { border-bottom-color: var(--yellow); }
/* Register and Log in: one pill, two links */
.bar .account {
  margin-left: auto; display: flex; align-items: center;
  background: var(--yellow); border-radius: 999px;
  font-size: max(13px, calc(17 * var(--u))); font-weight: 700;
}
.bar .account a { text-decoration: none; padding: max(7px, calc(10 * var(--u))) max(12px, calc(20 * var(--u))); border-radius: 999px; }
.bar .account a + a { border-left: 1px solid rgba(0,0,0,.25); border-radius: 0 999px 999px 0; }
.bar .account a:first-child { border-radius: 999px 0 0 999px; }
.bar .account a:hover { background: rgba(0,0,0,.06); }
.bar .account a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The search icon, just left of the pill (search.js; Slava, 2026-10-15). It takes the pill's
   margin-left: auto, so the two sit together at the right. */
.bar .searchbtn {
  margin-left: auto; display: grid; place-items: center;
  width: max(36px, calc(44 * var(--u))); height: max(36px, calc(44 * var(--u)));
  padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink); cursor: pointer;
}
.bar .searchbtn + .account { margin-left: calc(-1 * max(10px, calc(24 * var(--u)))); }
/* Book a call, right of the pill (Slava, 2026-10-22): outlined, so the yellow pill stays the one solid
   thing in the bar. It opens Crystal's GHL onboarding calendar, as every Book a call on the site does. */
.bar .callbtn {
  margin-left: calc(-1 * max(8px, calc(22 * var(--u))));
  font-size: max(13px, calc(17 * var(--u))); font-weight: 700; text-decoration: none; white-space: nowrap;
  padding: max(7px, calc(10 * var(--u))) max(12px, calc(20 * var(--u)));
  border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ink);
}
.bar .callbtn:hover { background: rgba(0,0,0,.06); }
.bar .callbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bar .searchbtn svg { width: max(19px, calc(24 * var(--u))); height: max(19px, calc(24 * var(--u))); }
.bar .searchbtn:hover { background: rgba(0,0,0,.06); }
.bar .searchbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The command search it opens, drawn as the app's is (command-search-modal.component.scss): 560 wide,
   10vh from the top, 16px corners, the page dimmed behind; on a phone it hangs from the top edge. */
dialog.cmdk {
  width: calc(100% - 32px); max-width: 560px; max-height: 70vh;
  margin: 10vh auto auto; padding: 0; border: 0; border-radius: 16px;
  background: #fff; color: var(--ink);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25), 0 0 0 1px #e8e4e1;
  overflow: hidden; flex-direction: column;
  /* the app's search face and rendering (Slava, 2026-10-15): Inter, as src/theme/variables.scss sets
     it, and the browser's default smoothing, which the app keeps; the site's antialiased drew it thinner */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;
}
dialog.cmdk[open] { display: flex; animation: cs-in .2s ease-out; }
dialog.cmdk::backdrop { background: rgba(0,0,0,.5); }
@keyframes cs-in { from { opacity: 0; transform: translateY(-20px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { dialog.cmdk[open] { animation: none; } }
html:has(dialog.cmdk[open]) { overflow: hidden; }
.cmdk svg { flex-shrink: 0; }
.cs-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e8e4e1; }
.cs-head > svg { width: 20px; height: 20px; color: #a8a29e; }
.cs-head input {
  flex: 1; min-width: 0; padding: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 16px; color: var(--ink);
}
.cs-head input::placeholder { color: #a8a29e; }
.cs-esc {
  padding: 4px 8px; border: 0; border-radius: 4px; background: #f0f0f0; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #78716c;
}
.cs-esc .t { display: none; }
.cs-esc:hover { color: var(--ink); }
.cs-esc:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cs-results { flex: 1; overflow-y: auto; padding: 8px 0; }
.cs-results:empty { display: none; }
.cs-section { padding: 0 8px; }
.cs-section + .cs-section { margin-top: 8px; }
.cs-label { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #a8a29e; }
.cs-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
  color: inherit; text-decoration: none; transition: background .1s ease;
}
.cs-item:hover { background: rgba(0,0,0,.04); }
.cs-item.selected { background: #f0f0f0; }
.cs-item > svg { width: 18px; height: 18px; color: #57534e; }
.cs-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cs-title, .cs-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-title { font-size: 14px; font-weight: 500; color: var(--ink); }
.cs-sub { margin-top: 1px; font-size: 12px; color: #a8a29e; }
.cs-enter { display: none; margin-left: auto; color: #a8a29e; }
.cs-enter svg { display: block; width: 14px; height: 14px; }
.cs-item.selected .cs-enter { display: block; }
.cs-note { margin: 4px 12px 0; font-size: 12px; color: #a8a29e; }
.cs-none { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; color: #a8a29e; }
.cs-none svg { width: 32px; height: 32px; margin-bottom: 12px; opacity: .5; }
.cs-none p { margin: 0; font-size: 14px; }
.cs-foot {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-top: 1px solid #e8e4e1;
  font-size: 11px; color: #a8a29e;
}
.cs-foot span { display: flex; align-items: center; gap: 4px; }
.cs-foot i { font-style: normal; opacity: .4; }
.cs-foot kbd {
  padding: 2px 5px; border: 1px solid #e8e4e1; border-radius: 3px; background: rgba(0,0,0,.04);
  font: 500 10px/1.4 ui-monospace, 'SF Mono', SFMono-Regular, Consolas, monospace; color: #a8a29e;
}
/* main sections are jump targets now; leave room for the bar when it slides back */
main section[id], .split.duo .copy[id] { scroll-margin-top: max(56px, calc(72 * var(--u))); }
@media (max-width: 600px) {
  dialog.cmdk { width: 100%; max-width: 100%; max-height: 80vh; margin-top: 0; border-radius: 0 0 16px 16px; }
  .cs-esc { text-transform: none; font-size: 12px; letter-spacing: 0; }
  .cs-esc .k { display: none; }
  .cs-esc .t { display: inline; }
  .cs-foot { display: none; }
}
@media (max-width: 720px) {
  .bar { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 8px; }
  .bar nav { order: 3; width: 100%; justify-content: space-between; padding: 6px 0 4px; }
}

/* Shared type */
.h-xl {
  margin: 0 0 calc(60 * var(--u));
  font-size: max(22px, calc(52 * var(--u))); font-weight: 600; line-height: 1.3;
}
/* Events' and Guides' opening lines: a touch smaller than .h-xl, and bold (Slava, 2026-10-08) */
.h-xl.bolder { font-size: max(21px, calc(46 * var(--u))); font-weight: 700; letter-spacing: -.01em; }
.h-lg {
  margin: 0 0 calc(40 * var(--u));
  font-size: max(24px, calc(58 * var(--u))); font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
}
.body {
  margin: 0 0 calc(40 * var(--u));
  /* a touch smaller than the mockups' 34/40 and black, not grey (Slava, 2026-10-08) */
  font-size: max(15px, calc(31 * var(--u))); line-height: 1.38; color: var(--ink);
}
.body.lg { font-size: max(16px, calc(36 * var(--u))); line-height: 1.4; }
.body strong { color: var(--ink); font-weight: 700; }
/* a paragraph's lines as a bulleted list (Seekers' Meet guides) */
.body.bullets { padding-left: 1.15em; }
.body.bullets li { margin: 0 0 .25em; padding-left: .2em; }
/* a short line set a touch smaller than the paragraph above it (Events' One place. Many experiences.) */
.body.small { font-size: max(14px, calc(27 * var(--u))); }
.caption { margin: calc(40 * var(--u)) 0 0; font-size: max(13px, calc(24 * var(--u))); color: var(--soft); }

/* A page's opening: words on the left, one hexagon photo bleeding off the right edge */
/* --pb (design units) / --pb-sm (phones) add room under a hero that needs it (Events) */
.page-hero { position: relative; min-height: calc(820 * var(--u)); padding: 0 var(--gutter); margin-bottom: calc(var(--pb, 0) * var(--u)); }
/* The hero hexagon: the designed picture (--w x --h) as a window, and inside it a 960x840 hexagon
   (#hex-hero, the site's one corner) whose left point sits at --hl, --ht minus 420 from the picture's
   top. The point is 8px inside the edge baked into the picture, so no page colour shows, and a zoom
   about the centre only pushes that colour further out. */
/* --pw, when set, is the frame's width on the page and --w x --h the frame in hexagon units, so the
   hexagon can sit wholly inside it (--ht 0) with every corner rounded; --clip picks the #hex-* clip
   made for the size it renders at, so the corners round the same everywhere (tools/hex-clip.js) */
.page-hero .hex {
  position: absolute; top: 0; right: 0; display: block; overflow: hidden;
  width: calc(var(--pw, var(--w, 647)) * var(--u)); aspect-ratio: var(--w, 647) / var(--h, 734);
}
.hex-cut {
  position: absolute; display: block;
  left: calc(var(--hl) / var(--w, 647) * 100%); top: calc(var(--ht) / var(--h, 734) * 100%);
  width: calc(960 / var(--w, 647) * 100%); height: calc(840 / var(--h, 734) * 100%);
  -webkit-clip-path: var(--clip, url(#hex-hero)); clip-path: var(--clip, url(#hex-hero));
}
.hex-cut img, .hex-cut video {
  position: absolute; max-width: none;
  left: calc(-1 * var(--hl) / 960 * 100%); top: calc(-1 * var(--ht) / 840 * 100%);
  width: calc(var(--w, 647) / 960 * 100%); height: calc(var(--h, 734) / 840 * 100%);
  transition: transform 6s cubic-bezier(.2, .6, .2, 1);
}
/* a YouTube video in a hexagon (Events, the festival's own): the same window as a picture, the 16:9
   player as tall as the window and centred, so it covers it; never takes a click; the thumbnail under it */
.hex-cut .ytframe {
  position: absolute; overflow: hidden;
  left: calc(-1 * var(--hl) / 960 * 100%); top: calc(-1 * var(--ht) / 840 * 100%);
  width: calc(var(--w, 647) / 960 * 100%); height: calc(var(--h, 734) / 840 * 100%);
  transition: transform 6s cubic-bezier(.2, .6, .2, 1);
}
.hex-cut .ytframe img, .hex-cut .ytframe iframe {
  position: absolute; top: 50%; left: 50%; height: 100%; width: auto; aspect-ratio: 16 / 9;
  max-width: none; border: 0; transform: translate(-50%, -50%); pointer-events: none;
}
/* the player stays hidden behind the thumbnail until the page marks it ready, so YouTube's start-up
   buttons never show */
.hex-cut .ytframe iframe { opacity: 0; transition: opacity .8s ease; }
.hex-cut .ytframe iframe.ready { opacity: 1; }
.hex-cut:hover .ytframe { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .hex-cut .ytframe { transition: none; } .hex-cut:hover .ytframe { transform: none; } }
/* a hero video (Guides) fills the same window; object-fit trims its few pixels of aspect difference */
.hex-cut video { display: block; object-fit: cover; }
.hex-cut:hover img, .hex-cut:hover video { transform: scale(1.08); }
.page-hero .copy { position: relative; padding-top: calc(210 * var(--u)); max-width: calc(var(--tw, 790) * var(--u)); }

/* A picture and a block of words side by side */
.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(60 * var(--u));
  padding: 0 var(--gutter); margin-bottom: calc(var(--mb, 200) * var(--u));
}
.row.bleed-l { padding-left: 0; }
.row.bleed-r { padding-right: 0; }
.row .media img { width: calc(var(--w) * var(--u)); }
/* The site's one tablet (Slava, 2026-10-06): drawn here, not baked into a picture, so it never
   carries a background. A thin, even black bezel with soft rounded corners around a plain app
   screen (img/screen/, shot at 820x1240), --w wide on the 1680 design. */
.tablet {
  display: block; box-sizing: border-box; width: calc(var(--w, 535) * var(--u));
  padding: 3.4%; border-radius: 7% / 4.7%;
  background: #18181a; box-shadow: inset 0 0 0 1px #3a3a3e, 0 20px 50px -24px rgba(24, 24, 26, .35);
}
.row .media .tablet img, .tablet img {
  display: block; width: 100%; max-width: none; margin: 0;
  aspect-ratio: 820 / 1240; object-fit: cover; object-position: top center;
  border-radius: 3.6% / 2.4%; background: #faf7f5;
}
/* The site's phone (Slava, 2026-10-08): the tablet's bezel and shadow on a phone's shape, --w wide on
   the 1680 design. Its screen is a 390x844 window onto one tall screenshot of a live app page, which
   scrolls down, rests, and scrolls back on a loop; the app's bottom bar stays pinned over it, as it
   does in the app. --end is how far the picture travels (a share of its own height). It holds still
   under reduced motion. */
.phone {
  display: block; box-sizing: border-box; width: calc(var(--w, 330) * var(--u));
  padding: 3.6%; border-radius: 15% / 7%;
  background: #18181a; box-shadow: inset 0 0 0 1px #3a3a3e, 0 20px 50px -24px rgba(24, 24, 26, .35);
}
.phone-screen { position: relative; display: block; overflow: hidden; aspect-ratio: 390 / 844; border-radius: 11% / 5.2%; background: #faf7f5; }
.row .media .phone img, .phone img { display: block; width: 100%; max-width: none; margin: 0; }
/* 52s, half the speed it had (Slava, 2026-10-22: was 26s) */
.phone .scroll { position: absolute; top: 0; left: 0; animation: phone-scroll 52s ease-in-out var(--delay, 0s) infinite; }
.phone .tabbar { position: absolute; left: 0; bottom: 0; }
@keyframes phone-scroll {
  0%, 8% { transform: translateY(0); }
  46%, 54% { transform: translateY(var(--end, -70%)); }
  92%, 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .phone .scroll { animation: none; } }

/* The growing client list (Guides, clients.js; Slava, 2026-10-13): the app's Clients page drawn in
   the tablet's screen, the same shape and corners as a screenshot. Sizes are container units, so it
   scales with the tablet as a picture would, set as if on a 600px screen (a touch larger than the
   820px shots) to stay readable. */
/* the tablet is the container, so the screen's own padding and type measure against it too (on the
   screen itself they fell back to the window's width) */
.tablet.clients { container-type: inline-size; }
.tablet.clients .cl-screen {
  position: relative; overflow: hidden;
  aspect-ratio: 820 / 1240; border-radius: 3.6% / 2.4%; background: #faf7f5;
  padding: 4cqw 4cqw 0; color: #1c1917; font-size: 2.2cqw; line-height: 1.35;
}
.cl-screen p { margin: 0; }
.cl-bar { margin: -4cqw -4cqw 3.5cqw !important; padding: 2.2cqw 4cqw; background: #fff; border-bottom: 1px solid #ece7e3; font-size: 2cqw; color: #736c66; }
.cl-bar b { color: #1c1917; font-weight: 600; }
.cl-title { font-size: 4.6cqw; font-weight: 700; letter-spacing: -.01em; }
.cl-sub { margin-top: .6cqw !important; font-size: 2.2cqw; color: #736c66; }
.cl-search { margin-top: 3cqw !important; padding: 1.8cqw 2.6cqw; border: 1px solid #e8e4e1; border-radius: 1.8cqw; background: #fff; color: #a8a29e; }
.cl-pills { display: flex; gap: 1.4cqw; margin: 2.4cqw 0 3cqw !important; }
.cl-pills span { padding: .9cqw 2.2cqw; border: 1px solid #e8e4e1; border-radius: 99px; background: #fff; font-size: 1.9cqw; font-weight: 600; color: #57534e; white-space: nowrap; }
.cl-pills span.on { border-color: #1c1917; background: #1c1917; color: #fff; }
.cl-pills i { font-style: normal; opacity: .7; margin-left: .6cqw; }
.cl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6cqw; }
.cl-row {
  display: flex; align-items: center; gap: 2.2cqw; max-height: 20cqw; overflow: hidden;
  padding: 2.2cqw 2.4cqw; border: 1px solid #f0ece9; border-radius: 2.4cqw; background: #fff;
  transition: max-height .6s ease, opacity .6s ease, padding .6s ease, margin .6s ease;
}
.cl-row.arriving { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -1.6cqw; }
.cl-row.arrived { animation: cl-new 3.5s ease-out; }
@keyframes cl-new { 0%, 35% { background: #fff6c4; border-color: var(--yellow); } 100% { background: #fff; border-color: #f0ece9; } }
.cl-dot { flex: none; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #2dd36f; }
.cl-dot.guest { background: #9b7be0; }
.cl-av { flex: none; display: flex; align-items: center; justify-content: center; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; font-size: 2.2cqw; font-weight: 700; color: #57534e; }
.cl-main { display: flex; flex-direction: column; gap: .4cqw; flex: 1; min-width: 0; }
.cl-name { font-size: 2.5cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-meta { display: flex; align-items: center; gap: 1.4cqw; font-size: 1.95cqw; color: #736c66; white-space: nowrap; overflow: hidden; }
.cl-chip { padding: .3cqw 1.4cqw; border-radius: 99px; background: #faf7f5; border: 1px solid #f0ece9; color: #57534e; }
.cl-end { display: flex; align-items: center; gap: 1.6cqw; flex: none; }
.cl-when { font-size: 1.9cqw; color: #a8a29e; }
.cl-when.recent { color: #2a9d5c; font-weight: 600; }
.cl-badge { padding: .4cqw 1.4cqw; border-radius: 1cqw; background: #e3f6ea; color: #23864e; font-size: 1.75cqw; font-weight: 700; }
.cl-badge.guest { background: #efe8fb; color: #7b5cc4; }
.cl-arrow { font-size: 3cqw; color: #c4bdb7; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .cl-row { transition: none; } .cl-row.arrived { animation: none; } }

/* The weekend schedule (Events, schedule.js; Slava, 2026-10-13): the site's tablet turned on its side,
   the app's event page drawn in its screen the way the client list is, sizes in container units of
   the tablet. It sits in the centred list's own column, as wide as the words under it: the container
   gives it no width of its own, so the words alone set the column. Colours are the app's: its page
   and card, its purple, and the grid's hairlines and slots. */
.tablet.schedule {
  --accent: #8a5fc4;
  container-type: inline-size; width: 100%;
  margin-bottom: max(40px, calc(150 * var(--u)));
  padding: 2.6%; border-radius: 4.6% / 7%;
}
.ev-screen {
  display: flex; flex-direction: column; overflow: hidden;
  aspect-ratio: 1240 / 820; border-radius: 2.2% / 3.4%; background: #faf7f5;
  color: #1c1917; font-size: 1.2cqw; line-height: 1.3;
}
.ev-screen p { margin: 0; }
.ev-top { flex: none; display: flex; align-items: center; gap: 3cqw; height: 4.4cqw; padding: 0 2cqw; background: #faf7f5; border-bottom: 1px solid #ece7e3; }
/* the small pictures in the screen are not screenshots: .tablet img's shape and plate stay off them */
.ev-screen img { aspect-ratio: auto; border-radius: 0; background: none; }
.ev-top img { width: 2.6cqw; }
.ev-top .ev-in { margin-left: auto; }
.ev-top .ev-up { padding: .5cqw 1.1cqw; border-radius: .7cqw; background: var(--accent); color: #fff; }
.ev-hero {
  position: relative; flex: none; display: flex; flex-direction: column; justify-content: flex-end;
  height: 13cqw; padding: 0 6cqw 1.6cqw; color: #fff;
  background: #2b2522 url(img/e-village-mancamp.jpg) center 35% / cover no-repeat;
}
.ev-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.72)); }
.ev-hero > * { position: relative; }
.ev-kicker { font-size: .85cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ev-title { margin: .2cqw 0 .5cqw !important; font-size: 3.1cqw; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.ev-meta { font-size: 1.1cqw; opacity: .92; }
.ev-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 2cqw 6cqw 2.4cqw; }
.ev-head-row { display: flex; align-items: center; justify-content: space-between; }
.ev-h { font-size: 1.85cqw; font-weight: 700; }
.ev-toggle { display: flex; padding: .25cqw; border: 1px solid #e8e4e1; border-radius: 99px; background: #fafafa; font-size: 1cqw; font-weight: 600; color: #736c66; }
.ev-toggle span { padding: .5cqw 1.1cqw; border-radius: 99px; }
.ev-toggle .on { background: #fff; color: #1c1917; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.ev-sub { margin-top: .4cqw !important; font-size: 1.05cqw; color: #736c66; }
.ev-days { display: flex; gap: .7cqw; margin: 1.2cqw 0 1.3cqw !important; }
.ev-day {
  display: flex; flex-direction: column; align-items: center; gap: .15cqw; min-width: 5.6cqw;
  padding: .7cqw 1.1cqw; border: 1px solid #e8e4e1; border-radius: 1cqw; background: #fff; color: #57534e;
  font-size: .95cqw; transition: background .3s, color .3s, border-color .3s;
}
.ev-day b { font-size: 1.2cqw; font-weight: 700; color: #1c1917; transition: color .3s; }
.ev-day.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ev-day.on b { color: #fff; }
/* the grid: a time column, then a column per guide, its head on top */
.ev-grid {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 4.4cqw repeat(3, 1fr); grid-template-rows: auto 1fr;
  border: 1px solid #e8e4e1; border-radius: 1cqw; background: #fff; overflow: hidden;
}
.ev-corner { border-bottom: 1px solid #e8e4e1; }
.ev-head { display: flex; align-items: center; gap: .7cqw; min-width: 0; padding: .9cqw .9cqw .7cqw; border-bottom: 1px solid #e8e4e1; border-left: 1px solid #ececec; }
.ev-screen .ev-head img { flex: none; width: 2.7cqw; height: 2.7cqw; margin: 0; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.ev-head-text { display: flex; flex-direction: column; gap: .15cqw; min-width: 0; }
.ev-head-name { font-size: 1.15cqw; font-weight: 700; }
.ev-head-sub { font-size: .9cqw; color: #736c66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-times, .ev-col { position: relative; }
.ev-col { border-left: 1px solid #ececec; }
/* the day's hours inside each column, a hairline on every hour; the inset keeps 9am's label in view */
.ev-track { position: absolute; inset: 1cqw 0 .6cqw; }
.ev-col .ev-track { background: repeating-linear-gradient(to bottom, #ececec 0, #ececec 1px, transparent 1px, transparent 12.5%); }
.ev-hour { position: absolute; right: .5cqw; transform: translateY(-50%); font-size: .85cqw; color: #a8a29e; white-space: nowrap; }
.ev-slot {
  position: absolute; left: .4cqw; right: .4cqw; overflow: hidden;
  padding: .25cqw .6cqw; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: .5cqw;
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  font-size: .95cqw; font-weight: 600; transition: opacity .35s ease;
}
.ev-slot.short { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; font-size: .8cqw; line-height: 1; }
.ev-slot-time, .ev-slot-cap { display: block; }
.ev-slot-cap { font-size: .85cqw; font-weight: 400; color: #57534e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-grid.fading .ev-slot { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ev-slot, .ev-day, .ev-day b { transition: none; } }

/* The body map (Seekers, bodymap.js; Slava, 2026-10-14): the app's Body Map drawn in the tablet, a line
   figure in the old screenshot's ink and colours (honey, coral, teal) whose parts light up under the
   pointer or a tap. Three looks on data-look: A dots and a note beside the part, B tinted parts and a
   sheet at the foot, C no tablet, notes called out either side. Sizes are container units. */
.bodymap { container-type: inline-size; --ink-line: #5b4b48; --honey: #fcd27a; --coral: #f07259; }
.bm-screen {
  position: relative; overflow: hidden;
  aspect-ratio: 820 / 1240; border-radius: 3.6% / 2.4%; background: #f3f0ed;
  color: #1c1917; font-size: max(11px, 2.6cqw); line-height: 1.35;
}
.bm-screen p { margin: 0; }
.bm-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: baseline; gap: 2cqw; padding: 4.4cqw 5cqw; }
.bm-bar b { font-size: max(13px, 4.2cqw); font-weight: 700; letter-spacing: -.01em; }
.bm-bar span { font-size: max(10px, 2.3cqw); color: #8a817a; }
.bm-figure { position: absolute; top: 11%; left: 50%; height: 80%; transform: translateX(-50%); overflow: visible; }
.bm-ground { fill: none; stroke: var(--coral); stroke-width: .7; opacity: .45; }
.bm-outline path { fill: none; stroke: var(--ink-line); stroke-width: 2; stroke-linejoin: round; }
.bm-part {
  --skin: #fbf9f7;
  fill: var(--skin); stroke: #ddd3cd; stroke-width: .5; stroke-linejoin: round;
  cursor: pointer; outline: none; transition: fill .35s, stroke .2s, stroke-width .2s;
}
.bm-part:hover { fill: color-mix(in srgb, var(--honey) 45%, var(--skin)); }
.bm-part.on { fill: color-mix(in srgb, var(--c, var(--honey)) 85%, var(--skin)); }
.bm-part:focus-visible { stroke: var(--ink-line); stroke-width: 1.4; }
.bm-dots { pointer-events: none; }
.bm-dot .core { fill: var(--c); }
.bm-dot .ring { fill: #fff; filter: drop-shadow(0 .6px 1.2px rgba(0, 0, 0, .18)); }
.bm-dot .pulse { fill: var(--c); opacity: 0; transform-box: fill-box; transform-origin: center; animation: bm-pulse 2.6s ease-out infinite; }
.bm-dot .core, .bm-dot .ring { transform-box: fill-box; transform-origin: center; transition: transform .3s; }
.bm-dot.on .core, .bm-dot.on .ring { transform: scale(1.3); }
@keyframes bm-pulse { 0% { opacity: .5; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(1.9); } }

.bm-card {
  position: absolute; z-index: 2; width: 46cqw; padding: 3.2cqw 3.6cqw;
  border-radius: 3cqw; background: #fff; box-shadow: 0 2cqw 6cqw -2cqw rgba(28, 25, 23, .28);
  opacity: 0; transform: translateY(1.5cqw); pointer-events: none;
  transition: opacity .3s, transform .3s, left .45s ease, top .45s ease;
}
.bm-card.on { opacity: 1; transform: none; pointer-events: auto; }
@container (max-width: 420px) { .bm-card { width: 56cqw; } }
.bm-meta.fresh { color: #2a9d5c; font-weight: 600; }
/* the add form: a button under a note, then how it feels, how strongly, a word, and Save */
.bm-card button { font: inherit; color: inherit; cursor: pointer; }
.bm-add {
  display: block; width: 100%; margin-top: 2cqw; padding: 1.4cqw 0; border: 1px dashed #d6ccc6; border-radius: 99px;
  background: none; font-size: max(11px, 2.3cqw) !important; font-weight: 700; color: #57534e !important;
}
.bm-add:hover { border-color: var(--ink-line); background: #faf7f5; }
.bm-x { flex: none; width: 1.6em; height: 1.6em; padding: 0; border: 0; border-radius: 50%; background: #f3efec; font-size: max(13px, 2.8cqw) !important; line-height: 1; }
.bm-q { margin-top: 1.4cqw !important; font-size: max(11px, 2.3cqw); color: #8a817a; }
.bm-chips { display: flex; flex-wrap: wrap; gap: 1.2cqw; margin-top: 1.4cqw; }
.bm-chip {
  padding: .9cqw 2.2cqw; border: 1px solid #e8e2dd; border-radius: 99px; background: #fff;
  font-size: max(11px, 2.3cqw) !important; font-weight: 600; transition: background .2s, border-color .2s;
}
.bm-chip:hover { border-color: var(--c); }
.bm-chip.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 35%, #fff); }
.bm-chips.words .bm-chip { font-weight: 500; }
.bm-level.pick { margin-top: 2.2cqw; }
.bm-level.pick button { flex: 1; height: max(12px, 2.6cqw); padding: 0; border: 0; border-radius: 99px; background: #eee9e5; }
.bm-level.pick button.on { background: var(--c); }
.bm-save {
  display: block; width: 100%; margin-top: 2.2cqw; padding: 1.5cqw 0; border: 0; border-radius: 99px;
  background: #1c1917; color: #fff !important; font-size: max(11px, 2.4cqw) !important; font-weight: 700;
}
.bm-save:disabled { background: #e8e2dd; color: #8a817a !important; cursor: default; }
.bm-card button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bm-head { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.bm-name { font-weight: 700; font-size: max(12px, 3cqw); }
.bm-kind {
  flex: none; padding: .5cqw 1.8cqw; border-radius: 99px; font-size: max(10px, 2.1cqw); font-weight: 700;
  background: color-mix(in srgb, var(--c) 28%, #fff); color: #4a3f3b;
}
.bm-note { margin-top: 1.2cqw !important; color: #57534e; }
.bm-meta { margin-top: 1.6cqw !important; font-size: max(10px, 2.2cqw); color: #8a817a; }
.bm-card.empty .bm-note { color: #8a817a; }
.bm-level { display: flex; align-items: center; gap: .6cqw; margin-top: 2cqw; }
.bm-level i { flex: 1; height: 1.3cqw; border-radius: 99px; background: #eee9e5; }
.bm-level i.on { background: var(--c); }
.bm-level b { margin-left: 1.2cqw; font-size: max(10px, 2.2cqw); font-weight: 700; color: #57534e; }

.bm-flip {
  position: absolute; z-index: 3; display: flex; padding: .7cqw; border: 0; border-radius: 99px;
  background: #fff; box-shadow: 0 1cqw 3cqw -1cqw rgba(28, 25, 23, .25);
  font: inherit; font-size: max(11px, 2.4cqw); font-weight: 600; color: #8a817a; cursor: pointer;
}
.bm-flip span { padding: 1cqw 3cqw; border-radius: 99px; transition: background .25s, color .25s; }
.bm-flip span.on { background: #1c1917; color: #fff; }
.bm-flip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bm-callouts { display: none; }

/* A: dots on the noted parts, the note beside the dot, Front/Back at the top right (the journal
   covers the tablet's foot) */
.bodymap[data-look="A"] .bm-flip { top: 3.4cqw; right: 4cqw; }

/* The tablet and its journal (Slava, 2026-10-14): together as wide as the tablet alone was. The tablet
   is the smaller of the two and sits right; the journal card hangs over its lower left corner, toward
   the words, below where the map's notes open. */
/* sizes in the journal are container units of the pair (the journal is about half of it). 642 is the
   old tablet's 535 and a fifth more (Slava, 2026-10-14), closing the gap to the words. */
.bm-pair { position: relative; container-type: inline-size; width: calc(642 * var(--u)); padding-bottom: 9%; }
.row .media .bm-pair .tablet.bodymap { width: 78%; margin-left: auto; }
.bm-journal {
  position: absolute; left: 0; bottom: 0; z-index: 4; width: 54%; box-sizing: border-box; --c: var(--honey);
  padding: 3cqw 3.3cqw; border-radius: 2.8cqw; background: #fff;
  box-shadow: 0 1.6cqw 5cqw -1.6cqw rgba(28, 25, 23, .3), 0 0 0 1px #f0ece9;
  font-size: max(12px, 2.9cqw); line-height: 1.4; color: #1c1917;
}
.bm-journal p { margin: 0; }
.bj-head { display: flex; align-items: baseline; justify-content: space-between; }
.bj-head b { font-size: max(13px, 3.5cqw); font-weight: 700; }
.bj-head span { font-size: max(10px, 2.4cqw); color: #8a817a; }
.bj-tag {
  display: inline-block; margin-top: 1.6cqw !important; padding: .45cqw 1.6cqw; border-radius: 99px;
  background: color-mix(in srgb, var(--c) 28%, #fff); font-size: max(10px, 2.3cqw); font-weight: 700; color: #4a3f3b;
  transition: background .4s;
}
.bj-text { min-height: 4.2em; margin-top: 1.4cqw !important; color: #44403c; transition: opacity .4s; }
.bj-caret { display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: #1c1917; animation: bj-blink 1s steps(1) infinite; }
@keyframes bj-blink { 50% { opacity: 0; } }
.bj-foot { height: 1.4em; margin-top: 1.1cqw !important; font-size: max(10px, 2.3cqw); font-weight: 600; color: #2a9d5c; }
.bj-saved { opacity: 0; transition: opacity .4s; }
.bm-journal.saved .bj-saved { opacity: 1; }
.bm-journal.saved .bj-caret { visibility: hidden; }
.bm-journal.clearing .bj-text, .bm-journal.clearing .bj-saved { opacity: 0; }
/* while a visitor adds an observation, the journal steps aside so the form is never under it */
.bm-journal { transition: opacity .3s, transform .3s; }
.bm-pair:has(.bm-card.compose) .bm-journal { opacity: 0; transform: translateY(2cqw); pointer-events: none; }
/* C has no journal; the pair is a size container, so it needs C's width of its own, never auto */
.bm-pair:has(.bodymap[data-look="C"]) { width: calc(700 * var(--u)); padding-bottom: 0; }
.bm-pair:has(.bodymap[data-look="C"]) .bm-journal { display: none; }
.row .media .bm-pair .tablet.bodymap[data-look="C"] { width: 100%; margin: 0; }
@media (max-width: 720px) {
  .bm-pair:has(.bodymap[data-look="C"]) { width: 100%; }
  .bm-pair { width: 100%; max-width: 400px; margin: 0 auto; padding-bottom: 12%; }
  .row .media .bm-pair .tablet.bodymap { width: 80%; max-width: none; margin: 0 0 0 auto; }
  .bm-journal { width: 60%; }
  .row .media .bm-pair .tablet.bodymap[data-look="C"] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bj-caret { animation: none; } .bj-text, .bj-saved, .bj-tag { transition: none; } }

/* B: the noted parts tinted by how strongly they are felt; the note is a sheet at the foot with its trend */
.bodymap[data-look="B"] .bm-figure { top: 10%; height: 62%; }
.bodymap[data-look="B"] .bm-dots { display: none; }
.bodymap[data-look="B"] .bm-part.noted { fill: color-mix(in srgb, var(--c) calc(var(--a) * 100%), var(--skin)); }
.bodymap[data-look="B"] .bm-part.on { fill: var(--c, var(--honey)); stroke: #1c1917; stroke-width: 1.2; }
.bodymap[data-look="B"] .bm-flip { top: 3.4cqw; right: 4cqw; }
.bodymap[data-look="B"] .bm-card {
  left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; min-height: 25%;
  padding: 4.4cqw 6cqw 5cqw; border-radius: 5cqw 5cqw 0 0; box-shadow: 0 -1cqw 5cqw -2cqw rgba(28, 25, 23, .2);
  transform: translateY(3cqw); transition: opacity .3s, transform .3s;
}
.bodymap[data-look="B"] .bm-card::before { content: ""; position: absolute; top: 1.6cqw; left: 50%; width: 9cqw; height: .9cqw; margin-left: -4.5cqw; border-radius: 99px; background: #e5dfda; }
.bodymap[data-look="B"] .bm-card.on { transform: none; }
.bodymap[data-look="B"] .bm-name { font-size: max(13px, 3.6cqw); }
.bm-trend { display: flex; align-items: center; gap: 4cqw; margin-top: 2.6cqw; }
.bm-spark { width: 42cqw; height: 12cqw; flex: none; overflow: visible; }
.bm-trend-text { display: flex; flex-direction: column; }
.bm-trend-text b { font-size: max(14px, 4.4cqw); font-weight: 800; letter-spacing: -.02em; }
.bm-trend-text span { font-size: max(10px, 2.2cqw); color: #8a817a; }

/* C: no tablet. The figure stands on the page and each note is called out to one side, joined to its
   part by a hairline; on a narrow screen the callouts fold away and the note sits under the figure. */
.bodymap[data-look="C"] { width: calc(700 * var(--u)); padding: 0; border-radius: 0; background: none; box-shadow: none; }
.bodymap[data-look="C"] .bm-screen { aspect-ratio: 700 / 760; border-radius: 0; background: none; overflow: visible; }
.bodymap[data-look="C"] .bm-bar, .bodymap[data-look="C"] .bm-dot .pulse { display: none; }
.bodymap[data-look="C"] .bm-figure { top: 0; height: 100%; }
.bodymap[data-look="C"] .bm-part { --skin: #fff; }
.bodymap[data-look="C"] .bm-flip { right: 0; bottom: 0; }
.bodymap[data-look="C"] .bm-callouts { display: block; position: absolute; inset: 0; pointer-events: none; }
.bm-leader { fill: none; stroke: var(--c); stroke-width: .7; opacity: .7; transition: stroke-width .25s, opacity .25s; }
.bm-leader.on { stroke-width: 1.4; opacity: 1; }
.bm-call {
  position: absolute; width: 25cqw; transform: translateY(-50%); pointer-events: auto;
  display: flex; flex-direction: column; gap: .5cqw; padding: 1.2cqw 0; border: 0; background: none;
  font: inherit; font-size: max(11px, 1.9cqw); text-align: left; color: inherit; cursor: pointer;
  opacity: .7; transition: opacity .25s;
}
.bm-call.l { left: 0; align-items: flex-end; text-align: right; }
.bm-call.r { right: 0; align-items: flex-start; }
.bm-call .bm-name { font-size: max(12px, 2.3cqw); }
.bm-call .bm-note { margin: 0; line-height: 1.3; }
.bm-call.on, .bm-call:hover { opacity: 1; }
.bm-call:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bodymap[data-look="C"] .bm-card { display: none; }
.bodymap[data-look="C"] .bm-card.compose { display: block; left: auto; right: 0; top: auto; bottom: 9cqw; width: 30cqw; z-index: 3; }
@container (max-width: 520px) {
  .bodymap[data-look="C"] .bm-screen { aspect-ratio: auto; padding-top: 118cqw; }
  .bodymap[data-look="C"] .bm-callouts, .bodymap[data-look="C"] .bm-leaders { display: none; }
  .bodymap[data-look="C"] .bm-figure { height: 112cqw; }
  .bodymap[data-look="C"] .bm-card { display: block; position: relative; left: auto !important; top: auto !important; width: auto; min-height: 30cqw; font-size: 14px; transform: none; opacity: 1; }
  .bodymap[data-look="C"] .bm-flip { top: 0; bottom: auto; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-dot .pulse { animation: none; }
  .bm-part, .bm-card, .bm-flip span, .bm-leader, .bm-call { transition: none; }
}

/* a whole device never bleeds: in a bleeding row it keeps the page gutter */
.row.bleed-l .media .tablet { margin-left: var(--gutter); }
.row.bleed-r .media .tablet { margin-right: var(--gutter); }
/* A live hero-style hexagon in a row (Events' village video): the window is --pw wide */
.row .media .hex { position: relative; display: block; overflow: hidden; width: calc(var(--pw) * var(--u)); aspect-ratio: var(--w) / var(--h); }
.row .text { width: calc(var(--tw, 650) * var(--u)); flex: none; }
.row.top { align-items: flex-start; }
/* a row of words alone, centred on the page and only as wide as its own lines (Events' second list) */
.row.centred { justify-content: center; }
.row.centred .text { width: auto; }
.row figure { margin: 0; }
.row .caption { padding-left: calc(2 * var(--u)); }
.h-md {
  margin: 0 0 calc(90 * var(--u));
  font-size: max(22px, calc(48 * var(--u))); font-weight: 600; line-height: 1.3;
}

/* A full-width photo panel with words on it */
.banner {
  position: relative; display: flex; align-items: center;
  margin: 0 var(--gutter) calc(var(--mb, 200) * var(--u));
  min-height: calc(651 * var(--u)); border-radius: max(12px, calc(30 * var(--u)));
  overflow: hidden; color: #fff;
  background: #2c3a24 var(--img) center / cover no-repeat;
}
.banner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.15) 75%);
}
.banner.no-shade::before { content: none; }
.banner .copy { position: relative; padding: calc(60 * var(--u)) calc(94 * var(--u)); }
.banner .h-lg { margin-bottom: calc(24 * var(--u)); }
.banner .body { color: #fff; max-width: calc(820 * var(--u)); margin-bottom: calc(60 * var(--u)); }

/* The call before the footer */
.closing { text-align: center; padding: 0 var(--gutter); margin: calc(260 * var(--u)) 0 calc(110 * var(--u)); }
.closing .h-lg { margin-bottom: calc(50 * var(--u)); }

/* Footer */
footer { position: relative; min-height: calc(900 * var(--u)); text-align: center; }
/* The footer's two hexagon clusters: About's .cell on its grid, cropped by the page edges */
/* z-index lifts them over footer .inner, which spans the full width and would take the pointer */
.comb { --hu: var(--hex); position: absolute; overflow: hidden; z-index: 1; }
.comb.right { top: 0; right: 0; width: calc(323 * var(--hu)); height: calc(395 * var(--hu)); }
.comb.left { bottom: 0; left: 0; width: calc(465 * var(--hu)); height: calc(354 * var(--hu)); }
footer .inner { position: relative; padding-top: calc(260 * var(--u)); }
footer .inner img { width: max(54px, calc(86 * var(--u))); margin: 0 auto calc(30 * var(--u)); }
footer .name { margin: 0 0 calc(34 * var(--u)); font-size: max(15px, calc(30 * var(--u))); font-weight: 600; letter-spacing: -.01em; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin: 0 0 calc(10 * var(--u)); }
/* Footer links rest plain, lighter and softer than the name above them; the underline comes back on hover and focus */
footer li a { font-size: max(13px, calc(24 * var(--u))); font-weight: 400; color: var(--muted); text-decoration: none; text-underline-offset: .2em; }
footer li a:hover, footer li a:focus-visible { color: var(--ink); text-decoration: underline; }
footer li a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- About (index.html) ---------- */
/* At least one screen tall under the bar, so a tall monitor never shows Welcome to the Ecosystem above
   the fold (Slava, 2026-10-15). --spare is the height past the 860 design; the words move down part of it. */
.hero {
  --spare: max(0px, 100svh - max(48px, calc(65 * var(--u))) - calc(860 * var(--u)));
  position: relative; min-height: calc(860 * var(--u) + var(--spare)); padding: 0 var(--gutter);
}
/* The hexagon cluster. --hu is the shared --hex unit, so a phone can show it larger than the page scale. */
.hive {
  --hu: var(--hex);
  position: absolute; top: 0; right: 0;
  width: calc(819 * var(--hu)); height: calc(560 * var(--hu));
  overflow: hidden;
}
.hive-in { position: absolute; inset: 0; }
.cell {
  position: absolute;
  left: calc(var(--x) * var(--hu)); top: calc(var(--y) * var(--hu));
  width: calc(200 * var(--hu)); height: calc(185 * var(--hu));
  -webkit-clip-path: url(#hex-cell); clip-path: url(#hex-cell);
}
.cell img, .hexpic img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  transition: transform 6s cubic-bezier(.2, .6, .2, 1);
}
/* Only the hexagon under the pointer moves, its photo panning its own way (--px/--py); the rest stay still */
.cell:hover img { transform: scale(1.3) translate(var(--px), var(--py)); }
/* Seekers' hexagon wall: About's cells on About's grid, its right column cut by the page edge.
   .media .hexwall .cell img out-ranks .row .media img, which would otherwise size the photos. */
.hexwall { --hu: var(--hex); position: relative; overflow: hidden; width: calc(776 * var(--hu)); height: calc(806 * var(--hu)); }
.media .hexwall .cell img { width: 100%; max-width: none; margin: 0; }
/* The single photo hexagons beside For Guides and For Seekers */
.hexpic { display: block; aspect-ratio: 760 / 681; overflow: hidden; -webkit-clip-path: url(#hex); clip-path: url(#hex); }
.hexpic img { transform: none; }
/* or a video in the same hexagon (About's example clips) */
.hexpic video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 6s cubic-bezier(.2, .6, .2, 1);
}
.hexpic:hover img, .hexpic:hover video { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .cell img, .hexpic img, .hexpic video, .hex-cut img, .hex-cut video { transition: none; }
  .cell:hover img { transform: scale(1.08); }
  .hexpic:hover img, .hexpic:hover video, .hex-cut:hover img, .hex-cut:hover video { transform: none; }
}
.hero .copy { position: relative; padding-top: calc(270 * var(--u) + var(--spare) * .4); max-width: calc(800 * var(--u)); }
.hero .wordmark { width: calc(601 * var(--u)); }
/* bold like the other pages' opening lines (Slava, 2026-10-09; was 500) */
.hero h1 {
  margin: calc(50 * var(--u)) 0 calc(60 * var(--u));
  font-size: max(20px, calc(46 * var(--u))); font-weight: 700; line-height: 1.32; letter-spacing: -.01em;
}
.split {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  padding: 0 var(--gutter); margin-bottom: calc(190 * var(--u));
}
.split .pic { width: calc(760 * var(--u)); }
.split.guides .pic { justify-self: end; margin-right: calc(15 * var(--u)); }
.split.seekers { grid-template-columns: calc(910 * var(--u)) 1fr; }
.split.seekers .pic { margin-left: calc(5 * var(--u)); }
/* About's For Guides and For Seekers as two columns, no pictures (Slava, 2026-10-15) */
.split.duo { align-items: start; column-gap: calc(120 * var(--u)); }
.split h2 {
  margin: 0 0 calc(28 * var(--u));
  font-size: max(24px, calc(52 * var(--u))); font-weight: 600; letter-spacing: -.01em;
}
.split p {
  margin: 0 0 calc(50 * var(--u));
  font-size: max(15px, calc(28 * var(--u))); line-height: 1.5; max-width: calc(500 * var(--u));
  color: var(--muted);
}
.banner.about-events .h-lg { font-size: max(24px, calc(52 * var(--u))); }
.banner.about-events .body { font-size: max(15px, calc(28 * var(--u))); margin-bottom: calc(36 * var(--u)); }
.more { padding: 0 var(--gutter); margin-bottom: calc(220 * var(--u)); }
.more h3 {
  margin: 0 0 calc(44 * var(--u));
  font-size: max(14px, calc(30 * var(--u))); font-weight: 600; letter-spacing: .01em; text-transform: uppercase;
}
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(29 * var(--u)); }
.card { text-decoration: none; display: block; }
.card img { width: 100%; aspect-ratio: 445 / 356; object-fit: cover; border-radius: max(10px, calc(16 * var(--u))); }
.card span { display: block; margin-top: calc(48 * var(--u)); font-size: max(15px, calc(30 * var(--u))); font-weight: 600; }
a.card:hover span { text-decoration: underline; }
.card sup {
  margin-left: .6em; font-size: max(8px, calc(12 * var(--u))); font-weight: 500;
  color: #9a9a96; text-transform: uppercase; vertical-align: super;
}
.closing.about { margin-top: 0; }
.closing.about .h-lg { margin-bottom: calc(40 * var(--u)); }

/* ---------- Seekers ---------- */
.try { padding: 0 var(--gutter); margin-bottom: calc(220 * var(--u)); }
.try .h-lg { margin-bottom: calc(100 * var(--u)); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(19 * var(--u)); max-width: calc(1410 * var(--u)); }
/* each tile copies the app's Explore Modalities card: 16:9 photo, white body, 1px border, the name in 16px semibold */
.tiles a {
  display: block; overflow: hidden; text-decoration: none;
  background: #fff; border: 1px solid #e8e4e1; border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tiles a:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.tiles img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tiles span {
  display: block; padding: 16px;
  font-size: 16px; font-weight: 600; color: #1c1917;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tiles a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Real guides in place of the Guides screenshot (Slava, 2026-10-07): six cards copying the app's
   Discover guide card (src/app/shared/components/discover-guide-card), light values of its tokens:
   a 4:5 photo held at the top, the Follow "+" in its corner, name, professional title, up to two
   modalities as chips, location. Three across here, two on a phone as in the app. --w is the grid's
   width on the 1680 design. */
.guidecards { display: grid; grid-template-columns: repeat(3, 1fr); gap: max(12px, calc(20 * var(--u))); width: calc(var(--w, 700) * var(--u)); }
.gcard {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-decoration: none;
  background: #fff; border: 1px solid #f0f0f0; border-radius: 16px;
  transition: all .25s ease;
}
.gcard:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); border-color: #e8e4e1; }
.gcard:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.gphoto { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #e8e4e1; }
.row .media .gphoto img, .gphoto img { width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: center top; transition: transform .4s ease; }
.gcard:hover .gphoto img { transform: scale(1.04); }
.gfollow {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); color: #1c1917; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.gfollow svg { width: 18px; height: 18px; }
.gbody { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 12px 14px 14px; min-width: 0; }
.gname { font-size: 15px; font-weight: 600; line-height: 1.3; color: #1c1917; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtitle { font-size: 12px; color: #736c66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtagline { font-size: 12px; line-height: 1.45; color: #57534e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gchips span {
  max-width: 100%; padding: 3px 9px; border-radius: 100px; border: 1px solid #f0f0f0; background: #fafafa;
  font-size: 11px; font-weight: 500; color: #57534e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gloc { display: flex; align-items: center; gap: 4px; min-width: 0; margin: auto 0 0; padding-top: 6px; font-size: 12px; color: #736c66; }
.gloc svg { width: 14px; height: 14px; flex-shrink: 0; }
.gloc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Real offerings in place of the Offerings screenshot (Slava, 2026-10-08): four cards copying the
   app's full offering card, the one the Offerings page shows (src/app/shared/components/offering-card,
   density "full"), light values of its tokens: a 16:10 cover with the type badge, title, the guide
   line, two lines of description, up to three modality tags, the session length, the price, and the
   View offering / Book now pair. The title's link covers the card; the two buttons sit above it.
   Two across here, one on a phone as in the app. */
.offercards { display: grid; grid-template-columns: repeat(2, 1fr); gap: max(16px, calc(24 * var(--u))); width: calc(var(--w, 700) * var(--u)); }
.ocard {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid #f0f0f0; border-radius: 16px; transition: all .25s ease;
}
.ocard:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); border-color: #e8e4e1; }
.ocard:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.oimg { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fafafa; }
.row .media .oimg img, .oimg img { width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; transition: transform .4s ease; }
.ocard:hover .oimg img { transform: scale(1.05); }
.obadge {
  position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  background: #f5f3ff; color: #8b5cf6;
}
.obody { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px; min-width: 0; }
.otitle {
  margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: #1c1917;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.olink { color: inherit; text-decoration: none; }
.olink:focus { outline: none; }
.olink::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.oguide { display: flex; align-items: center; gap: 8px; min-width: 0; }
.oavatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; }
.oavatar img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.oguide-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.oguide-name { font-size: 13px; font-weight: 600; color: #1c1917; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oguide-title { font-size: 12px; color: #736c66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odesc {
  margin: 0; font-size: 13px; line-height: 1.5; color: #57534e;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.otags { display: flex; flex-wrap: wrap; gap: 6px; }
.otags span { padding: 3px 9px; border-radius: 100px; border: 1px solid #f0f0f0; background: #fafafa; font-size: 11px; font-weight: 500; color: #57534e; white-space: nowrap; }
.ometa { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #736c66; }
.ometa svg { width: 14px; height: 14px; flex-shrink: 0; }
.oprice { display: flex; align-items: baseline; gap: 6px; margin-top: auto; padding-top: 8px; color: #1c1917; }
.oprice b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.oprice span { font-size: 11px; color: #736c66; }
.oactions { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.obtn {
  display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 8px;
  font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s ease, border-color .15s ease;
}
.obtn.secondary { border: 1px solid #e8e4e1; background: #faf7f5; color: #1c1917; }
.obtn.secondary:hover { border-color: #736c66; }
.obtn.primary { border: 1px solid #1c1917; background: #1c1917; color: #fff; }
.obtn.primary:hover { background: #333; border-color: #333; }
.obtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Welcome to the Ecosystem (About, discover.js; Slava, 2026-10-14): the app's Discover page drawn in the
   site's tablet on its side, as Events draws its schedule: sizes in container units of the tablet, the
   app's own colours (its page, its purple, its hairlines). A cursor walks it: hovers a need and the
   featured cards, scrolls through guides and modalities, types "massage" into Search, and lands on the
   Offerings page's results. On a phone it is the same picture, smaller. */
.eco { padding: 0 var(--gutter); margin: calc(40 * var(--u)) 0 calc(200 * var(--u)); }
.eco .h-lg { margin-bottom: calc(100 * var(--u)); text-align: center; } /* more room above the tablet (Slava, 2026-10-15; was 50) */
/* The tablet between two two-hexagon clusters (Slava, 2026-10-15), the footer's .comb: full-size cells,
   pinned to the page edges, which cut the outer one off; the left pair high, the right pair low.
   285 units wide each, so the inner cell clears the 980-unit tablet with room to spare. */
.eco-stage { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.frame {
  --hu: var(--hex);
  position: absolute; overflow: hidden;
  width: calc(285 * var(--hu)); height: calc(287.5 * var(--hu));
}
/* left up beside the title; right dropped past the tablet, diagonal from its bottom-right corner (Slava, 2026-10-15) */
.frame.left { left: 0; top: calc(-170 * var(--u)); }
.frame.right { right: 0; bottom: calc(-230 * var(--u)); }
/* what drifts against the page as it scrolls (drift.js sets --drift); nothing moves with reduced motion */
[data-drift] { translate: 0 var(--drift, 0px); will-change: translate; }
/* Events: MyHive Wellness Village is… over its schedule tablet, framed like About's (Slava, 2026-10-15) */
.ev-eco { margin-bottom: calc(280 * var(--u)); } /* more room before the list (Slava, 2026-10-15; was 150) */
.ev-eco .h-md { margin-bottom: calc(100 * var(--u)); text-align: center; }
.eco-stage .tablet.schedule { width: calc(980 * var(--u)); margin: 0 auto; }
.tablet.discover {
  --accent: #8a5fc4;
  container-type: inline-size; width: calc(980 * var(--u)); margin: 0 auto;
  padding: 2.4%; border-radius: 4.4% / 6.6%; text-decoration: none;
}
.tablet.discover:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.dc-screen {
  position: relative; overflow: hidden; aspect-ratio: 1240 / 800; border-radius: 2% / 3.1%;
  background: #faf7f5; color: #1c1917; font-size: 1.15cqw; line-height: 1.35; text-align: left;
}
.dc-screen p { margin: 0; }
.dc-screen img { display: block; max-width: none; margin: 0; }
.dc-top {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 4.4cqw;
  display: flex; align-items: center; gap: 1.4cqw; padding: 0 1.8cqw;
  background: #faf7f5; border-bottom: 1px solid #ece7e3; font-size: 1.1cqw;
}
.dc-top img { width: 2.4cqw; }
.dc-pill { padding: .5cqw 1.1cqw; border-radius: .6cqw; background: #efe8f8; color: #7c5dbd; }
.dc-in { margin-left: auto; }
.dc-up { padding: .5cqw 1.1cqw; border-radius: .6cqw; background: var(--accent); color: #fff; }
.dc-view { position: absolute; top: 4.4cqw; left: 0; right: 0; bottom: 0; overflow: hidden; }
.dc-page { position: absolute; top: 0; left: 0; right: 0; padding: 3.6cqw 10cqw 5cqw; transition: transform 1.3s cubic-bezier(.45, 0, .2, 1), opacity .5s ease; }
.dc-results { opacity: 0; }
/* the screen's states are dc- names: a bare .results is Seekers' search, and its margin moved the screen */
.dc-screen.dc-on-results .dc-home { opacity: 0; }
.dc-screen.dc-on-results .dc-results { opacity: 1; }
.dc-h1 { font-size: 2.3cqw; font-weight: 700; letter-spacing: -.01em; }
.dc-sub { max-width: 52cqw; margin-top: .6cqw !important; font-size: 1.25cqw; color: #57534e; }
.dc-screen .center { text-align: center; margin-left: auto; margin-right: auto; }
.dc-search {
  display: flex; align-items: center; gap: .9cqw; width: 46cqw; margin-top: 2cqw !important;
  padding: .5cqw .5cqw .5cqw 1.4cqw; border: 1px solid #e3ddd8; border-radius: 99px; background: #fff;
  transition: border-color .3s, box-shadow .3s;
}
.dc-search svg { flex: none; width: 1.3cqw; color: #8a817a; }
.dc-q { flex: 1; min-width: 0; white-space: nowrap; }
.dc-ph { color: #a8a29e; }
.dc-screen.dc-typing .dc-ph { display: none; }
.dc-caret { display: none; width: 1px; height: 1.2em; margin-left: 1px; vertical-align: text-bottom; background: #1c1917; animation: bj-blink 1s steps(1) infinite; }
.dc-screen.dc-focus .dc-caret { display: inline-block; }
.dc-screen.dc-focus .dc-home .dc-search { border-color: var(--accent); box-shadow: 0 0 0 .3cqw rgba(138, 95, 196, .18); }
.dc-go { padding: .6cqw 1.5cqw; border-radius: 99px; background: #b8b2b4; color: #fff; font-weight: 600; transition: background .3s, transform .15s; }
.dc-screen.dc-typing .dc-go { background: var(--accent); }
.dc-go.press { transform: scale(.92); }
.dc-label { margin-top: 2.6cqw !important; font-size: 1.05cqw; letter-spacing: .06em; text-transform: uppercase; color: #57534e; }
.dc-needs { display: flex; flex-wrap: wrap; gap: .7cqw; margin-top: 1cqw !important; }
.dc-needs span { padding: .45cqw 1.1cqw; border: 1px solid #e3ddd8; border-radius: 99px; background: #fff; font-size: 1.05cqw; color: #44403c; transition: all .3s; }
.dc-needs span.hov { border-color: var(--accent); background: #f6f1fc; color: #7c5dbd; }
.dc-h2 { display: flex; align-items: center; justify-content: space-between; margin: 3.4cqw 0 1.4cqw !important; font-size: 1.6cqw; font-weight: 600; }
.dc-all { padding: .4cqw 1cqw; border: 1px solid #e3ddd8; border-radius: .6cqw; background: #fff; font-size: 1cqw; font-weight: 500; }
.dc-grid { display: grid; gap: 1.6cqw; }
.dc-grid.three { grid-template-columns: repeat(3, 1fr); }
.dc-grid.four { grid-template-columns: repeat(4, 1fr); }
.dc-card, .dc-guidecard, .dc-tile {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid #efebe8; border-radius: 1.2cqw; background: #fff; transition: transform .35s ease, box-shadow .35s ease;
}
.dc-screen .hov:is(.dc-card, .dc-guidecard, .dc-tile) { transform: translateY(-.5cqw); box-shadow: 0 1.4cqw 3cqw -1cqw rgba(0, 0, 0, .2); }
.dc-img, .dc-photo { position: relative; display: block; overflow: hidden; }
.dc-img { aspect-ratio: 16 / 10; }
.dc-photo { aspect-ratio: 4 / 5; }
.dc-img img, .dc-photo img, .dc-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.dc-photo img { object-position: center top; }
.dc-tile img { aspect-ratio: 16 / 9; height: auto; }
.hov .dc-img img, .hov .dc-photo img, .dc-tile.hov img { transform: scale(1.05); }
.dc-badge { position: absolute; top: 1cqw; left: 1cqw; padding: .25cqw .7cqw; border-radius: .5cqw; background: #fff; font-size: .8cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7c5dbd; }
.dc-body { display: flex; flex-direction: column; gap: .6cqw; padding: 1.2cqw 1.3cqw 1.4cqw; }
.dc-title { font-size: 1.25cqw; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-guide { display: flex; align-items: center; gap: .7cqw; min-width: 0; }
.dc-guide img { flex: none; width: 2.3cqw; height: 2.3cqw; border-radius: 50%; object-fit: cover; }
.dc-guide > span { display: flex; flex-direction: column; min-width: 0; font-size: .9cqw; color: #736c66; }
.dc-guide b, .dc-guide > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-guide b { font-size: 1cqw; font-weight: 600; color: #1c1917; }
.dc-time { font-size: 1cqw; color: #736c66; }
.dc-desc { font-size: 1cqw; color: #57534e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-price { font-size: .85cqw; color: #736c66; }
.dc-price b { margin-right: .3cqw; font-size: 1.35cqw; font-weight: 700; color: #1c1917; }
.dc-tags { display: flex; gap: .5cqw; overflow: hidden; }
.dc-tags span { padding: .2cqw .7cqw; border: 1px solid #efebe8; border-radius: 99px; background: #fafafa; font-size: .85cqw; white-space: nowrap; }
.dc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .7cqw; margin-top: .4cqw; }
.dc-btns span { padding: .7cqw 0; border: 1px solid #e3ddd8; border-radius: .7cqw; background: #faf7f5; font-size: 1cqw; font-weight: 600; text-align: center; }
.dc-btns .dark { border-color: #1c1917; background: #1c1917; color: #fff; }
.dc-name, .dc-role { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-name { padding: 1cqw 1.1cqw 0; font-size: 1.15cqw; font-weight: 600; }
.dc-role { padding: .2cqw 1.1cqw 1.1cqw; font-size: .9cqw; color: #736c66; }
.dc-tile span { padding: 1cqw 1.2cqw; font-size: 1.15cqw; font-weight: 600; }
.dc-filters { display: flex; align-items: center; gap: .8cqw; margin: 3cqw 0 2.4cqw !important; padding-bottom: 1.6cqw; border-bottom: 1px solid #ece7e3; }
.dc-filters > span { padding: .5cqw 1.3cqw; border: 1px solid #e3ddd8; border-radius: 99px; background: #fff; font-size: 1.05cqw; }
.dc-filters > span.on { border-color: #1c1917; background: #1c1917; color: #fff; }
.dc-filters .dc-search.small { width: 20cqw; margin: 0 0 0 auto !important; padding: .5cqw 1.2cqw; font-size: 1.1cqw; }
.dc-filters .dc-count { border: 0; background: none; color: #736c66; }
.dc-cursor {
  position: absolute; z-index: 5; left: 0; top: 0; width: 2.2cqw; height: 2.2cqw; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 .2cqw .4cqw rgba(0, 0, 0, .25));
  transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .4s, scale .12s;
}
.dc-cursor.show { opacity: 1; }
.dc-cursor.press { scale: .82; }
@media (max-width: 720px) {
  .eco { padding: 0 16px; margin: 48px 0 64px; }
  .eco .h-lg { margin-bottom: 32px; font-size: 28px; }
  .tablet.discover { width: 100%; }
  .eco-stage { display: block; margin: 0; }
  .eco-stage .tablet.schedule { width: 100%; }
  .ev-eco .h-md { margin-bottom: 24px; }
  .ev-eco { margin-bottom: 88px; }
  .frame { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-page, .dc-card, .dc-guidecard, .dc-tile, .dc-cursor, .dc-needs span, .dc-img img, .dc-photo img, .dc-tile img { transition: none; }
}

/* Three steps of an offering (Guides' Turn a conversation into an experience, steps.js; Slava,
   2026-10-14): no device, three cards cascading down the page, the app's own step types in its purple.
   A Tracker (a choice question, Day n of N, Log) with five emoji answers, a Homework step with its done
   circle, and a Media step playing a video. A soft tap moves between them. Sizes are container units
   of the stage. */
.track-stage { --accent: #8a5fc4; position: relative; container-type: inline-size; width: calc(560 * var(--u)); color: #1c1917; }
.track-stage p { margin: 0; }
.tk-card, .tk-week { box-sizing: border-box; background: #fff; box-shadow: 0 3cqw 9cqw -3cqw rgba(28, 25, 23, .25), 0 0 0 1px #f0ece9; }
.tk-card { position: relative; z-index: 1; width: 86%; padding: 6cqw 6cqw 5.5cqw; border-radius: 5cqw; }
.tk-kicker { display: flex; align-items: center; gap: 1.6cqw; font-size: max(11px, 2.5cqw); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a817a; }
.tk-hex { flex: none; width: 2.6cqw; height: 2.4cqw; background: var(--yellow); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.tk-q { margin-top: 2.6cqw !important; font-size: max(16px, 4.6cqw); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.tk-run { margin-top: 1cqw !important; font-size: max(11px, 2.6cqw); font-weight: 600; color: #8a817a; }
.tk-choices { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.8cqw; margin-top: 4cqw; }
.tk-choices span {
  display: flex; flex-direction: column; align-items: center; gap: 1cqw; padding: 2.6cqw 0 2.2cqw;
  border: 1px solid #e8e2dd; border-radius: 3cqw; font-size: max(10px, 2.3cqw); font-weight: 600; color: #57534e;
  transition: border-color .25s, background .25s, color .25s;
}
.tk-choices i { font-style: normal; font-size: max(20px, 6.4cqw); line-height: 1; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.tk-choices span.on { border-color: var(--accent); background: #f4eefb; color: #7c5dbd; }
.tk-choices span.on i { transform: scale(1.25); }
.tk-log { display: block; margin-top: 4cqw; padding: 2.6cqw 0; border-radius: 2cqw; background: var(--accent); color: #fff; text-align: center; font-size: max(13px, 3cqw); font-weight: 700; transition: background .3s; }
.tk-log.done { background: #2a9d5c; }
/* the next two steps cascade down from the Tracker, each over the one above's bottom padding only, so
   none covers a button however tall a card runs: Homework to the right, Media back to the left */
.tk-card + .tk-card { margin-top: -3cqw; }
.tk-hw { z-index: 2; width: 80%; margin-left: auto; padding: 5cqw 5.5cqw; }
.tk-media { z-index: 3; width: 82%; margin-left: 3cqw; padding: 5cqw 5.5cqw 5.5cqw; }
.tk-title { font-size: max(14px, 3.6cqw); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.tk-hw-row { display: flex; align-items: flex-start; gap: 3cqw; margin-top: 2.2cqw; }
.tk-snippet { margin-top: 1.2cqw !important; font-size: max(11px, 2.6cqw); line-height: 1.45; color: #57534e; }
.tk-cta { display: inline-block; margin-top: 2.6cqw; padding: 1.4cqw 3cqw; border: 1px solid #e3ddd8; border-radius: 2cqw; font-size: max(11px, 2.5cqw); font-weight: 600; }
.tk-done { flex: none; width: max(26px, 7cqw); height: max(26px, 7cqw); color: #cdc5bf; transition: color .3s; }
.tk-done svg { display: block; width: 100%; height: 100%; }
.tk-done path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .4s ease .1s; }
.tk-hw.done .tk-done { color: #2a9d5c; }
.tk-hw.done .tk-done path { stroke-dashoffset: 0; }
.tk-hw.done .tk-done circle { fill: #e3f6ea; }
.tk-media .tk-title { margin-top: 2.2cqw !important; }
.tk-video { position: relative; margin-top: 2.6cqw; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2.6cqw; background: #2c2a28 url(img/bigger-class.jpg) center / cover; }
.tk-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tk-play {
  position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center;
  width: 11cqw; height: 11cqw; margin: -5.5cqw 0 0 -5.5cqw; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #1c1917; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .25);
  transition: opacity .3s, transform .3s;
}
.tk-play svg { width: 5cqw; margin-left: .6cqw; }
.tk-media.playing .tk-play { opacity: 0; transform: scale(.8); }
.tk-bar { position: absolute; left: 3cqw; right: 3cqw; bottom: 2.4cqw; height: .9cqw; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .35); }
.tk-bar i { display: block; width: 0; height: 100%; border-radius: 99px; background: #fff; }
.tk-media.playing .tk-bar i { width: 100%; transition: width 5.2s linear; }
.tk-tap {
  position: absolute; z-index: 3; left: 0; top: 0; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; border-radius: 50%;
  background: rgba(28, 25, 23, .16); border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .18);
  opacity: 0; pointer-events: none; transition: transform .75s cubic-bezier(.45, 0, .2, 1), opacity .3s, scale .15s;
}
.tk-tap.show { opacity: 1; }
.tk-tap.press { scale: .8; }
.tk-tap.press::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--accent); border-radius: 50%; animation: tk-ripple .45s ease-out; }
@keyframes tk-ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(2.2); opacity: 0; } }
@media (max-width: 720px) {
  .track-stage { width: 100%; max-width: 420px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-choices span, .tk-choices i, .tk-log, .tk-tap, .tk-done, .tk-done path, .tk-play { transition: none; }
}

/* Clients grow from journals (Guides, jflow.js; Slava, 2026-10-14): the words centred, then three
   white cards in a row, left to right: the journal, the feed, the inbox. In each gap a hand-drawn
   arrow, light grey: a bowed stroke from one card to the next and a head of two uneven strokes.
   --k is one step of the cards' scale (7.8 design units, a phone's 420px / 100); max() keeps
   phones legible. On a phone the cards stack full width and the arrows run down. */
.journals { --k: calc(7.8 * var(--u)); padding: 0 var(--gutter); margin-bottom: calc(var(--mb, 200) * var(--u)); }
.journals .jtext { max-width: calc(980 * var(--u)); margin: 0 auto calc(90 * var(--u)); text-align: center; }
.journals .jtext .body { margin-bottom: 0; }
/* Coming soon over a section that describes something the app does not do yet */
.journals .soon {
  display: inline-block; margin: 0 0 calc(24 * var(--u)); padding: .35em 1em;
  background: var(--yellow); border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: .02em;
}
.jflow {
  position: relative; width: calc(1430 * var(--u)); max-width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(130 * var(--u));
  align-items: center; color: #1c1917;
}
.jflow p { margin: 0; }
.jf-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.jf-path, .jf-heads path { fill: none; stroke: #c9c3be; stroke-width: max(2px, calc(.32 * var(--k))); stroke-linecap: round; stroke-linejoin: round; }
.jf-path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .25, 1); }
.jf-path.on { stroke-dashoffset: 0; }
.jf-heads path { opacity: 0; transition: opacity .3s; }
.jf-heads path.on { opacity: 1; }
.jf-card {
  position: relative; z-index: 1; box-sizing: border-box; min-width: 0;
  padding: max(14px, calc(3.2 * var(--k))); border-radius: max(14px, calc(3 * var(--k))); background: #fff;
  box-shadow: 0 calc(2 * var(--k)) calc(6 * var(--k)) calc(-2 * var(--k)) rgba(28, 25, 23, .22), 0 0 0 1px #f0ece9;
  font-size: max(12px, calc(1.75 * var(--k))); line-height: 1.4;
}
.jf-kicker { display: flex; align-items: center; gap: max(6px, var(--k)); font-size: max(10px, calc(1.4 * var(--k))); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a817a; }
.jf-hex { flex: none; width: max(10px, calc(1.6 * var(--k))); height: max(9px, calc(1.45 * var(--k))); background: var(--yellow); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.jf-title { margin-top: max(6px, calc(1.2 * var(--k))) !important; font-size: max(14px, calc(2.2 * var(--k))); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.jf-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: max(6px, calc(1.2 * var(--k))) !important; }
.jf-head b { font-size: max(14px, calc(2.2 * var(--k))); letter-spacing: -.01em; }
.jf-head span { font-size: max(11px, calc(1.5 * var(--k))); color: #a8a29e; }
.jf-text { min-height: 4.2em; margin-top: max(6px, calc(1.2 * var(--k))) !important; font-size: max(13px, calc(1.9 * var(--k))); line-height: 1.5; color: #44403c; }
.jf-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -.15em; background: #1c1917; animation: jf-blink 1s steps(1) infinite; }
.jflow.rest .jf-caret { visibility: hidden; }
@keyframes jf-blink { 50% { opacity: 0; } }
.jf-share { display: flex; align-items: center; gap: max(8px, calc(1.2 * var(--k))); margin-top: max(10px, calc(1.8 * var(--k))) !important; padding-top: max(10px, calc(1.6 * var(--k))); border-top: 1px solid #f0ece9; font-size: max(11px, calc(1.55 * var(--k))); font-weight: 600; color: #57534e; }
.jf-switch { position: relative; flex: none; width: 2.3em; height: 1.3em; border-radius: 99px; background: #e3ddd8; transition: background .3s; }
.jf-switch::after { content: ""; position: absolute; top: .15em; left: .15em; width: 1em; height: 1em; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .3s; }
.jf-share.on .jf-switch { background: #2a9d5c; }
.jf-share.on .jf-switch::after { transform: translateX(1em); }
.jf-list { list-style: none; margin: max(8px, calc(1.6 * var(--k))) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: max(8px, calc(1.2 * var(--k))); }
.jf-guide, .jf-msg { display: flex; align-items: flex-start; gap: max(8px, calc(1.3 * var(--k))); padding: max(8px, calc(1.3 * var(--k))); border: 1px solid #f0ece9; border-radius: max(10px, calc(1.8 * var(--k))); background: #fff; }
.jf-guide { align-items: center; transition: opacity .5s ease, transform .5s ease; }
.jf-guide.pending { opacity: 0; transform: translateY(calc(1.5 * var(--k))); }
.jf-av { flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; width: max(30px, calc(4.6 * var(--k))); height: max(30px, calc(4.6 * var(--k))); border-radius: 50%; background: #f0ece9; font-size: max(10px, calc(1.45 * var(--k))); font-weight: 700; color: #57534e; }
.jf-av.anon { background: #ece7e3; color: #8a817a; font-size: max(12px, calc(1.8 * var(--k))); }
.jf-av img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: center top; }
.jf-main { display: flex; flex-direction: column; gap: max(2px, calc(.4 * var(--k))); flex: 1; min-width: 0; }
.jf-main b { display: flex; align-items: baseline; justify-content: space-between; gap: var(--k); font-size: max(12px, calc(1.75 * var(--k))); font-weight: 700; }
.jf-guide .jf-main span { font-size: max(11px, calc(1.45 * var(--k))); color: #736c66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jf-when { font-style: normal; font-size: max(10px, calc(1.35 * var(--k))); font-weight: 500; color: #a8a29e; white-space: nowrap; }
.jf-when.recent { color: #2a9d5c; font-weight: 600; }
.jf-snip { font-size: max(11px, calc(1.55 * var(--k))); color: #44403c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jf-snip.one { -webkit-line-clamp: 1; }
.jf-pill { flex: none; align-self: center; padding: max(4px, calc(.7 * var(--k))) max(10px, calc(1.6 * var(--k))); border: 1px solid #e3ddd8; border-radius: 99px; font-size: max(11px, calc(1.4 * var(--k))); font-weight: 700; color: #1c1917; }
.jf-pill.dark { align-self: flex-start; margin-top: max(4px, calc(.6 * var(--k))); border-color: #1c1917; background: #1c1917; color: #fff; }
.jf-new { max-height: 320px; overflow: hidden; transition: max-height .6s ease, opacity .6s ease, padding .6s ease, margin .6s ease; }
.jf-new.arriving { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: calc(-1 * max(8px, calc(1.2 * var(--k)))); border-width: 0; }
.jf-new.arrived { animation: jf-new 3.5s ease-out; }
@keyframes jf-new { 0%, 35% { background: #fff6c4; border-color: var(--yellow); } 100% { background: #fff; border-color: #f0ece9; } }
@media (max-width: 720px) {
  .journals { --k: 4.2px; padding: 0 16px; margin-bottom: 64px; }
  .journals .jtext { margin-bottom: 32px; }
  .jflow { max-width: 420px; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .jf-path, .jf-heads path, .jf-switch, .jf-switch::after, .jf-guide, .jf-new { transition: none; }
  .jf-new.arrived, .jf-caret { animation: none; }
}

/* Find what you're looking for (Seekers, find.js; Slava, 2026-10-13): a white panel. Room above it
   for the line's hexagon; the panel is opaque, so the line runs on
   behind it and comes out underneath. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.find { padding: calc(150 * var(--u)) var(--gutter) 0; margin-bottom: calc(190 * var(--u)); }
/* full width, margin to margin (Slava, 2026-10-13); the box and its chips stay a readable width in
   the middle, and the results sit in a column per kind. It stops growing at 1430px, its width on
   the 1680 design, and stays centred under the line's hexagon on a wider monitor (at 2560 it was
   2310px of mostly empty white). */
.find .panel {
  max-width: 1430px; margin: 0 auto;
  padding: calc(64 * var(--u)) calc(70 * var(--u));
  background: #fff; border: 1px solid #e8e4e1; border-radius: 24px; text-align: center;
}
/* a touch smaller than .h-lg, so the heading holds one line in the half-width panel */
.find .h-lg { margin-bottom: calc(36 * var(--u)); font-size: max(22px, calc(46 * var(--u))); }
.find form { display: flex; gap: 10px; max-width: max(320px, calc(960 * var(--u))); margin: 0 auto; }
.find input {
  flex: 1; min-width: 0; height: max(46px, calc(64 * var(--u))); padding: 0 max(16px, calc(24 * var(--u)));
  border: 1px solid #e8e4e1; border-radius: 999px; background: var(--bg);
  font: inherit; font-size: max(15px, calc(22 * var(--u))); color: var(--ink);
}
.find input:focus { outline: none; border-color: var(--ink); background: #fff; }
.find form .btn { border: 0; cursor: pointer; font-family: inherit; }
.suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: max(14px, calc(22 * var(--u))); }
.suggest[hidden] { display: none; }
.suggest button {
  padding: 6px 14px; border-radius: 999px; border: 1px solid #e8e4e1; background: #fafafa; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: #57534e;
}
.suggest button:hover { border-color: var(--ink); color: var(--ink); }
.suggest button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.results { text-align: left; }
.results:not(:empty) { margin-top: max(16px, calc(36 * var(--u))); }
.results .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px max(24px, calc(48 * var(--u))); }
.results .group { margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #736c66; }
.results .group:first-child, .results .cols .group { margin-top: 0; }
.results ul { list-style: none; margin: 0; padding: 0; }
.results li a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; margin: 0 -12px; border-radius: 10px; text-decoration: none; }
.results li a:hover, .results li a:focus-visible { background: #faf7f5; outline: none; }
.results .rname { font-size: 15px; font-weight: 600; color: #1c1917; }
.results .rsub { font-size: 12px; color: #736c66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results .note { margin: 0; font-size: 14px; color: #57534e; }
.results .seeall { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700; }

/* See your card (Guides, yourcard.js; Slava, 2026-10-13): the form beside three Discover cards, the
   middle one the guide's own, ringed in yellow. Placeholders in the card are faded. */
.yform { display: grid; grid-template-columns: 1fr 1fr; gap: max(12px, calc(18 * var(--u))); margin-bottom: calc(44 * var(--u)); }
.yform label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #57534e; }
.yform input {
  height: 44px; padding: 0 14px; border: 1px solid #e8e4e1; border-radius: 10px; background: #fff;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink);
}
.yform input:focus { outline: none; border-color: var(--ink); }
.yform input::placeholder { color: #b5afa9; }
.yform label:nth-child(3) { grid-column: 1 / -1; }
/* Add a photo: the file input itself lies, invisible, over the button, so the click lands on it in
   every browser (a label pointing at a hidden input did nothing in Slava's, 2026-10-13); the card's
   own photo opens it too (yourcard.js) */
.yform .yphoto-pick { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.yform .ypick { position: relative; display: inline-flex; }
.yform .ybtn {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid #e8e4e1; background: #fff; font-size: 14px; font-weight: 600; color: var(--ink);
}
.yform .ypick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.yform .ypick:hover .ybtn { border-color: var(--ink); }
.yform .ypick:focus-within .ybtn { outline: 2px solid var(--ink); outline-offset: 3px; }
.yform .ystatus { font-size: 13px; font-weight: 500; color: #736c66; }
.gcard.you .gphoto { cursor: pointer; }
.yourcard .guidecards { --w: 760; }
.gcard.you { border: 2px solid var(--yellow); box-shadow: 0 12px 32px rgba(0,0,0,.08); transform: translateY(-10px); }
.gcard.you:hover { transform: translateY(-10px); }
/* The paperwork, handled (Guides, consent.js; Slava, 2026-10-13): the app's consent card, light
   values, its sections in a scrolling box as in the app, a small yellow hexagon at each heading in
   place of the app's icons */
.cform {
  width: calc(var(--w, 640) * var(--u)); min-width: 300px; padding: 24px;
  background: #fff; border: 1px solid #e8e4e1; border-radius: 20px; box-shadow: 0 12px 32px rgba(0,0,0,.06);
  font-size: 14px; line-height: 1.5; color: #1c1917;
}
.cform [hidden] { display: none !important; }
.cform-head { text-align: center; margin-bottom: 16px; }
.cpractice { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #736c66; }
.cform-head h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.coffering { margin: 4px 0 0; font-size: 14px; color: #57534e; }
.chint { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: #736c66; text-align: center; }
.chint.done { color: #3f7d4e; }
.cdoc { max-height: 300px; overflow-y: auto; padding: 16px 18px; border: 1px solid #f0ece9; border-radius: 12px; background: #faf7f5; font-size: 13px; }
.cdoc:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cdoc p { margin: 0 0 8px; }
.cdoc ul { margin: 0 0 8px; padding-left: 18px; }
.cdoc li { margin-bottom: 3px; }
.cplain { color: #57534e; }
.csec { padding-top: 12px; margin-top: 12px; border-top: 1px solid #ece7e3; }
.csec h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.csec h4::before { content: ""; flex: none; width: 12px; height: 11px; background: var(--yellow); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.csign { display: grid; gap: 12px; margin-top: 16px; }
.csign > label:first-child { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #57534e; }
.csign input[name=name] {
  height: 42px; padding: 0 14px; border: 1px solid #e8e4e1; border-radius: 10px; background: #fff;
  font: inherit; font-size: 15px; color: var(--ink);
}
.csign input[name=name]:focus { outline: none; border-color: var(--ink); }
.cagree { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #1c1917; cursor: pointer; }
.cagree input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #1c1917; }
.cdate { display: flex; justify-content: space-between; margin: 0; font-size: 13px; color: #736c66; }
.cdate b { font-weight: 600; color: #1c1917; }
.cbtn {
  height: 46px; border: 0; border-radius: 999px; background: var(--yellow); cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--ink);
}
.cbtn:disabled { opacity: .4; cursor: not-allowed; }
.cbtn:focus-visible, .cagain:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cform-done { text-align: center; padding: 24px 8px 8px; }
.cdone-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #e6f2e9; color: #3f7d4e; font-size: 28px; font-weight: 700; }
.cform-done h3 { margin: 14px 0 6px; font-size: 20px; font-weight: 700; }
.cthanks { margin: 0 0 18px; font-size: 15px; color: #57534e; }
.cnote { margin: 0; font-size: 13px; color: #736c66; }
.cagain { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; cursor: pointer; }

.yinitials[hidden], .gcard.you .gphoto img[hidden] { display: none; }
.yinitials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 700; color: #b5afa9; }
.gcard.you .empty { color: #b5afa9; }
.gcard.you .gchips .empty { border-style: dashed; }

/* The yellow path (path.js), on a page with <body class="pathed">: it sits under every section, so
   it shows in the margins and gaps and passes behind photos. Room under the hero lets it cross open
   page on its way to the first row; on a phone it is a rail down the left edge, so the words move
   over to make room. */
.pathed main { position: relative; }
.pathed main > section { position: relative; z-index: 1; }
svg.path { position: absolute; top: 0; left: 0; z-index: 0; overflow: visible; pointer-events: none; }
svg.path .track { stroke: var(--yellow); stroke-opacity: .28; }
svg.path .ink { stroke: var(--yellow); }
svg.path .track, svg.path .ink { fill: none; stroke-linejoin: round; stroke-linecap: round; }
svg.path .node { fill: var(--bg); stroke: var(--yellow); transition: fill .3s; }
svg.path .node.on { fill: var(--yellow); }
/* Spacing only where the line passes: a section with a stop in it (Events runs it through its last
   two sections alone; on Seekers and Guides every section has one) */
.pathed .page-hero:has([data-stop]) { padding-bottom: calc(320 * var(--u)); }
/* A list with its own short rail (data-path): room on its left for the line and its hexagons */
[data-path] { position: relative; padding-left: 40px; }

/* Keep Exploring: Slava's full eye-in-the-leaf photo (img/explore-eye.jpg, 2026-10-06) fills the banner
   under the usual shade; held on the eye, 45% down. The photo spans the width, so it cannot move
   sideways: the words wrap short of the face instead */
.banner.explore { background-position: center 45%; }
/* A banner can play a video in place of its photo (Keep Exploring, img/explore.mp4; Slava, 2026-10-14):
   it fills the panel under the same shade, its first frame (img/explore.jpg) shows until it plays */
.banner > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner:has(> video)::before { z-index: 1; }
.banner:has(> video) .copy { z-index: 2; }
/* the bee sits a little left of centre: hold it there when a narrow screen crops the sides */
.banner.explore > video { object-position: 45% 45%; }
/* Be part of something bigger (Guides, img/bigger.mp4, a yoga class seen from the back of the room;
   Slava, 2026-10-14): held on the teacher, in the middle */
.banner.bigger > video { object-position: 52% 45%; }
/* the room is bright white, so its shade is deeper than the other banners' to keep the words readable */
.banner.bigger:has(> video)::before { background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.4) 60%, rgba(0,0,0,.2)); }
@media (max-width: 720px) {
  .banner.bigger:has(> video)::before { background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.3) 75%, rgba(0,0,0,.15)); }
}
.banner.explore .body { max-width: calc(500 * var(--u)); }

/* ---------- Guides ---------- */
.banner.bigger .copy { display: flex; gap: calc(60 * var(--u)); align-items: center; width: 100%; padding-right: calc(40 * var(--u)); }
/* the column is as wide as its heading; the paragraph wraps inside it and never widens it */
.banner.bigger .lead { flex: none; width: fit-content; max-width: 100%; }
.banner.bigger .lead .h-lg { margin-bottom: calc(36 * var(--u)); }
.banner.bigger .side { margin: 0 0 calc(56 * var(--u)); color: #fff; contain: inline-size; }

/* ---------- Events ---------- */
.points { margin: 0; }
.points dt { font-size: max(15px, calc(34 * var(--u))); font-weight: 700; margin-top: calc(45 * var(--u)); }
.points dt:first-child { margin-top: 0; }
.points dd { margin: 0; font-size: max(15px, calc(34 * var(--u))); line-height: 1.33; color: var(--muted); }
/* Events' two lists (Explore, Book…; More than a festival activation…): the line under each heading a
   touch smaller, never bold (Slava, 2026-10-08) */
.points.steps dd { font-size: max(14px, calc(28 * var(--u))); font-weight: 400; line-height: 1.4; margin-top: calc(4 * var(--u)); }
.road { padding: 0 var(--gutter); margin-bottom: calc(200 * var(--u)); }
/* the heading and its line sit in the gallery's 80% column, so all three start on one edge (Slava, 2026-10-22) */
/* a little smaller than .h-lg's 58 / 24px (Slava, 2026-10-22) */
.road .h-lg { width: 80%; margin: 0 auto calc(28 * var(--u)); font-size: max(22px, calc(50 * var(--u))); }
.road .body { width: 80%; margin: 0 auto calc(72 * var(--u)); }
/* MANCAMP 2026, four by two (Slava, 2026-10-22): 80% of the row, centred; landscape 4:3 tiles cut
   from her portrait photos, each opening whole and upright in the lightbox; the video's tile carries
   the site's yellow play button */
.mc-grid { list-style: none; width: 80%; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--u)); }
.mc-grid a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(16 * var(--u)); background: #eee; }
.mc-grid img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; transition: transform .4s ease; }
.mc-grid a:hover img { transform: scale(1.04); }
.mc-grid .is-video a::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%);
  border-radius: 50%; box-shadow: 0 8px 24px -8px rgba(24, 24, 26, .5);
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%2318181a'/%3E%3C/svg%3E") 56% 50% / 30px no-repeat;
}
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12, 12, 14, .92); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: transparent; }
html:has(.lightbox[open]) { overflow: hidden; }
.lb-stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 56px 72px; box-sizing: border-box; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0; border-radius: 12px; }
.lightbox button { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; border-radius: 50%; width: 48px; height: 48px; font: 400 32px/1 Manrope, sans-serif; }
.lightbox button:hover { background: rgba(255, 255, 255, .24); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.quote {
  display: flex; gap: calc(78 * var(--u)); padding: 0 var(--gutter) 0 calc(300 * var(--u));
  margin-bottom: calc(300 * var(--u));
}
.quote .mark {
  flex: none; color: var(--yellow); font-weight: 800; line-height: .8;
  font-size: max(64px, calc(220 * var(--u)));
}
.quote blockquote { margin: calc(40 * var(--u)) 0 0; max-width: calc(800 * var(--u)); }
.quote blockquote p { margin: 0 0 calc(40 * var(--u)); font-size: max(16px, calc(36 * var(--u))); line-height: 1.37; }
.quote cite { font-style: normal; font-weight: 700; font-size: max(16px, calc(36 * var(--u))); }
.provides { margin: calc(70 * var(--u)) 0 0; font-size: max(15px, calc(30 * var(--u))); font-weight: 600; }
.provides ul { margin: calc(50 * var(--u)) 0 calc(60 * var(--u)); padding-left: calc(52 * var(--u)); line-height: 1.5; }
.provides + .btn { margin-left: calc(25 * var(--u)); }

/* Phone: one column, picture above words */
@media (max-width: 720px) {
  :root { --hex: calc(100vw / 850); }
  .page-hero { min-height: 0; padding-bottom: 56px; margin-bottom: var(--pb-sm, 0px); }
  .page-hero .hex { position: relative; width: 78%; margin-left: auto; margin-right: -16px; }
  .page-hero .copy { padding-top: 24px; max-width: none; }
  /* more room between the hexagon and the words under it (Guides, Seekers and Events, Slava 2026-10-09) */
  .page-hero.roomy .copy { padding-top: 48px; }
  .h-xl { margin-bottom: 24px; }
  .h-lg { margin-bottom: 14px; }
  .body { margin-bottom: 20px; }

  .row, .row.bleed-l, .row.bleed-r { flex-direction: column; align-items: stretch; gap: 24px; padding: 0 16px; margin-bottom: 64px; }
  .row .media { order: -1; }
  .row .media img { width: 100%; max-width: 440px; margin: 0 auto; }
  .row.bleed-l .media { margin-left: -16px; }
  .row.bleed-r .media { margin-right: -16px; }
  .row.bleed-l .media img, .row.bleed-r .media img { max-width: none; }
  .row .media .hex { width: 100%; }
  .row .media .tablet, .row.bleed-l .media .tablet, .row.bleed-r .media .tablet { width: 100%; max-width: 360px; margin: 0 auto; }
  .row .media .phone { width: 70%; max-width: 280px; margin: 0 auto; }
  /* a top-aligned row stacks like the rest, or its picture shrinks to fit (and a phone sized by
     share of it collapses) */
  .row.top { align-items: stretch; }
  .hexwall { margin-left: auto; }
  .row .text { width: auto; }

  .banner { min-height: 380px; margin: 0 16px 64px; align-items: flex-end; }
  .banner::before { background: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.1)); }
  .banner .copy { padding: 24px 20px; }
  .banner .body { max-width: none; margin-bottom: 22px; }
  .banner.explore { background-position: 65% 62%; }
  .banner.explore .body { max-width: none; }
  .banner.bigger .copy { flex-direction: column; align-items: flex-start; gap: 16px; padding-right: 20px; }
  .banner.bigger .lead .h-lg { margin-bottom: 14px; }
  .banner.bigger .lead { flex: none; }
  .banner.bigger .side { margin-bottom: 22px; }

  .closing { margin: 40px 0 40px; }
  .closing .h-lg { margin-bottom: 20px; }

  /* the clusters grow with --hex, so the footer makes room above and below its words for them */
  footer { min-height: 0; padding-bottom: calc(354 * var(--hex) + 24px); }
  footer .inner { padding-top: calc(395 * var(--hex) + 16px); }
  footer .inner img { margin-bottom: 14px; }
  footer .name { margin-bottom: 14px; }
  footer li { margin-bottom: 6px; }

  /* About */
  /* the hero fills the screen under the 78px phone bar; the words take the spare height evenly above and
     below them, so For Guides starts just past the fold */
  .hero { display: flex; flex-direction: column; min-height: calc(100vh - 78px); min-height: calc(100svh - 78px); padding-bottom: 24px; }
  .hive { position: relative; margin-left: auto; margin-right: -16px; }
  .hero .copy { padding-top: 24px; margin: auto 0; max-width: none; }
  .hero .wordmark { width: min(300px, 80%); }
  .hero h1 { margin: 22px 0 26px; }
  .split, .split.seekers { grid-template-columns: 1fr; gap: 24px; margin-bottom: 64px; }
  .split.duo { row-gap: 40px; }
  .split .pic { width: 100%; max-width: 420px; justify-self: center !important; margin: 0 !important; order: -1; }
  .split h2 { margin-bottom: 12px; }
  .split p { max-width: none; margin-bottom: 22px; }
  .more { margin-bottom: 72px; }
  .more h3 { margin-bottom: 18px; }
  .cards { grid-template-columns: 1fr; gap: 28px; }
  .card img { aspect-ratio: 16 / 9; }
  .card span { margin-top: 12px; }

  /* Seekers */
  .try { padding: 0 16px; margin-bottom: 64px; }
  .try .h-lg { margin-bottom: 20px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; max-width: none; }
  /* two to a row leaves no room for "Pilates (Classical/Clinical)" on one line: names wrap here */
  .tiles span { padding: 10px 12px; font-size: 14px; white-space: normal; }
  .guidecards { grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
  .offercards { grid-template-columns: 1fr; gap: 24px; width: 100%; }
  .find { padding: 0 16px; margin-bottom: 64px; }
  .find .panel { width: auto; padding: 22px 18px; text-align: left; }
  .find .h-lg { margin-bottom: 16px; }
  .find form .btn { padding-left: 16px; padding-right: 16px; }
  .suggest { justify-content: flex-start; }

  /* Guides' See your card: the form first, then the guide's own card beside one real one */
  .row.yourcard .media { order: 1; }
  .yform { grid-template-columns: 1fr; margin-bottom: 20px; }
  .yourcard .guidecards .gcard:last-child { display: none; }
  .gcard.you, .gcard.you:hover { transform: none; }
  /* The paperwork, handled: the words first, then the form, full width */
  .row.paperwork .media { order: 1; }
  .cform { width: 100%; min-width: 0; padding: 18px; }

  /* the path's rail */
  .pathed:not([data-line="off"]) .page-hero:has([data-stop]),
  .pathed:not([data-line="off"]) .row:has([data-stop]),
  .pathed:not([data-line="off"]) .try:has([data-stop]),
  .pathed:not([data-line="off"]) .find:has([data-stop]),
  .pathed:not([data-line="off"]) .closing:has([data-stop]) { padding-left: 44px; }
  .pathed:not([data-line="off"]) .banner:has([data-stop]) { margin-left: 44px; }
  .pathed:not([data-line="off"]) .closing:has([data-stop]) { text-align: left; }
  .pathed .page-hero:has([data-stop]) { padding-bottom: 56px; }

  /* Events */
  .points dt { margin-top: 18px; }
  .road { margin-bottom: 64px; }
  .road .h-lg { width: 100%; margin-bottom: 12px; }
  .road .body { width: 100%; margin-bottom: 20px; }
  .mc-grid { width: 100%; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mc-grid a { border-radius: 12px; }
  .lb-stage { padding: 64px 12px; }
  .lb-prev, .lb-next { top: auto; bottom: 12px; transform: none; }
  .quote { padding: 0 16px; gap: 14px; margin-bottom: 64px; }
  .quote blockquote { margin-top: 6px; }
  .provides ul { margin: 14px 0 24px; padding-left: 22px; }
  .provides + .btn { margin-left: 0; }
}
/* line breaks that copy the mockups' desktop wrapping; a phone wraps on its own */
@media (max-width: 720px) { br.d { display: none; } }

/* Pricing (Slava, 2026-10-15): two plan cards side by side, the guide's outlined in ink, then one
   line of reassurances. The bullets are the site's hexagon in yellow. */
.pricing { padding: calc(150 * var(--u)) var(--gutter) 0; }
.pr-head { text-align: center; max-width: calc(980 * var(--u) + 200px); margin: 0 auto calc(80 * var(--u)); }
.pr-head .h-xl { margin-bottom: calc(30 * var(--u)); text-wrap: balance; }
.pr-head .body { margin: 0; }
.pr-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(16px, calc(36 * var(--u)));
  max-width: calc(1240 * var(--u) + 240px); margin: 0 auto; align-items: start;
}
.pr-card {
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: max(18px, calc(28 * var(--u)));
  padding: max(24px, calc(48 * var(--u))); display: grid; gap: max(18px, calc(30 * var(--u))); min-width: 0;
}
.pr-card.main { border: 2px solid var(--ink); }
.pr-card h2 { margin: 0; font-size: max(20px, calc(34 * var(--u))); font-weight: 800; }
.pr-who { margin: 4px 0 0; color: var(--soft); font-size: max(14px, calc(22 * var(--u))); }
.pr-price { margin: 0; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.pr-price b { font-size: max(44px, calc(84 * var(--u))); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pr-price span { color: var(--soft); font-weight: 600; font-size: max(14px, calc(22 * var(--u))); }
.pr-cost { display: grid; gap: max(6px, calc(10 * var(--u))); }
.pr-then { margin: 0; color: var(--soft); font-weight: 600; font-size: max(15px, calc(23 * var(--u))); font-variant-numeric: tabular-nums; }
.pr-then strong { color: var(--ink); }
.pr-then s { margin-right: 2px; }
.pr-gift {
  background: #f3edfb; border-radius: max(12px, calc(18 * var(--u))); padding: max(12px, calc(20 * var(--u))) max(14px, calc(24 * var(--u)));
  display: grid; gap: 2px; font-size: max(14px, calc(21 * var(--u))); line-height: 1.4;
}
.pr-gift.plain { background: var(--bg); }
.pr-gift strong { font-size: max(15px, calc(23 * var(--u))); }
.pr-gift s { color: var(--soft); margin-right: 4px; }
.pr-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: max(9px, calc(14 * var(--u))); font-size: max(15px, calc(23 * var(--u))); line-height: 1.4; }
.pr-ticks li { display: grid; grid-template-columns: max(14px, calc(20 * var(--u))) 1fr; gap: max(10px, calc(16 * var(--u))); }
.pr-ticks li::before {
  content: ""; width: 100%; aspect-ratio: 1; margin-top: .3em; background: var(--yellow);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.pr-card .btn { justify-self: start; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.btn.ghost:hover { filter: none; background: rgba(0,0,0,.05); }
.pr-trust {
  list-style: none; padding: 0; margin: calc(60 * var(--u)) 0 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px max(20px, calc(44 * var(--u))); font-weight: 600; font-size: max(14px, calc(21 * var(--u)));
}
.pr-trust li::before { content: "✓ "; font-weight: 800; }
@media (max-width: 720px) {
  .bar nav { gap: 10px; }
  .pricing { padding-top: 40px; }
  .pr-head { margin-bottom: 28px; }
  .pr-head .h-xl { margin-bottom: 14px; }
  .pr-cards { grid-template-columns: 1fr; }
  .pr-trust { margin-top: 28px; }
}

/* A hexagon under the pointer lifts into the cards' shadow, as a Guide, offering or modality card does on
   hover (Slava, 2026-10-16: on hover only). A clip-path cuts its own element's shadow off, so:
   - the big hexagons' .hex is already an unclipped holder round its clipped .hex-cut, and casts it itself;
   - each cell gets a twin from hexshadow.js, .cell-sh, placed just under it: a page-coloured hexagon
     hidden behind the photo, inside an unclipped holder that casts the shadow while its cell is hovered.
   Without the script a cell simply has no shadow. */
.cell-sh {
  position: absolute; left: calc(var(--x) * var(--hu)); top: calc(var(--y) * var(--hu));
  width: calc(200 * var(--hu)); height: calc(185 * var(--hu));
  pointer-events: none; opacity: 0; filter: drop-shadow(0 12px 32px rgba(0,0,0,.1));
  transition: opacity .25s ease, translate .25s ease;
}
.cell-sh i { position: absolute; inset: 0; background: var(--bg); -webkit-clip-path: url(#hex-cell); clip-path: url(#hex-cell); }
.cell-sh:has(+ .cell:hover) { opacity: 1; translate: 0 -4px; }
.cell { transition: translate .25s ease; }
.cell:hover { translate: 0 -4px; }
.hex { transition: filter .25s ease, translate .25s ease; }
.hex:hover { filter: drop-shadow(0 12px 32px rgba(0,0,0,.1)); translate: 0 -4px; }
@media (prefers-reduced-motion: reduce) { .cell:hover, .cell-sh:has(+ .cell:hover), .hex:hover { translate: none; } }
/* 60 units more at the foot of each cluster's box, where a hover can happen, so the box does not cut a
   bottom cell's shadow off flat; nothing else moves (the right frame drops its foot by the same 60, the
   wall in the flow gives it back as a negative margin) */
@media (hover: hover) {
  .hive { height: calc(620 * var(--hu)); }
  .comb.right { height: calc(455 * var(--hu)); }
  .frame { height: calc(347.5 * var(--hu)); }
  .frame.right { bottom: calc(-290 * var(--u)); }
  .hexwall { height: calc(866 * var(--hu)); margin-bottom: calc(-60 * var(--hu)); }
}