/* 29/9/2026: kathe <img> tyligmeno se <picture> gia WebP. To <picture>
   den prepei na metraei sti diataxi - i eikona menei akrivos opou itan. */
picture { display: contents; }

:root {
  --cream: #FBF6F0;
  --cream-2: #F5EDE3;
  --paper: #FBF6F0;
  --ink: #1D1F21;
  --ink-soft: #6F675E;
  --line: rgba(29, 31, 33, 0.14);
  --mark: #D38164;
  --terracotta: #C4735A;
  --terracotta-deep: #A85E46;
  --clay: #D98E75;
  /* 23/9/2026. To koumpi eixe TO IDIO terracotta me to sima. Otan i marka
     kai i praxi forane to idio xroma, kanena apo ta dio den ksexorizei -
     giauto tou fainotan "thampo". To mpronze afinei to terracotta na einai
     i marka kai dinei sto koumpi diko tou xroma. Dialexe o idios, 23/9. */
  --bronze: #A8823F;
  --bronze-deep: #8D6C31;
  --white: #fffdf9;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", system-ui, sans-serif;
  --max: 1280px;
  --header: 4.5rem;
  /* Οι πέντε κατηγορίες. Γήινα, σβηστά, από την ίδια οικογένεια με το
     υπόλοιπο site. Κανένα καθαρό κόκκινο ή μπλε. */
  --cat-calm: #7F8F7A;
  --cat-flow: #C4735A;
  --cat-rhythmic: #C2954A;
  --cat-energy: #9E4B32;
  /* ZONE X: the fastest shelf. Deep plum-red so it never reads as a lighter
     ENERGY - the two sit next to each other and must not blur. */
  --cat-zonex: #8C3A52;
  --cat-waiting: #6C7A8A;
}

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

/* The hidden attribute has to beat component display rules.
   .btn is inline-flex and .form is grid, both of which outrank the browser
   default for [hidden]; without this, JavaScript that sets el.hidden = true
   leaves the element on screen. */
[hidden] { display: none !important; }

/* Signed-in identity: initials now, a real photo later if one is ever added.
   The circle keeps its size whatever the text, so the row never reflows. */
.who-row { display: flex; align-items: center; gap: 16px; }

.who-row .who-text > * { margin: 0; }

.avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.04em;
  user-select: none;
}

/* Ready for an <img> to be dropped in without touching the layout. */
.avatar img { width: 100%; height: 100%; object-fit: cover; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  font-weight: 400;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  width: min(var(--max), calc(100% - 56px));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
}

.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 80;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 12px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.header-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  min-width: 0;
  line-height: 0;
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: contain;
  display: block;
  background: transparent;
}

.brand-wordmark {
  height: 30px;
  width: auto;
  max-height: 30px;
  max-width: min(210px, 40vw);
  object-fit: contain;
  display: block;
  background: transparent;
}

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

.nav a {
  text-decoration: none;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.nav a:hover,
.nav a[aria-current="page"] { color: var(--ink); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}

.lang {
  display: flex;
  gap: 10px;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

.lang a {
  text-decoration: none;
  color: var(--ink-soft);
}

.lang a[aria-current="true"] {
  color: var(--ink);
  border-bottom: 1px solid var(--mark);
}

.menu-btn {
  display: none;
  border: 1px solid var(--line);
  background: transparent;
  padding: 8px 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font: inherit;
  font-size: 0.68rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.68rem;
  padding: 14px 22px;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease,
              transform 0.22s ease, box-shadow 0.22s ease;
}

.btn-solid {
  background: var(--bronze);
  color: var(--white);
}

/* "Anypsosi": dio xiliosta pano kai apali skia. Diakritiko - to koumpi to
   vlepei se kathe selida, kathe mera, kai ena theatriko efe ekei kourazei. */
.btn-solid:hover {
  background: var(--bronze-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(29, 31, 33, 0.18);
}
.btn-solid:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(29, 31, 33, 0.16);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

/* 23/9/2026: gemize me #1D1F21 - ena mavro tetragono mesa se selida
   pou den exei pouthena allou mavro. Tora gemizei me to terracotta tis
   markas. Kanena mavro sti selida. */
.btn-ghost:hover {
  background: var(--terracotta);
  color: var(--white);
  border-color: var(--terracotta);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(196, 115, 90, 0.28);
}

.btn-ghost.on-dark {
  border-color: var(--paper);
  color: var(--paper);
}

.btn-ghost.on-dark:hover {
  background: var(--paper);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .btn-solid:hover,
  .btn-solid:active,
  .btn-ghost:hover { transform: none; box-shadow: none; }
}

.btn:focus-visible,
.nav a:focus-visible,
.lang a:focus-visible,
.lib-tab:focus-visible,
.cat-btn:focus-visible,
.lib-play:focus-visible,
.lib-icon:focus-visible,
.mp-text:focus-visible,
.discover-card:focus-visible,
.menu-btn:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 3px;
}

.home .site-header {
  position: absolute;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 0;
}

.home .site-header.is-solid {
  position: sticky;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.home .site-header:not(.is-solid) .nav a,
.home .site-header:not(.is-solid) .lang a {
  color: var(--paper);
}

.home .site-header:not(.is-solid) .nav a:hover { color: #fff; }
.home .site-header:not(.is-solid) .lang a[aria-current="true"] {
  color: #fff;
  border-bottom-color: var(--mark);
}
.home .site-header:not(.is-solid) .menu-btn {
  color: var(--paper);
  border-color: rgba(251, 246, 240, 0.4);
}

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: end stretch;
  color: var(--paper);
  overflow: hidden;
}

.hero picture,
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero img {
  object-fit: cover;
  object-position: 42% 48%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(29, 31, 33, 0.52);
}

.hero-copy {
  position: relative;
  z-index: 1;
  padding: 0 0 96px;
  max-width: 42rem;
}

.eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 0 20px;
  color: rgba(251, 246, 240, 0.78);
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  line-height: 0.96;
  margin: 0 0 20px;
}

.hero h1 em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--clay);
}

.lede {
  max-width: 38rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(251, 246, 240, 0.82);
  margin: 0 0 36px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 40px;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 246, 240, 0.78);
}

.trust span {
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid rgba(251, 246, 240, 0.22);
}

.trust span:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}

.licence-strip {
  background: var(--ink);
  color: var(--paper);
  padding: 56px 0 60px;
}

.licence-strip .kicker {
  color: var(--clay);
  margin-bottom: 18px;
}

.licence-strip p:last-child {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.32;
  max-width: 40rem;
}

/* Sections */
/* The page was 12 screens tall and most of it was air: 120px above and below
   every section meant 240px of nothing between one idea and the next, eleven
   times over. Measured at 1440px, that alone was 2,568px - a quarter of the
   page. Clamped instead, so it breathes on a big screen and tightens on a
   small one. Constantinos, 16/9/2026: the type was NOT the problem; shrinking
   the headings was measured and saved only 104px, so it was not done. */
section { padding: clamp(48px, 4.6vw, 72px) 0; scroll-margin-top: var(--header); }
.section-cream { background: var(--cream); }
.section-paper { background: var(--paper); }
.section-ink { background: var(--ink); color: var(--paper); }

/* 3/10/2026: 10.9px einai poly mikro gia epikefalida enotitas.
   13.1px, me ligotero arema, diavazetai xoris na xasei to yfos. */
.kicker {
  color: var(--mark);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.08;
  margin: 0 0 20px;
  /* 16ch broke almost every heading onto three lines. 20ch keeps the same
     type size and the same editorial look, on two. */
  max-width: 24ch;
}

h2.wide { max-width: 30ch; }

.intro {
  /* 36rem inside a 1280px section left 704px of every line empty and turned a
     two-line sentence into four. 48rem fills the measure without running the
     line past what the eye tracks comfortably. Constantinos, 16/9/2026:
     "παράγραφοι που θα μπορούσαν να είναι απλά μια δυο τρεις γραμμές παρά μια
     λέξη κάτω από την άλλη". */
  max-width: 48rem;
  color: var(--ink-soft);
  margin: 0 0 32px;
}

.section-ink .intro { color: rgba(251, 246, 240, 0.68); }
.section-ink .kicker { color: var(--clay); }

/* Discover */
.discover-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  /* Two rows of 27vh was 584px of pictures before a word of the offer. The
     four rooms still read at a glance at 22vh, and the player below them -
     which is the point of the section - comes into view sooner. */
  grid-template-rows: minmax(170px, 22vh) minmax(170px, 22vh);
  gap: 8px;
}

.discover-card:nth-child(1) {
  grid-row: 1 / 3;
  min-height: 0;
}

.discover-card:nth-child(2) {
  grid-column: 2 / 4;
  min-height: 0;
}

.discover-card {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: var(--paper);
  background: var(--ink);
}

.discover-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.discover-card:nth-child(1) img { object-position: center 42%; }
.discover-card:nth-child(2) img { object-position: 42% 58%; }
.discover-card:nth-child(3) img { object-position: center 32%; }
.discover-card:nth-child(4) img { object-position: center 48%; }

.discover-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(29, 31, 33, 0.38);
}

.discover-card-copy {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 1;
}

.discover-card strong {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: 500;
  display: block;
}

.discover-card span {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 6px;
}

.player {
  margin-top: 24px;
  background: transparent;
  border-top: 1px solid var(--line);
  padding: 28px 0 0;
  display: none;
}

.player.is-open { display: block; }

.player-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.player h3 {
  font-family: var(--serif);
  font-size: 2rem;
  margin: 0 0 6px;
  font-weight: 500;
}

.player-meta {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--terracotta);
}

.player-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.note {
  margin: 16px 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.end-card {
  display: none;
  margin-top: 22px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.end-card.is-on { display: block; }

.end-card h4 {
  font-family: var(--serif);
  font-size: 2rem;
  margin: 0 0 10px;
  font-weight: 500;
}

/* Licence */
.licence-line {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  margin: 0 0 28px;
  color: var(--ink);
  max-width: 18ch;
}

.licence-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
  margin-bottom: 8px;
}

.licence-mark {
  width: 112px;
  height: 112px;
  object-fit: contain;
  margin-top: 8px;
}

.is-spinning {
  animation: mark-spin 56s linear infinite;
}

@keyframes mark-spin {
  to { transform: rotate(360deg); }
}

.facts {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  border-top: 1px solid var(--line);
}

.facts li {
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.facts strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  margin-bottom: 8px;
}

/* Spaces */
.spaces-layout {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 48px;
  align-items: stretch;
  margin-top: 8px;
}

.spaces-names {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spaces-names li {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
  font-weight: 500;
  line-height: 1.15;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.spaces-names li:first-child { border-top: 1px solid var(--line); }

.spaces-figure {
  margin: 0;
  min-height: 400px;
  overflow: hidden;
  background: var(--ink);
}

.spaces-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  min-height: 460px;
}

.also {
  margin-top: 32px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 42rem;
}

.spaces-also {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 42rem;
}

.spaces-also-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 40rem;
}

/* Product */
.member-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(251, 246, 240, 0.18);
}

.member-card {
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid rgba(251, 246, 240, 0.18);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr auto;
  gap: 24px 40px;
  align-items: baseline;
}

.member-card h3 {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 500;
  margin: 0;
}

.member-card p {
  margin: 0;
  color: rgba(251, 246, 240, 0.7);
}

.member-card .btn { align-self: center; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 16px;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list li {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.list strong { display: block; font-weight: 500; }

/* Signed-in facts list on account.html. Mirrors .list so the two
   panels read the same, with the label above its value. */
.stats {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stats li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.stats li > span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.stats strong { display: block; font-weight: 500; }

.section-ink .list li {
  border-bottom-color: rgba(251, 246, 240, 0.16);
}

/* Pricing */
.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 58rem);
  gap: 16px;
  align-items: stretch;
}

/* The price block ran down the left half of a 1280px section with the right
   half empty - the same fault as the narrow paragraphs, and worth about 300px.
   The list moves beside the price instead of under it. */
@media (min-width: 940px) {
  .price-card.featured {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 30rem);
    column-gap: 72px;
    align-items: start;
  }
  .price-card.featured > ul {
    grid-column: 2;
    grid-row: 1 / span 5;
    margin: 0;
    align-self: start;
  }
  .price-card.featured > .kicker,
  .price-card.featured > .price,
  .price-card.featured > p { grid-column: 1; }
}

.price-card {
  background: transparent;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  padding-top: 28px;
  display: flex;
  flex-direction: column;
}

.price-card.featured {
  background: transparent;
  color: inherit;
  border: 0;
  border-top: 1px solid var(--line);
}

.price {
  font-family: var(--serif);
  font-size: 4.2rem;
  line-height: 0.92;
  margin: 8px 0 16px;
}

.price small {
  font-size: 1rem;
  letter-spacing: 0.08em;
  font-family: var(--sans);
}

.price-card > p { margin-top: 0; max-width: 32rem; color: var(--ink-soft); }

.price-card ul {
  padding: 0;
  list-style: none;
  color: inherit;
  margin: 12px 0 32px;
  max-width: 32rem;
}

.price-card ul li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.price-card.featured ul { color: var(--ink-soft); }

.price-card.featured .kicker { color: var(--mark); }

.price-card .btn { align-self: flex-start; }

/* Footer */
.site-footer {
  padding: 88px 0 48px;
  background: var(--ink);
  color: rgba(251, 246, 240, 0.68);
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
}

.footer-lockup {
  display: inline-block;
  line-height: 0;
  margin: 0 0 20px;
}

.footer-mark {
  width: 72px;
  height: 72px;
  display: block;
  object-fit: contain;
  background: transparent;
}

/* Certificate sample */
.cert-layout {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 28rem);
  gap: 64px;
  align-items: center;
}

.cert-sample {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 48px 40px 40px;
  overflow: hidden;
  min-height: 22rem;
}

/* The watermark.
 *
 * It used to be one word at up to 6.5rem, centred. At that size SAMPLE was
 * wider than the card, so it ran off both edges and lay straight across the
 * wording underneath - the card read as a broken page rather than as a sample.
 * Constantinos saw it on 16/9/2026 and was right about it.
 *
 * Now the word is tiled as a background image instead of set as text. Three
 * things follow from that, and all three are the point: it repeats across the
 * whole sheet at a size that always fits, nobody can select it and delete it
 * from a copy, and it is drawn beneath the wording rather than over it. The
 * <p> stays in the markup so a screen reader still announces the word.
 */
.cert-watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='190'%20height='124'%3E%3Ctext%20x='95'%20y='62'%20font-family='Georgia,%20Times%20New%20Roman,%20serif'%20font-size='21'%20letter-spacing='4'%20fill='%231D1F21'%20fill-opacity='0.075'%20text-anchor='middle'%20transform='rotate(-24%2095%2062)'%3ESAMPLE%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  font-size: 0;
  color: transparent;
  pointer-events: none;
  user-select: none;
}

/* Everything else in the card sits above the watermark. Without this the
   absolutely positioned watermark paints over its static siblings, which is
   exactly the fault being fixed. */
.cert-sample > :not(.cert-watermark) {
  position: relative;
  z-index: 1;
}

/* The card is a door now: it opens the full sample. */
.cert-open {
  display: block;
  color: inherit;
  text-decoration: none;
}

.cert-open .cert-sample {
  transition: border-color 160ms ease, transform 160ms ease;
}

.cert-open:hover .cert-sample,
.cert-open:focus-visible .cert-sample {
  border-color: var(--mark);
  transform: translateY(-2px);
}

.cert-cue {
  margin-top: 22px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mark);
}

.cert-mark {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin-bottom: 22px;
}

.cert-wordmark {
  height: 40px;
  width: auto;
  max-width: 290px;
  object-fit: contain;
  margin-bottom: 30px;
}

.cert-sample h3 {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 500;
  margin: 0 0 14px;
}

.cert-sample p {
  margin: 0 0 12px;
  color: var(--ink-soft);
  max-width: 22rem;
}

.cert-meta {
  margin-top: 28px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Catalogue river */
.catalogue-band {
  padding-bottom: 72px;
  overflow: hidden;
}

.catalogue-band.is-awaiting {
  padding-top: 64px;
  padding-bottom: 48px;
}

.catalogue-band.is-awaiting .cover-river { display: none; }

.cover-river {
  position: relative;
  margin-top: 8px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.cover-track {
  display: flex;
  gap: 8px;
  width: max-content;
  animation: cover-drift 72s linear infinite;
}

.cover-track img {
  width: 168px;
  height: 168px;
  object-fit: cover;
  flex: 0 0 168px;
  background: var(--ink);
}

.cover-river.is-paused .cover-track,
.cover-river:hover .cover-track {
  animation-play-state: paused;
}

.cover-river.is-static {
  mask-image: none;
  overflow-x: auto;
}

.cover-river.is-static .cover-track {
  animation: none;
  padding-inline: max(28px, calc((100vw - var(--max)) / 2));
}

@keyframes cover-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* FAQ */
.faq-wrap {
  max-width: none;
}

/* Ten questions in one column ran 865px down the page while both margins sat
   empty. Columns cut that to about 250px, and because each cell is its own
   grid item an answer opening on the left does not push the others about. */
.faq-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 0 64px;
  border-top: 1px solid var(--line);
  align-items: start;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 0;
  font-size: 1.02rem;
  font-weight: 500;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  float: right;
  color: var(--mark);
  font-weight: 400;
}

.faq-list details[open] summary::after { content: "–"; }

.faq-list details p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  max-width: 36rem;
}

/* Final CTA */
.final-cta {
  text-align: center;
  padding: clamp(56px, 5.4vw, 80px) 0;
}

.final-cta h2 {
  margin-inline: auto;
}

.final-cta .intro {
  margin-inline: auto;
  margin-bottom: 36px;
}

.footer-tagline {
  margin: 0 0 14px;
  color: var(--clay);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.64rem;
}

.footer-meta { margin: 0; max-width: 26rem; }

.footer-col {
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer-col p {
  margin: 0 0 8px;
  color: var(--cream-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.64rem;
}

.site-footer a {
  text-decoration: none;
  color: var(--paper);
}

.site-footer a:hover { color: var(--clay); }

/* 29/10/2026 — credit line at the bottom of every footer: built by TC NET. */
.footer-credit {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(251, 246, 240, 0.1);
}
.site-footer .footer-credit a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(251, 246, 240, 0.5);
  text-decoration: none;
}
.site-footer .footer-credit a:hover { color: rgba(251, 246, 240, 0.85); }
.footer-credit img { height: 26px; width: auto; display: block; }

.cookie {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  padding: 20px 22px;
  display: none;
  max-width: 400px;
  border: 1px solid rgba(251, 246, 240, 0.16);
}

.cookie.is-on { display: block; }

/* 2/10/2026. I bara ton cookies einai position:fixed kato aristera. O player
   tis Public Discovery einai mesa sti roi tis selidas, sto idio simeio. Otan
   o player eftane xamila sti othoni, i bara kathotan PANO sto Play kai to
   klik pigene sti bara - den epaize tipota. To epalithevsa zontana sto
   neosite: elementFromPoint pano sto Play eferne koumpi tis baras.

   Dokimasa prota na sikoso ton player me z-index. Lathos: to panel kai i
   grammi ton koumpion pianoun olo to platos, opote tote i bara eixe to idio
   provlima anapoda - den patiotan to Accept. To eida sti metrisi kai to
   egkatelipsa.

   I sosti lysi einai na MIN moirazonte to idio simeio. Otan o player einai
   anoichtos, i bara anevainei pano - kato apo tin kefalida. Kanena z-index,
   kanena pointer-events, kamia allagi sto keimeno i sta koumpia tis baras. */
@media (min-width: 861px) {
  .cookie { left: auto; right: 20px; }
}

body:has(.player.is-open) .cookie {
  bottom: auto;
  top: calc(var(--header, 4.5rem) + 16px);
}

.cookie p { margin: 0 0 14px; font-size: 0.86rem; }

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-body {
  padding: 56px 0 96px;
}

.page-hero {
  padding-top: 48px;
}

.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4.8vw, 4.2rem);
  margin: 0 0 16px;
  font-weight: 500;
  line-height: 1.04;
}

.page-hero .intro { margin-bottom: 0; }

.page-band {
  position: relative;
  min-height: 46vh;
  display: grid;
  place-items: end stretch;
  color: var(--paper);
  overflow: hidden;
}

.page-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.page-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(29, 31, 33, 0.5);
}

.page-band .page-hero {
  position: relative;
  z-index: 1;
  padding: 148px 0 56px;
}

.page-band .kicker { color: var(--clay); }
.page-band .intro { color: rgba(251, 246, 240, 0.8); }

.panel {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 36px 0;
  margin-bottom: 0;
}

.panel h2 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  margin: 0 0 12px;
  max-width: none;
}

.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.cat {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 18px 12px 0;
  margin-right: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.form {
  display: grid;
  gap: 16px;
  max-width: 420px;
}

.form label {
  display: grid;
  gap: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.form input {
  font: inherit;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  border-radius: 0;
}

.inner-visual {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 8px;
  margin: 8px 0 32px;
}

.feature-tile {
  min-height: 320px;
  position: relative;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
}

.feature-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(29, 31, 33, 0.42);
}

.feature-tile p {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.feature-tile strong {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 500;
}

.feature-tile span {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
}

@media (max-width: 1180px) {
  .menu-btn {
    display: inline-flex;
    margin-left: auto;
  }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header);
    z-index: 45;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 28px 28px;
    border-bottom: 1px solid var(--line);
    gap: 14px;
  }
  .nav.is-open { display: flex; }
  .home .site-header:not(.is-solid) .nav {
    background: var(--ink);
  }
  .discover-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  .discover-card:nth-child(1),
  .discover-card:nth-child(2) {
    grid-row: auto;
    grid-column: auto;
    min-height: 300px;
  }
  .licence-head { grid-template-columns: 1fr; }
  .licence-mark { width: 88px; height: 88px; }
  .member-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .member-card .btn { justify-self: start; }
}

@media (max-width: 980px) {
  .spaces-layout,
  .split,
  .inner-visual,
  .footer-grid,
  .facts,
  .cert-layout { grid-template-columns: 1fr 1fr; }
  .spaces-figure,
  .spaces-figure img { min-height: 340px; }
}

@media (max-width: 720px) {
  .brand-mark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .brand-wordmark { display: none; }
  .hero img { object-position: center 58%; }
}

@media (max-width: 760px) {
  .wrap { width: min(var(--max), calc(100% - 32px)); }
  .discover-grid,
  .spaces-layout,
  .split,
  .inner-visual,
  .facts,
  .footer-grid,
  .cert-layout { grid-template-columns: 1fr; }
  .discover-card,
  .discover-card:nth-child(1),
  .discover-card:nth-child(2) { min-height: 280px; }
  .hero { min-height: 92vh; }
  .hero-copy { padding-bottom: 56px; max-width: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .header-actions .btn { display: none; }
  section { padding: clamp(44px, 9vw, 64px) 0; }
  .page-hero { padding-top: 32px; }
  .page-band .page-hero { padding: 112px 0 40px; }
  .trust span {
    border-right: 0;
    margin: 0 16px 8px 0;
    padding: 0;
  }
  .price { font-size: 3.8rem; }
  .licence-strip { padding: 40px 0; }
  .licence-line { margin-bottom: 20px; }
  .spaces-figure,
  .spaces-figure img { min-height: 280px; }
  .cover-track img {
    width: 140px;
    height: 140px;
    flex-basis: 140px;
  }
  .cert-sample { padding: 36px 24px 28px; }
  .final-cta { padding: 96px 0; }
  .cookie {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cover-track { animation: none; }
  .is-spinning { animation: none; }
}

/* Library architecture */
.lib-notice {
  margin: 0 0 28px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 40rem;
}

.lib-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
}

.lib-views {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.lib-tab,
.cat-btn {
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.lib-tab {
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 10px 18px 10px 0;
  margin-right: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--ink-soft);
}

.lib-tab[aria-pressed="true"],
.cat-btn[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--mark);
}

.lib-search {
  display: grid;
  gap: 6px;
  min-width: min(280px, 100%);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lib-search input {
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 10px 0;
  border-radius: 0;
}

.lib-cats { margin-bottom: 36px; }

.lib-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  gap: 56px;
  align-items: start;
}

.lib-results-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.lib-count {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lib-list { display: grid; }

.lib-row {
  display: grid;
  /* edge · artwork · play · title · save · add — in DOM order. */
  grid-template-columns: 3px 52px 56px minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.flow-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.lib-row.is-current .lib-copy strong { color: var(--terracotta-deep); }

.lib-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.lib-copy strong {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
}

.lib-copy span,
.flow-row span {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.lib-play,
.lib-icon,
.mp-text {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.62rem;
  color: var(--ink);
  text-align: left;
}

.lib-icon { color: var(--ink-soft); }
.lib-icon[aria-pressed="true"] { color: var(--terracotta-deep); }

/* ---- Κατηγορίες, εξώφυλλο, ένδειξη αναπαραγωγής (2026-09-14) ---- */

.lib-edge { width: 3px; height: 38px; border-radius: 2px; background: transparent; }
.c-calm     .lib-edge { background: var(--cat-calm); }
.c-flow     .lib-edge { background: var(--cat-flow); }
.c-rhythmic .lib-edge { background: var(--cat-rhythmic); }
.c-energy   .lib-edge { background: var(--cat-energy); }
.c-zonex    .lib-edge { background: var(--cat-zonex); }
.c-waiting  .lib-edge { background: var(--cat-waiting); }

.lib-art {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--cream-2);
}

.lib-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-art.is-empty { border: 1px solid var(--line); }

/* Το εξώφυλλο ανασαίνει. 3.6s ο κύκλος: αργά αρκετά ώστε να μην κουράζει
   σε λίστα με εκατοντάδες γραμμές. */
.lib-row.is-playing .lib-art img { animation: frm-breathe 3.6s ease-in-out infinite; }

@keyframes frm-breathe {
  0%, 100% { filter: brightness(0.42); }
  50%      { filter: brightness(0.78); }
}

/* Τρεις τελείες στο χρώμα της κατηγορίας, η μία μετά την άλλη. */
.lib-dots {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--cream);
}

.c-calm     .lib-dots { color: var(--cat-calm); }
.c-flow     .lib-dots { color: var(--cat-flow); }
.c-rhythmic .lib-dots { color: var(--cat-rhythmic); }
.c-energy   .lib-dots { color: var(--cat-energy); }
.c-zonex    .lib-dots { color: var(--cat-zonex); }
.c-waiting  .lib-dots { color: var(--cat-waiting); }

.lib-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
  animation: frm-blink 1.8s ease-in-out infinite;
}

.lib-dots i:nth-child(2) { animation-delay: 0.3s; }
.lib-dots i:nth-child(3) { animation-delay: 0.6s; }

@keyframes frm-blink {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  45%      { opacity: 1;    transform: scale(1); }
}

.lib-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.lib-chip {
  font-style: normal;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  border: 1px solid currentColor;
  color: var(--ink-soft);
}

.c-calm     .lib-chip { color: var(--cat-calm); }
.c-flow     .lib-chip { color: var(--cat-flow); }
.c-rhythmic .lib-chip { color: var(--cat-rhythmic); }
.c-energy   .lib-chip { color: var(--cat-energy); }
.c-zonex    .lib-chip { color: var(--cat-zonex); }
.c-waiting  .lib-chip { color: var(--cat-waiting); }

/* Όποιος έχει ζητήσει λιγότερη κίνηση, δεν παίρνει καμία. */
@media (prefers-reduced-motion: reduce) {
  .lib-row.is-playing .lib-art img,
  .lib-dots i { animation: none; }
  .lib-row.is-playing .lib-art img { filter: brightness(0.6); }
}

/* Library rows, Stage 7d.
   The title is the loudest thing on a row. Actions are glyphs, and the
   secondary ones fade in on hover — but only where a real pointer exists.
   Touch screens have no hover, so there they stay visible. Screen readers
   always read the aria-label; only the eye loses the word. */
.lib-play {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--ink);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.lib-play:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.lib-row.is-current .lib-play {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--cream);
}

.lib-icon.is-glyph {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  transition: color .18s ease, background-color .18s ease, opacity .18s ease;
}

.lib-icon.is-glyph:hover { background: var(--cream-2); color: var(--ink); }
.lib-icon.is-glyph[aria-pressed="true"] { color: var(--terracotta-deep); }

@media (hover: hover) and (pointer: fine) {
  .lib-row .lib-icon.is-glyph,
  .flow-row .lib-icon.is-glyph { opacity: 0; }

  .lib-row:hover .lib-icon.is-glyph,
  .lib-row:focus-within .lib-icon.is-glyph,
  .flow-row:hover .lib-icon.is-glyph,
  .flow-row:focus-within .lib-icon.is-glyph,
  .lib-icon.is-glyph[aria-pressed="true"],
  .lib-icon.is-glyph:focus-visible { opacity: 1; }
}

.flow-row { grid-template-columns: 28px minmax(0, 1fr) auto auto auto; }
.flow-row > span:first-child { color: var(--ink-soft); font-size: 0.78rem; }
.flow-row strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; }

.lib-empty,
.lib-empty-inline {
  color: var(--ink-soft);
  margin: 24px 0 0;
}

.lib-flow {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

.lib-flow h2 { font-size: 2rem; }
.lib-flow .intro { margin-bottom: 24px; }

.flow-row {
  grid-template-columns: 24px minmax(0, 1fr) auto auto auto;
}

.flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.has-member-player { padding-bottom: 108px; }

.has-member-player .cookie { bottom: 112px; }

.member-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 46;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid rgba(251, 246, 240, 0.16);
}

.member-player-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto minmax(180px, 0.8fr);
  gap: 24px;
  align-items: center;
  padding: 16px 0;
}

.member-player-kicker,
.member-player-note {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}

.member-player-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 4px 0 2px;
}

.member-player-meta,
.member-player-progress span {
  margin: 0;
  color: rgba(251, 246, 240, 0.68);
  font-size: 0.78rem;
}

.member-player-note { margin-top: 6px; color: rgba(251, 246, 240, 0.5); }

.member-player-transport {
  display: flex;
  align-items: center;
  gap: 16px;
}

.member-player .mp-text { color: var(--paper); }
.member-player .mp-text[aria-pressed="true"] { color: var(--clay); }

.member-player-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.member-player-bar {
  appearance: none;
  position: relative;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.member-player-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 2px;
  background: rgba(251, 246, 240, 0.22);
}

.member-player-fill {
  position: absolute;
  left: 0;
  top: 10px;
  height: 2px;
  width: 0;
  background: var(--clay);
}

@media (max-width: 980px) {
  .lib-toolbar { flex-direction: column; align-items: stretch; }
  .lib-layout { grid-template-columns: 1fr; gap: 40px; }
  .member-player-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 0 16px;
  }
}

@media (max-width: 760px) {
  .lib-row {
    grid-template-columns: 3px 52px minmax(0, 1fr) auto;
    grid-template-areas:
      "edge art copy play"
      "edge art fav  add";
    gap: 10px 12px;
  }
  .lib-row .lib-edge { grid-area: edge; height: 100%; }
  .lib-row .lib-art { grid-area: art; align-self: center; }
  .lib-row .lib-play { grid-area: play; }
  .lib-row .lib-copy { grid-area: copy; }
  .lib-row .lib-icon[data-lib-fav] { grid-area: fav; }
  .lib-row .lib-icon[data-lib-add] { grid-area: add; }
  .flow-row { grid-template-columns: 20px minmax(0, 1fr) auto auto auto; gap: 8px; }
  .has-member-player { padding-bottom: 168px; }
  .has-member-player .cookie { bottom: 168px; }
}

/* ============================================================
   HERO v8 — split column (2026-09-12)
   Scoped to .hero-split so the old .hero (translations) is untouched.
   ============================================================ */

.hero-split {
  position: relative;
  min-height: 0;
  padding: 0;
  display: block;
  color: var(--ink);
  overflow: hidden;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.hero-split .hero-grid {
  display: grid;
  grid-template-columns: minmax(400px, 48%) 1fr;
  align-items: stretch;
  min-height: 78vh;
}

.hero-split .hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 56px 76px;
  max-width: 46rem;
  margin: 0;
  width: auto;
}

.hero-split .eyebrow {
  color: var(--terracotta);
  margin: 0 0 22px;
}

.hero-split h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 4vw, 3.9rem);
  line-height: 1.02;
  margin: 0 0 22px;
  color: var(--ink);
}

.hero-split h1 em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.hero-split .lede {
  max-width: 27rem;
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0 0 34px;
}

.hero-split .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-split .trust {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero-split .trust span {
  border-right: 0;
  margin: 0;
  padding: 0;
}

.hero-split .trust b {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.16em;
}

.hero-shot {
  position: relative;
  overflow: hidden;
  background: var(--cream-2);
}

.hero-shot picture,
.hero-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-shot img {
  object-fit: cover;
  object-position: 50% 52%;
}

@media (max-width: 860px) {
  .hero-split .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-shot {
    order: -1;
    aspect-ratio: 390 / 236;
    width: 100%;
  }
  .hero-shot img { object-position: 52% 50%; }
  .hero-split .hero-copy {
    padding: 36px 20px 44px;
    max-width: none;
  }
  .hero-split h1 { font-size: clamp(2.1rem, 8.4vw, 2.7rem); }
  .hero-split .lede { font-size: 0.98rem; max-width: none; margin-bottom: 26px; }
  .hero-split .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-split .hero-actions .btn { width: 100%; text-align: center; }
  .hero-split .trust { margin-top: 30px; padding-top: 22px; }
}

/* ============================================================
   PERSONAL vs COMMERCIAL  (#compare)
   ============================================================ */

.vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 44px;
}

.vs-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 34px 32px 30px;
}

.vs-card.is-ours {
  border-color: rgba(196, 115, 90, 0.42);
  box-shadow: 0 1px 0 rgba(196, 115, 90, 0.18);
}

.vs-card .kicker { margin-bottom: 14px; }
.vs-card.is-ours .kicker { color: var(--terracotta); }

.vs-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--ink);
}

.vs-quote {
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0 0 16px;
  padding-left: 16px;
  border-left: 2px solid var(--line);
}

.vs-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs-card li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.vs-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
}

.vs-card.is-ours li::before { background: var(--terracotta); }

.vs-source {
  display: block;
  margin-top: 18px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  word-break: break-word;
}

.vs-source a { color: var(--ink-soft); }

.vs-note {
  margin-top: 28px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46rem;
}

/* ============================================================
   HOW IT WORKS  (#how)
   ============================================================ */

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 46px;
  counter-reset: how;
}

.how-step {
  counter-increment: how;
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.how-step::before {
  content: "0" counter(how);
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--terracotta);
  margin-bottom: 14px;
}

.how-step h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.22;
  margin: 0 0 12px;
  color: var(--ink);
}

.how-step p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .vs-grid,
  .how-grid { grid-template-columns: 1fr; gap: 20px; }
  .vs-card { padding: 26px 22px 24px; }
}

/* Header for the split hero: always solid, dark text (2026-09-12).
   Scoped to .has-split-hero so pages still using the old dark hero are unchanged. */
body.has-split-hero.home .site-header {
  position: sticky;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
body.has-split-hero.home .site-header:not(.is-solid) .nav a,
body.has-split-hero.home .site-header:not(.is-solid) .lang a,
body.has-split-hero.home .site-header .nav a,
body.has-split-hero.home .site-header .lang a {
  color: var(--ink-soft);
}
body.has-split-hero.home .site-header:not(.is-solid) .nav a:hover,
body.has-split-hero.home .site-header .nav a:hover,
body.has-split-hero.home .site-header .nav a[aria-current="page"] { color: var(--ink); }
body.has-split-hero.home .site-header:not(.is-solid) .lang a[aria-current="true"],
body.has-split-hero.home .site-header .lang a[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--mark);
}
body.has-split-hero.home .site-header:not(.is-solid) .menu-btn,
body.has-split-hero.home .site-header .menu-btn {
  color: var(--ink);
  border-color: var(--line);
}
@media (max-width: 860px) {
  body.has-split-hero.home .site-header:not(.is-solid) .nav { background: var(--cream); }
}

/* ------------------------------------------------- Create My Flow: build it
 * The panel that turns "45 minutes" into a class. It sits above the hand-made
 * list, because choosing a length is the first thing a member does and picking
 * tracks one by one is the exception, not the rule.
 */
.flow-auto {
  margin: 18px 0 22px;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(196, 115, 90, 0.05);
}
.flow-auto-q {
  margin: 0 0 10px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay, #C4735A);
}
.flow-mins { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.flow-min {
  font: inherit;
  font-size: 0.82rem;
  padding: 6px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.flow-min:hover { border-color: var(--clay, #C4735A); }
.flow-min.is-on {
  background: var(--ink);
  color: var(--paper, #FBF6F0);
  border-color: var(--ink);
}
.flow-auto .btn { width: 100%; }
.flow-auto-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0.7;
}

/* The section a row belongs to, printed once above the first track of each.
 * Only ever shown for a class the builder made - see sectionHeads(). */
.flow-head {
  margin: 16px 0 6px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay, #C4735A);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.flow-head:first-child { border-top: 0; margin-top: 4px; padding-top: 0; }
.flow-total {
  margin: 0 0 6px;
  font-size: 0.76rem;
  opacity: 0.6;
}

/* The rows of a built class. Until now they carried a number and a title and
 * nothing else, which is too little to recognise a piece by - the catalogue
 * row two columns away shows artwork, album and length. Same information here,
 * in a tighter row, because a class is a list you scan rather than browse. */
.flow-row {
  grid-template-columns: 22px 40px minmax(0, 1fr) auto auto auto;
  gap: 12px;
  padding: 10px 0;
  align-items: center;
}
.flow-n {
  color: var(--ink-soft);
  font-size: 0.75rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.flow-row .lib-art,
.flow-row .lib-art img {
  width: 40px;
  height: 40px;
}
.flow-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.flow-copy strong {
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-meta {
  font-size: 0.74rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .flow-row { grid-template-columns: 18px 36px minmax(0, 1fr) auto auto auto; gap: 9px; }
  .flow-row .lib-art, .flow-row .lib-art img { width: 36px; height: 36px; }
}

/* ------------------------------------------------ Where Create My Flow sits
 *
 * Two problems, one on each layout.
 *
 * Wide: the panel is beside the catalogue but scrolls away with it, so by the
 * time a member has found the fourth track of their class the class itself is
 * two thousand pixels above them. It sticks instead, and scrolls inside itself
 * when a long class outgrows the screen.
 *
 * Narrow (below 980px, which includes every phone): the grid becomes one
 * column and the panel lands underneath four hundred catalogue rows. Building
 * a class is the main thing this page does, so on one column it goes first.
 */
@media (min-width: 981px) {
  .lib-flow {
    position: sticky;
    top: 84px;                       /* clear of the sticky site header */
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    padding-right: 8px;
    border-top: 0;
    padding-top: 0;
  }
  /* The player bar at the bottom of the window covers the last rows. */
  .has-member-player .lib-flow { max-height: calc(100vh - 200px); }
}

@media (max-width: 980px) {
  .lib-layout { display: flex; flex-direction: column; }
  .lib-flow { order: -1; border-top: 0; padding-top: 0; }
  .lib-results { order: 0; }
}

/* ------------------------------------------------ Certificate verification
 *
 * Read by an inspector, standing up, on a phone, possibly in a hurry. The
 * answer has to be legible before anything else on the page is.
 */
.verify-form {
  display: grid;
  gap: 14px;
  max-width: 460px;
  margin: 28px 0 0;
  align-items: end;
}
.verify-form label { display: grid; gap: 6px; }
.verify-form span {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.verify-form input {
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
.verify-form input:focus { outline: 2px solid var(--clay); outline-offset: 1px; }
.verify-form button { justify-self: start; }

.verify-result {
  margin: 30px 0 0;
  padding: 24px 26px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--cream-2);
  max-width: 640px;
}
.verify-result h2 { margin: 0 0 14px; font-size: 1.4rem; line-height: 1.25; }
.verify-result.is-good { border-left: 4px solid #2E7D57; }
.verify-result.is-good h2 { color: #2E7D57; }
.verify-result.is-bad { border-left: 4px solid #B03A2E; }
.verify-result.is-bad h2 { color: #B03A2E; }

.verify-rows { margin: 0 0 18px; display: grid; gap: 9px; }
.verify-rows > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
}
.verify-rows dt {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.verify-rows dd { margin: 0; font-size: 0.95rem; font-weight: 500; }

.verify-scope { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 10px; }
.verify-when { font-size: 0.72rem; color: var(--ink-soft); margin: 0; }

.verify-note { margin: 44px 0 0; max-width: 640px; }
.verify-note h2 {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 22px 0 6px;
}
.verify-note p { font-size: 0.9rem; line-height: 1.65; margin: 0; }

@media (max-width: 40rem) {
  .verify-rows > div { grid-template-columns: 1fr; gap: 2px; }
  .verify-result { padding: 20px; }
}


/* ============================================================
   SAMPLE CERTIFICATE PAGE  (sample-certificate.html)
   ============================================================
   A full-size sample of the certificate a member receives. It exists so that
   someone deciding whether to buy can see exactly what goes on their wall, and
   so that the same page can be told apart from a real one at a glance.

   The watermark here is heavier than on the card: larger tiles, darker ink, and
   one band of words across the middle. A real certificate carries a number and
   a verification code; this one carries neither, and says so in three places.
   ============================================================ */
.sample-wrap { max-width: 56rem; margin-inline: auto; }

.sample-sheet {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(28px, 5vw, 64px);
  margin-top: 28px;
}

.sample-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='360'%20height='240'%3E%3Ctext%20x='180'%20y='120'%20font-family='Georgia,%20Times%20New%20Roman,%20serif'%20font-size='46'%20letter-spacing='8'%20fill='%231D1F21'%20fill-opacity='0.085'%20text-anchor='middle'%20transform='rotate(-24%20180%20120)'%3ESAMPLE%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
}

.sample-sheet > * { position: relative; z-index: 1; }

.sample-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}

/* The lockup on the sheet: the mark and the wordmark together, at the size a
   certificate on a wall deserves. The mark was missing from this page until
   Constantinos asked for it on 16/9/2026. */
.sample-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sample-mark {
  width: 84px;
  height: 84px;
  object-fit: contain;
}

.sample-wordmark {
  height: 48px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
}

.sample-stamp {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  border: 1px solid var(--terracotta-deep);
  padding: 6px 12px;
}

.sample-sheet h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  max-width: none;
  margin: 26px 0 6px;
}

.sample-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 40px;
  margin: 26px 0 0;
}

.sample-rows > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.sample-rows dt {
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.sample-rows dd {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 1.25rem;
}

.sample-clauses { margin-top: 30px; }
.sample-clauses h3 {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 22px 0 8px;
}
.sample-clauses p { margin: 0 0 8px; max-width: 42rem; }

.sample-foot {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.sample-qr {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding: 6px;
}

.sample-note {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--cream-2);
  border-left: 3px solid var(--terracotta);
}

.sample-note p { margin: 0; }

@media (max-width: 720px) {
  .sample-head { flex-direction: column; align-items: flex-start; }
  .sample-mark { width: 64px; height: 64px; }
  .sample-wordmark { height: 36px; }
  .cert-mark { width: 78px; height: 78px; }
  .cert-wordmark { height: 32px; }
}


/* ============================================================
   THE VERIFY BAND  (index.html, inside #licence)
   ============================================================
   Constantinos, 16/9/2026: "να αναφέρεται στο site ότι υπάρχει αυτό" and
   "ό,τι έχει προτεραιότητα πρέπει να φαίνεται στην αρχική, να το βλέπει το
   μάτι". He is right that this is the strongest thing the product has and it
   was invisible: /verify was reachable only from a line in the footer.

   It sits inside the LICENCE section - the second section on the page - so it
   is met early, and it is the only terracotta-filled block in the flow, so the
   eye lands on it without being told to.
   ============================================================ */
.verify-band {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  margin-top: 28px;
  padding: 24px 28px;
  background: var(--cream-2);
  border-left: 3px solid var(--terracotta);
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

.verify-band:hover,
.verify-band:focus-visible {
  background: #F1E4D6;
  transform: translateX(2px);
}

.verify-band-text p:last-child {
  margin: 0;
  max-width: 48rem;
  color: var(--ink-soft);
}

.verify-band h3 {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 10px;
  max-width: 34ch;
}

.verify-band-cta {
  white-space: nowrap;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  border: 1px solid var(--terracotta-deep);
  padding: 12px 18px;
}

@media (max-width: 860px) {
  .verify-band {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .verify-band-cta { justify-self: start; }
}


/* ============================================================
   THE MEMBER'S OWN CERTIFICATE  (certificate.html)
   ============================================================
   Same sheet as the sample, minus the SAMPLE watermark and plus a real QR.
   The print rules matter as much as the screen ones: this page exists to come
   out of a printer and go on a wall, so everything that is not the certificate
   is removed at print time and the sheet loses its screen border.
   ============================================================ */
.cert-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}

/* No watermark on a real certificate - that is the whole difference. */
.cert-sheet::before { content: none; }

.cert-stamp {
  color: var(--ink);
  border-color: var(--line);
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: none;
}

.cert-qr {
  width: 118px;
  height: 118px;
  flex: 0 0 auto;
}

.cert-qr svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media print {
  /* Everything that is not the certificate. */
  .site-header,
  .site-footer,
  .cookie,
  .cert-actions,
  [data-cert-hint],
  .skip { display: none !important; }

  body { background: #fff; }
  section { padding: 0 !important; }
  .wrap { width: 100%; }

  .cert-sheet {
    border: 0;
    padding: 0;
    margin: 0;
    background: #fff;
  }

  /* A licence that breaks across two sheets of paper looks provisional. */
  .cert-sheet { break-inside: avoid; }
  .sample-clauses h3 { break-after: avoid; }

  a { text-decoration: none; color: inherit; }
}

@media (max-width: 860px) {
  .cert-actions { grid-template-columns: 1fr; }
}


/* ============================================================
   WHAT PEOPLE ASK  +  WHO MADE IT   (index.html, 17/9/2026)
   ============================================================
   Two blocks that came out of a second opinion Constantinos asked another
   assistant for. Most of that document was not used: it quoted markup this
   site does not have, and it twice repeated a statistic - "47 studios in
   Europe received cease-and-desist letters" - that has no source. I searched
   for it and could not find a single named case, court or amount; the pages
   that make such claims are all selling music. It was left out. A licence
   business that invents evidence loses the only thing it sells.

   What replaced it is the part that is true and checkable: the societies
   publish their own studio licences, and Spotify's terms say what they say.
   Both are already linked on this page.

   These blocks are built as <details>, closed by default, and they use the
   existing palette rather than the greens and reds that document proposed.
   Closed, the six questions cost about 300px; the page had 1,036px of
   emptiness removed earlier the same day, so it is still shorter than it was
   this morning. That was the test each block had to pass to get in.
   ============================================================ */
.asked {
  margin-top: 44px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}

.asked h3 {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
  margin: 0 0 20px;
}

.asked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
  gap: 0 56px;
}

.asked details {
  border-bottom: 1px solid var(--line);
}

.asked summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  font-weight: 500;
  font-size: 0.98rem;
}

.asked summary::-webkit-details-marker { display: none; }

.asked summary::after {
  content: "+";
  float: right;
  color: var(--mark);
  font-weight: 400;
}

.asked details[open] summary::after { content: "\2013"; }

.asked details p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  max-width: 34rem;
}

/* Who made it. Four lines inside the "who it is for" section, not a section of
   its own: thirty years of radio and a studio of his own is the one thing no
   competitor can copy, and it belongs beside the rooms it is for. */
.maker {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 52rem;
}

.maker-line {
  margin: 0 0 14px;
  color: var(--ink-soft);
}

.maker-sign {
  margin: 18px 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

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


/* ────────────────────────────────────────────────── nomikes selides
 * 29/9/2026. To keimeno irthe apo to Project 3 (zontano apo ton Avgousto)
 * kai prosarmostike sta pragmatika stoixeia tou Project 4.
 * Kanena neo design: mono i typografia pou thelei ena makry nomiko keimeno. */
.legal-sec { padding-top: 30px; padding-bottom: 6px; }
.legal-num {
  margin: 0 0 4px;
  font-size: 0.7rem; letter-spacing: 0.18em; font-weight: 600;
  color: var(--clay, #C4735A);
}
.legal-sec h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 14px; }
.legal-sec p { max-width: 62ch; line-height: 1.68; margin: 0 0 14px; }
.legal-date {
  margin: 14px 0 0; font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--ink-soft, #8A847C);
}
.legal-list { margin: 0 0 16px; padding-left: 1.15rem; max-width: 62ch; }
.legal-list li { padding: 5px 0; line-height: 1.62; }
.legal-toc ol {
  margin: 0; padding-left: 1.3rem; max-width: 46ch;
  columns: 2; column-gap: 2.4rem;
}
.legal-toc li { padding: 4px 0; break-inside: avoid; }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-sec .list li em { font-style: normal; color: var(--ink-soft, #8A847C); }
@media (max-width: 720px) {
  .legal-toc ol { columns: 1; }
}

/* 29/10/2026 - Account page: fields are boxes, not lines.
   Constantinos: "no lines, I want boxes you can see". A bare underline read
   as a divider, not as a place to type. Scoped to the account page
   ([data-auth]) so no other form on the site changes. */
[data-auth] .form input {
  padding: 13px 14px;
  border: 1px solid rgba(29, 31, 33, 0.28);
  border-radius: 8px;
  background: var(--white);
}
[data-auth] .form input:focus {
  outline: none;
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(168, 130, 63, 0.18);
}
[data-auth] .form .btn {
  border-radius: 8px;
  min-height: 48px;
}

/* 29/10/2026 - Account page: Sign in and Create account side by side,
   prices and the rest underneath. On a phone they stack. */
.split > .auth-panel { grid-column: 1 / -1; }
.auth-forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.auth-forms .form h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0;
}
@media (max-width: 760px) {
  .auth-forms { grid-template-columns: 1fr; gap: 40px; }
}

/* 29/10/2026 - the mark beside the logo. Bigger, and it turns: slowly on
   its own, faster with a warm glow under the pointer. The logo itself stays
   where it is. Still for anyone who has asked their device for less motion. */
.brand-mark {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  animation:
    frm-mark-turn 18s linear infinite,
    frm-mark-glow 4.5s ease-in-out infinite;
  will-change: transform;
}
.brand:hover .brand-mark,
.brand:focus-visible .brand-mark {
  animation-duration: 3s, 1.5s;
}
@keyframes frm-mark-turn {
  to { transform: rotate(360deg); }
}
@keyframes frm-mark-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(211, 129, 100, 0)); }
  50%      { filter: drop-shadow(0 0 7px rgba(211, 129, 100, 0.55)); }
}
@media (max-width: 720px) {
  .brand-mark { width: 44px; height: 44px; flex-basis: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark { animation: none; }
}

/* 29/10/2026 - on a phone a member still sees "Sign in" at the top, next to
   Menu. The trial button stays inside the page there, as before. */
@media (max-width: 760px) {
  .brand { margin-right: auto; }
  .header-actions { order: 2; }
  .menu-btn { order: 3; margin-left: 10px; }
  .header-actions .btn.btn-ghost {
    display: inline-flex;
    padding: 8px 14px;
    min-height: 36px;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
  }
}

/* 29/10/2026 - the eye on password fields (js/password-eye.js). */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; box-sizing: border-box; padding-right: 48px; }
.pw-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.pw-eye:hover { color: var(--ink); }
.pw-eye:focus-visible { outline: 2px solid var(--bronze); outline-offset: 1px; }

/* 29/10/2026 - a form message that is an error reads as one. */
[data-auth] .status.err,
[data-auth] .status.error { color: var(--terracotta-deep); font-weight: 500; }

/* 29/10/2026 - "Report a problem" (js/report.js). The Library does not load
   site.css, so it loads this file; keep the two copies the same. */
.report { position: fixed; left: 16px; bottom: 16px; z-index: 60; font-family: inherit; }
.report.report-lift { bottom: 100px; }
/* While the cookie notice is up, it owns the bottom of the screen. */
body:has(.cookie.is-on) .report { display: none; }
.report-open { font: inherit; font-size: 0.72rem; letter-spacing: 0.08em; padding: 9px 14px;
  border-radius: 999px; border: 1px solid #E2D8CC; background: #FFFCF8; color: #1C1A17;
  cursor: pointer; box-shadow: 0 6px 20px -10px rgba(28, 26, 23, .35); }
.report-open:hover { border-color: #A8552F; color: #A8552F; }
.report-panel { position: absolute; left: 0; bottom: 48px; width: min(340px, calc(100vw - 32px));
  background: #FFFCF8; border: 1px solid #E2D8CC; border-radius: 14px; padding: 18px 18px 16px;
  box-shadow: 0 18px 50px -20px rgba(28, 26, 23, .45); }
.report-panel[hidden], .report-form[hidden], .report-thanks[hidden] { display: none; }
.report-panel h3 { margin: 0 0 4px; font-size: 1.05rem; }
.report-lead { margin: 0 0 12px; font-size: 0.82rem; color: #6B635A; }
.report-form label { display: grid; gap: 5px; font-size: 0.74rem; margin: 0 0 10px; color: #3C3833; }
.report-form textarea, .report-form input { font: inherit; font-size: 0.86rem; padding: 9px 11px;
  border: 1px solid #E2D8CC; border-radius: 9px; background: #fff; width: 100%; box-sizing: border-box; }
.report-form textarea:focus, .report-form input:focus { outline: none; border-color: #A8552F; }
.report-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.report-send { width: 100%; justify-content: center; }
.report-status { margin: 8px 0 0; font-size: 0.78rem; color: #A8552F; min-height: 1em; }
.report-close { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 1.3rem;
  line-height: 1; color: #6B635A; cursor: pointer; }
.report-thanks { text-align: center; padding: 6px 4px 4px; }
.report-thanks p { font-size: 0.85rem; color: #6B635A; margin: 6px 0 0; }
.report-mark { display: block; margin: 4px auto 12px; animation: frm-mark-turn 18s linear infinite; }
@media (prefers-reduced-motion: reduce) { .report-mark { animation: none; } }

/* 01/11/2026 - owner view, Admin button, bigger logo and mark as ornament. */
.site-header .nav a { font-size: 0.8rem; letter-spacing: 0.14em; }
.brand-wordmark { height: 46px; max-height: 46px; max-width: min(320px, 40vw); }
.btn-admin {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  background: #2F4A3A; color: #fff; border: 1px solid #2F4A3A;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.btn-admin:hover { background: #24392D; color: #fff; }
.h2-hero { position: relative; isolation: isolate; }
.h2-hero::before {
  content: ""; position: absolute; left: -120px; bottom: -120px;
  width: 520px; height: 520px; pointer-events: none; z-index: -1;
  background: url("../brand/frm-mark-lite.svg") center / contain no-repeat;
  opacity: 0.10;
}
.site-footer { position: relative; overflow: hidden; isolation: isolate; }
.site-footer::after {
  content: ""; position: absolute; right: -80px; top: -60px;
  width: 460px; height: 460px; pointer-events: none; z-index: -1;
  background: url("../brand/frm-mark-lite.svg") center / contain no-repeat;
  opacity: 0.10;
}
.footer-mark { width: 96px; height: 96px; }
.footer-wordmark { height: 64px; width: auto; }
/* The owner never sees the trial or the price. */
html.frm-owner #pricing,
html.frm-owner .h2-promises,
html.frm-owner .h2-duo-price,
html.frm-owner .h2-duo-fine,
html.frm-owner .h2-trust,
html.frm-owner a[href*="pricing"],
html.frm-owner .frm-owner-hide { display: none !important; }