/* ==========================================================================
   Eukinia — landing page
   Layout & components only. Every colour comes from tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink);
  /* background-color, not the shorthand — the grain layer must survive */
  background-color: var(--bg);
  background-image: var(--grain);
  /* No -webkit-font-smoothing: antialiased. It thins glyph stems on macOS,
     and light-on-dark text is exactly where that reads as washed out. */
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.16; font-weight: 600; letter-spacing: -0.014em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; translate: -50% -140%; z-index: 200;
  background: var(--brand); color: var(--ink-on-brand); padding: .7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600;
  text-decoration: none; transition: translate .18s var(--ease);
}
.skip-link:focus-visible { translate: -50% 0; }

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2.5rem, var(--container-narrow)); }

/* ---------- shared type ---------- */
/* Every eyebrow carries the wordmark's grammar in miniature: a stroke that
   ends in a detached dot. Repeated down the page it becomes the section
   rhythm, and it costs one pseudo-element.
   inline-flex (not flex) so centred section heads still centre. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--space-sm);
}
.eyebrow::before {
  content: "";
  flex: none;
  /* pin to the first line — a wrapped eyebrow would otherwise centre the
     mark across both lines */
  align-self: flex-start; margin-top: .46em;
  width: 1.75rem; height: .36rem;
  background:
    linear-gradient(currentColor, currentColor) left center / 1.05rem 2px no-repeat,
    radial-gradient(circle, currentColor 46%, transparent 47%) right center / .36rem .36rem no-repeat;
  opacity: .8;
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 22ch;
}
.section-title em {
  display: block;
  font-style: italic;
  color: var(--brand-ink);
}
.section-lede {
  margin-top: var(--space-md);
  max-width: var(--measure);
  color: var(--ink-muted);
  font-size: var(--step-1);
  line-height: 1.6;
}
.footnote {
  margin-top: var(--space-lg);
  font-size: var(--step--1);
  color: var(--ink-subtle);
  max-width: 68ch;
}
.footnote--center { margin-inline: auto; text-align: center; }

.section { padding-block: var(--space-4xl); }
.section--sunken { background-color: var(--surface-sunken); background-image: var(--grain); }

/* The inverted band re-declares the semantic tokens for the opposite theme so
   every child (eyebrow, lede, borders, ghost button) stays correct on its own.
   Hardcoding ramp steps here breaks the moment the page theme flips. */
.section--invert {
  --bg: var(--aegean-900);
  --surface: #143A44;
  --surface-sunken: #0F2E36;
  --ink: #DFE9E9;
  --ink-muted: #AEC2C4;
  --ink-subtle: #9BB0B3;
  --brand: var(--aegean-300);
  --brand-ink: var(--aegean-300);
  --accent-ink: var(--kerameikos-300);
  --border: #2F5964;
  --border-strong: #42737F;
  --focus: var(--aegean-300);
  --ink-on-brand: #04171B;
  background-color: var(--bg);
  background-image: var(--grain);
  color: var(--ink);
}
/* When the page itself is dark, the inverted band becomes the light one. */
:root[data-theme="dark"] .section--invert {
  --bg: var(--marmaro-50);
  --surface: var(--marmaro-0);
  --surface-sunken: var(--marmaro-150);
  --ink: #12262B;
  --ink-muted: #485C62;
  --ink-subtle: #586A6F;
  --brand: var(--aegean-600);
  --brand-ink: #0B5A67;
  --accent-ink: var(--kerameikos-700);
  --border: var(--marmaro-300);
  --border-strong: var(--marmaro-400);
  --focus: var(--aegean-600);
  --ink-on-brand: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section--invert {
    --bg: var(--marmaro-50);
    --surface: var(--marmaro-0);
    --surface-sunken: var(--marmaro-150);
    --ink: #12262B;
    --ink-muted: #485C62;
    --ink-subtle: #586A6F;
    --brand: var(--aegean-600);
    --brand-ink: #0B5A67;
    --accent-ink: var(--kerameikos-700);
    --border: var(--marmaro-300);
    --border-strong: var(--marmaro-400);
    --focus: var(--aegean-600);
    --ink-on-brand: #FFFFFF;
  }
}

.section-head { margin-bottom: var(--space-3xl); }
.section-head--center {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.section-head--center .section-title { margin-inline: auto; }
.section-head--center .section-lede { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.35rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  background: var(--btn-bg);
  font: inherit; font-weight: 600; font-size: var(--step--1);
  line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), translate .18s var(--ease), box-shadow .18s var(--ease);
}
.btn--primary {
  --btn-bg: var(--brand);
  color: var(--ink-on-brand);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { --btn-bg: var(--brand-hover); translate: 0 -1px; box-shadow: var(--shadow-md); }
.btn--ghost {
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-ink); translate: 0 -1px; }
.btn--lg { padding: .95rem 1.7rem; font-size: var(--step-0); }
.btn--sm { padding: .55rem 1rem; }
.btn--block { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--bg) 84%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border); }
.header-inner {
  display: flex; align-items: center; gap: var(--space-lg);
  min-height: 68px;
}

.wordmark {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--ink); flex: none;
}
.wordmark__mark { width: 27px; height: 27px; color: var(--brand); flex: none; }
.wordmark__text {
  font-family: var(--font-display);
  font-size: 1.42rem; font-weight: 600; letter-spacing: -0.005em;
}

/* Nav sits directly beside the wordmark. It used to carry margin-inline-start:
   auto, which shunted it right and left a dead gap after the logo. */
.nav {
  display: flex; gap: 1.4rem;
  font-size: var(--step--1); font-weight: 500;
}
.nav a {
  color: var(--ink-muted); text-decoration: none; padding-block: .3rem;
  border-bottom: 2px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--brand); }

/* Actions are the only thing pushed to the far edge. */
.header-actions { display: flex; align-items: center; gap: .55rem; margin-inline-start: auto; }

.lang-switch {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--step--1); font-weight: 600; color: var(--ink-subtle);
}
.lang-switch button {
  background: none; border: 0; padding: .3rem .25rem; cursor: pointer;
  font: inherit; color: inherit; border-radius: var(--radius-xs);
}
.lang-switch button.is-active { color: var(--brand-ink); }
.lang-switch button:hover { color: var(--ink); }

.theme-toggle {
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: none; border: 1.5px solid var(--border); border-radius: var(--radius-full);
  color: var(--ink-muted);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--border-strong); }
.theme-toggle svg { width: 17px; height: 17px; grid-area: 1/1; }
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: none; }
  :root:not([data-theme="light"]) .icon-moon { display: block; }
}

.menu-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 36px; height: 34px; padding: 0 7px; cursor: pointer;
  background: none; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
}
.menu-toggle span {
  display: block; height: 1.8px; background: var(--ink); border-radius: 2px;
  transition: translate .2s var(--ease), rotate .2s var(--ease), opacity .15s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 5.8px; rotate: 45deg; }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { translate: 0 -5.8px; rotate: -45deg; }

.mobile-nav {
  display: none; flex-direction: column; gap: .35rem;
  padding: var(--space-md) 1.25rem var(--space-lg);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.mobile-nav a {
  color: var(--ink); text-decoration: none; padding: .6rem .2rem;
  font-weight: 500; border-bottom: 1px solid var(--border);
}
.mobile-nav .btn { margin-top: var(--space-sm); border-bottom: 0; }

@media (max-width: 1040px) {
  .nav { display: none; }
  .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .mobile-nav:not([hidden]) { display: flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding-block: clamp(3rem, 1.4rem + 7vw, 6.5rem) var(--space-4xl); overflow: hidden; }
.hero__field { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__field svg { width: 100%; height: 100%; }

.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center;
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--step-6); font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.03;
  /* Greek words run longer than the English: at 15ch the Greek headline broke
     to three cramped lines. 20ch lets both languages sit on two. */
  max-width: 20ch;
}
.hero__title em { display: block; font-style: italic; color: var(--brand-ink); }

/* The verb the whole product turns on gets the mark drawn under it: a stroke
   that carries on as separate steps. preserveAspectRatio="none" lets it span
   any word width; non-scaling-stroke keeps the dots round while the gaps
   between them stretch. */
.keyword { position: relative; display: inline-block; white-space: nowrap; }
.keyword__arc {
  position: absolute; inset-inline: 0; bottom: -.2em;
  width: 100%; height: .24em;
  color: var(--accent);
  overflow: visible;
}
.hero__lede {
  margin-top: var(--space-lg); max-width: 46ch;
  font-size: var(--step-1); color: var(--ink-muted); line-height: 1.58;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-xl); }

.trust-strip {
  display: flex; flex-wrap: wrap; gap: .45rem 1.4rem;
  margin-top: var(--space-xl); padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  font-size: var(--step--1); color: var(--ink-subtle);
}
.trust-strip li { display: flex; align-items: center; gap: .45rem; }
.tick { width: 15px; height: 15px; color: var(--brand); flex: none; }

/* ---------- phone ---------- */
.hero__device { display: flex; justify-content: center; }
.device {
  position: relative; width: min(320px, 84vw);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 38px; padding: 11px;
  box-shadow: var(--shadow-lg);
}
.device__notch {
  position: absolute; top: 11px; left: 50%; translate: -50% 0;
  width: 96px; height: 21px; border-radius: 0 0 12px 12px;
  background: var(--surface-sunken); z-index: 2;
}
.device__screen {
  border-radius: 28px; overflow: hidden;
  background: var(--bg-alt); border: 1px solid var(--border);
}
.pscreen { padding: 2.1rem 1.05rem 1.15rem; font-size: .87rem; line-height: 1.42; }
.pscreen__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.pscreen__date { font-size: .72rem; color: var(--ink-subtle); letter-spacing: .01em; }
.pscreen__hello { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -0.015em; }

.ring { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: none; }
.ring svg { grid-area: 1/1; width: 46px; height: 46px; }
.ring span { grid-area: 1/1; font-size: .78rem; font-weight: 700; color: var(--brand-ink); }
.ring i { font-style: normal; font-size: .58em; }

.pscreen__label {
  margin: 1.05rem 0 .5rem; font-size: .68rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-subtle);
}

.tasklist { display: grid; gap: .4rem; }
.task {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .65rem; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border);
}
.task__check {
  display: grid; place-items: center; width: 21px; height: 21px; flex: none;
  border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-subtle);
}
.task__check svg { width: 12px; height: 12px; }
.task__body { display: flex; flex-direction: column; min-width: 0; }
.task__body b { font-size: .84rem; font-weight: 600; }
.task__body small { font-size: .71rem; color: var(--ink-subtle); }
.task--done { opacity: .62; }
.task--done .task__check { background: var(--brand); color: var(--ink-on-brand); }
.task--done .task__body b { text-decoration: line-through; text-decoration-color: var(--ink-subtle); }
.task--next { border-color: var(--brand); box-shadow: 0 0 0 2.5px var(--brand-soft); }
.task--next .task__check { background: var(--brand); color: var(--ink-on-brand); }
.task--med .task__check { background: var(--accent-soft); color: var(--accent-ink); }

.painbar { margin-top: .9rem; padding: .7rem .65rem .75rem; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); }
.painbar p { font-size: .74rem; color: var(--ink-muted); margin-bottom: .45rem; }
.painbar__scale { display: flex; gap: 2px; }
.painbar__scale span {
  position: relative; flex: 1; height: 17px; border-radius: 2px;
  opacity: var(--swatch-dim, .5);
}
.painbar__scale span:first-child { border-radius: 5px 2px 2px 5px; }
.painbar__scale span:last-child { border-radius: 2px 5px 5px 2px; }
.painbar__scale .is-picked { opacity: 1; height: 24px; margin-top: -3.5px; border-radius: 5px; }
.painbar__scale i {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-style: normal; font-size: .68rem; font-weight: 700; color: #fff;
}

/* ==========================================================================
   The gap
   ========================================================================== */
.gapfig { margin: 0 0 var(--space-2xl); }
.gapfig__panel {
  /* declared here, not on .gapfig__plot — the x-label row is a sibling and
     must resolve the same gutter and divider position */
  --gutter: 2.9rem;
  --split: 33.333%;   /* must match the SVG divider: 200 of 600 */
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-md);
}
/* The title stays outside the scroll container so the chart's subject is
   readable at full size even when the plot itself has to scroll. */
.gapfig__title {
  margin: 0 var(--space-xs) var(--space-md);
  font-size: var(--step-0); font-weight: 600; color: var(--ink);
}
/* --gutter reserves the y-label column; --split marks where cover ends. */
.gapfig__plot {
  position: relative;
  padding-inline-start: var(--gutter);
  padding-top: 1.7rem;
}
/* fallback matters: an unresolved var() collapses opacity to its initial 1,
   which would render this wash as a solid block. */
.gapfig__band { fill: var(--brand); opacity: var(--wash, .07); }
.gapfig__svg {
  display: block; width: 100%;
  height: clamp(140px, 20vw, 200px);
}
.gapfig__y, .gapfig__band-label, .gapfig__x li {
  font-size: var(--step--1); line-height: 1;
  color: var(--ink-subtle); white-space: nowrap;
}
.gapfig__y {
  position: absolute; inset-inline-start: 0;
  width: calc(var(--gutter) - .6rem); text-align: end;
}
/* top label hangs from the plot's top edge, bottom label sits on the baseline */
.gapfig__y--top { top: 1.7rem; }
.gapfig__y--bot { bottom: 0; }
.gapfig__band-label {
  position: absolute; top: 0; inset-inline-start: var(--gutter);
  font-weight: 600; color: var(--brand-ink);
}
.gapfig__x {
  position: relative; height: 1.3rem;
  margin-top: .5rem; margin-inline-start: var(--gutter);
}
.gapfig__x li { position: absolute; top: 0; }
.gapfig__x li.gapfig__x--start { inset-inline-start: 0; }
.gapfig__x li.gapfig__x--mid {
  inset-inline-start: var(--split); transform: translateX(-50%);
  color: var(--ink-muted); font-weight: 600;
}
.gapfig__x li.gapfig__x--end { inset-inline-end: 0; }

/* Narrow screens: "έναρξη" and "τέλος κάλυψης" collide on one line, so the
   middle label drops to a second row — still centred on the divider. */
@media (max-width: 560px) {
  .gapfig__panel { --gutter: 2.4rem; }
  .gapfig__x { height: 2.7rem; }
  .gapfig__x li.gapfig__x--mid { top: 1.35rem; }
}
.gapfig__cap {
  margin-top: var(--space-sm);
  font-size: var(--step--1); color: var(--ink-subtle);
}

.gapfig__legend {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  margin-top: var(--space-sm);
  font-size: var(--step--1); color: var(--ink-muted);
}
.gapfig__legend li { display: flex; align-items: center; gap: .5rem; }
.key { display: block; width: 22px; height: 0; flex: none; border-top-width: 2px; }
.key--with { border-top: 2px solid var(--cat-1); }
.key--without { border-top: 2px dashed var(--cat-2); }

.statrow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md);
}
.statrow li {
  padding: var(--space-lg) var(--space-md);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--brand);
}
.statrow b {
  display: block; font-family: var(--font-display);
  font-size: var(--step-4); font-weight: 600; line-height: 1;
  color: var(--brand-ink); letter-spacing: -0.02em;
}
.statrow b.is-zero { color: var(--accent-ink); }
.statrow li:last-child { border-top-color: var(--accent); }
.statrow span {
  display: block; margin-top: .55rem;
  font-size: var(--step--1); color: var(--ink-muted); line-height: 1.45;
}

/* ==========================================================================
   Steps
   ========================================================================== */
/* The three steps hang from one thread: solid while the practice holds it,
   dotted across the middle where care is at home, solid again when it comes
   back. Same solid→dots grammar as the wordmark and the hero underline —
   the page states its thesis before anyone reads a word. */
.steps {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl);
  padding-top: var(--space-lg);
}
.steps::before {          /* the two solid ends */
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 2px;
  background:
    linear-gradient(var(--border), var(--border)) 0 0 / 32% 100% no-repeat,
    linear-gradient(var(--border), var(--border)) 100% 0 / 32% 100% no-repeat;
}
.steps::after {           /* the dotted middle — the weeks at home.
                             Square dashes, not radial dots: at 2px a circle
                             renders as a blur, a dash stays crisp. */
  content: ""; position: absolute; top: 0; inset-inline: 34%; height: 2px;
  background: repeating-linear-gradient(90deg,
              var(--border-strong) 0 2px, transparent 2px 9px);
}

.step { position: relative; padding-top: var(--space-lg); }
.step::before {           /* node straddling the thread — the grid's own
                             top padding is what separates them, so back it out */
  content: ""; position: absolute; inset-inline-start: 0;
  top: calc(-1 * var(--space-lg) - 6px);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 2.5px var(--brand);
}
.step:nth-child(2)::before { box-shadow: inset 0 0 0 2px var(--accent); }

/* Greek alphabetic numerals — Α΄ Β΄ Γ΄ — read as an ordered sequence in both
   languages and are how Greeks actually enumerate. Decorative only; the <ol>
   carries the real semantics, so this stays aria-hidden. */
.step__num {
  display: block; font-family: var(--font-display); font-size: var(--step-2);
  font-weight: 600; color: var(--accent); line-height: 1; margin-bottom: .7rem;
  letter-spacing: .02em;
}
.step h3 { font-size: var(--step-2); font-family: var(--font-display); font-weight: 600; }
.step p { margin-top: .7rem; color: var(--ink-muted); }
.step__meta {
  margin-top: var(--space-md) !important; padding-top: var(--space-sm);
  border-top: 1px dashed var(--border);
  font-size: var(--step--1); color: var(--brand-ink) !important; font-weight: 500;
}

/* ==========================================================================
   Product / switcher
   ========================================================================== */
/* Tabs, not pills. The selected one is marked with the brand's own stroke —
   solid, then carrying on as dots — so the signature doubles as the
   selected-state affordance instead of a generic filled capsule. */
.switcher {
  display: flex; gap: var(--space-lg);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-2xl);
}
.switcher button {
  position: relative; padding: .1rem 0 .85rem; border: 0;
  background: none; font: inherit; font-size: var(--step-0); font-weight: 600;
  color: var(--ink-subtle); cursor: pointer;
  transition: color .18s var(--ease);
}
.switcher button:hover { color: var(--ink); }
.switcher button.is-active { color: var(--ink); }
.switcher button.is-active::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background:
    linear-gradient(var(--brand), var(--brand)) left center / 56% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--brand) 0 2px, transparent 2px 7px)
      right center / 40% 2px no-repeat;
}

.panel__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start;
}
.panel[hidden] { display: none; }

.mock {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
}
.mock__bar {
  display: flex; gap: 6px; padding: .65rem .85rem;
  background: var(--surface-sunken); border-bottom: 1px solid var(--border);
}
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.mock__body { padding: var(--space-lg); }
.mock__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.mock__eyebrow { font-size: var(--step--1); color: var(--ink-subtle); }
.mock__head h4 { font-size: var(--step-1); margin-top: .2rem; }

.pill {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  padding: .28rem .7rem; border-radius: var(--radius-full);
  font-size: .78rem; font-weight: 600;
}
.pill--warn { background: var(--accent-soft); color: var(--accent-ink); }

.ptable { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.ptable th, .ptable td { text-align: start; padding: .62rem .4rem; border-bottom: 1px solid var(--border); }
.ptable thead th {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-subtle); border-bottom-color: var(--border-strong);
}
.ptable tbody th { font-weight: 600; }
.ptable tbody td { color: var(--ink-muted); }
.ptable td b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.meter {
  display: inline-block; width: 46px; height: 6px; margin-inline-end: .5rem;
  border-radius: var(--radius-full); background: var(--surface-sunken);
  vertical-align: middle; overflow: hidden;
}
.meter i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--brand); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: .4rem; vertical-align: baseline; }

.minichart { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--border); }
.minichart__title { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: var(--space-md); }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 108px; }
.bars span {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; position: relative;
  /* reserve the value-label row so the tallest bar can't cover its own number */
  padding-top: 1.15rem;
}
.bars span::before {
  content: ""; display: block; width: 100%; height: var(--h);
  background: var(--brand); border-radius: 4px 4px 0 0;
  transition: height .5s var(--ease);
}
.bars b {
  position: absolute; top: 0; font-size: .7rem; font-weight: 600;
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.bars i {
  font-style: normal; font-size: .68rem; color: var(--ink-subtle);
  padding-top: .35rem; border-top: 1px solid var(--border); width: 100%; text-align: center;
}

/* feature list */
.featurelist { display: grid; gap: var(--space-lg); }
.featurelist li { padding-inline-start: var(--space-md); border-inline-start: 2px solid var(--border); }
.featurelist li:first-child { border-inline-start-color: var(--brand); }
.featurelist h3 { font-size: var(--step-1); }
.featurelist p { margin-top: .35rem; color: var(--ink-muted); font-size: var(--step--1); line-height: 1.55; }

/* exercise detail */
.mock--phone { max-width: 380px; margin-inline: auto; border-radius: var(--radius-xl); }
.exdetail__video {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16/10;
  background:
    radial-gradient(120% 90% at 30% 20%, var(--brand-soft), transparent 60%),
    linear-gradient(150deg, var(--surface-sunken), var(--bg-alt));
  border-bottom: 1px solid var(--border);
}
.exdetail__video svg { width: 54px; height: 54px; }
.exdetail__time {
  position: absolute; right: .7rem; bottom: .7rem;
  padding: .18rem .5rem; border-radius: var(--radius-xs);
  background: color-mix(in oklab, var(--ink) 78%, transparent);
  color: var(--bg); font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.exdetail__body { padding: var(--space-lg); }
.exdetail__region { font-size: var(--step--1); color: var(--ink-subtle); }
.exdetail__body h4 { font-size: var(--step-2); font-family: var(--font-display); font-weight: 600; margin-top: .15rem; }
.exdetail__specs { display: flex; gap: var(--space-lg); margin-top: var(--space-md); }
.exdetail__specs span { display: flex; flex-direction: column; }
.exdetail__specs b { font-size: var(--step-1); font-weight: 700; color: var(--brand-ink); line-height: 1.1; }
.exdetail__specs i { font-style: normal; font-size: .72rem; color: var(--ink-subtle); }
.exdetail__cue { margin-top: var(--space-md); font-size: var(--step--1); color: var(--ink-muted); line-height: 1.55; }
.exdetail__warn {
  display: flex; gap: .5rem; margin-top: var(--space-md);
  padding: .65rem .75rem; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: .8rem; line-height: 1.45;
}
.exdetail__warn svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.exdetail__actions { display: flex; gap: .5rem; margin-top: var(--space-lg); }

/* ==========================================================================
   Why Greek / checklist
   ========================================================================== */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.checklist { display: grid; gap: var(--space-md); padding-top: var(--space-sm); }
.checklist li {
  display: flex; gap: .8rem; align-items: flex-start;
  padding-bottom: var(--space-md); border-bottom: 1px solid var(--border);
  color: var(--ink-muted);
}
.chk { flex: none; width: 20px; height: 20px; margin-top: 3px; }

/* ==========================================================================
   Trust grid
   ========================================================================== */
/* Ruled columns, not boxes. The page already had five card grids; dropping
   the fill and the border here leaves a hairline and a node — the same way
   the three steps hang from their thread — and the band reads as a document
   rather than another row of tiles. */
.trustgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
.trustgrid > div {
  position: relative;
  padding-top: var(--space-lg);
  border-top: 2px solid var(--border);
}
.trustgrid > div::before {
  content: ""; position: absolute; top: -6px; inset-inline-start: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 2px var(--brand);
}
.trustgrid h3 { font-size: var(--step-1); }
.trustgrid p { margin-top: .5rem; font-size: var(--step--1); line-height: 1.55; color: var(--ink-muted); }
.disclaimer {
  margin-top: var(--space-xl); padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  font-size: var(--step--1); line-height: 1.6;
  color: var(--ink-subtle);
  max-width: 78ch; margin-inline: auto; text-align: center;
}

/* ==========================================================================
   Pricing
   ========================================================================== */
/* stretch, not start — equal card heights put the three CTAs on one line.
   The top padding is headroom for the featured card's tab. */
.plans {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg); align-items: stretch;
  padding-top: 2.1rem;
}
/* Every card carries the same 2px border so the three have identical box
   metrics and their capacity rows land on the same line; the featured one
   differs by colour, not by weight. */
.plan {
  position: relative; display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-xl); border: 2px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface);
}
/* Featured plan wears a tab above the card, not a band inside it. Inside-the-
   card padding would push its capacity rows out of line with the other two,
   and lining those rows up across the row is the whole point of having them. */
.plan--featured {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  /* Square the top corners so tab and card form one continuous silhouette.
     Left rounded, the card's 18px curve pinches away from the tab's straight
     edge and the two read as separate shapes. */
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}
.plan__tag {
  position: absolute; bottom: 100%; inset-inline: -2px;
  padding: .45rem .9rem; text-align: center;
  background: var(--brand); color: var(--ink-on-brand);
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  /* the tab now carries the top rounding for the whole shape. bottom:100% puts
     its lower edge on the card's padding box, so it covers the 2px border and
     the seam disappears. */
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.plan__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; }
.plan__for { font-size: var(--step--1); color: var(--ink-muted); }

.plan__price { display: flex; align-items: baseline; gap: .15rem; margin-top: var(--space-xs); }
.plan__price b {
  font-family: var(--font-display); font-size: var(--step-5); font-weight: 600;
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.plan__cur { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink-muted); }
.plan__per { font-size: var(--step--1); color: var(--ink-subtle); margin-inline-start: .25rem; }

/* Capacity states the same two facts in the same two rows on every card, so
   the numbers line up across the row and can actually be compared. */
.plan__caps { margin: var(--space-md) 0 0; border-block: 1px solid var(--border); }
.plan__caps > div {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .2rem var(--space-sm);
  padding: .55rem 0;
}
.plan__caps > div + div { border-top: 1px dashed var(--border); }
.plan__caps dt {
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-subtle);
}
.plan__caps dd {
  margin: 0; font-family: var(--font-display); font-size: var(--step-1);
  font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* "Everything in X, plus" — the mark is solid on the base plan and dotted on
   the ones that inherit, the same grammar the rest of the page uses for
   "carried over from before". */
.plan__from {
  display: flex; align-items: center; gap: .5rem;
  margin-top: var(--space-lg);
  font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-ink);
}
.plan__from::before {
  content: ""; flex: none; width: 1.15rem; height: .34rem;
  background:
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 6px)
      left center / .74rem 2px no-repeat,
    radial-gradient(circle, currentColor 46%, transparent 47%)
      right center / .34rem .34rem no-repeat;
}
.plan__from--base { color: var(--ink-subtle); }
.plan__from--base::before {
  background:
    linear-gradient(currentColor, currentColor) left center / .74rem 2px no-repeat,
    radial-gradient(circle, currentColor 46%, transparent 47%)
      right center / .34rem .34rem no-repeat;
}

.plan__feats { display: grid; gap: .5rem; margin: var(--space-sm) 0 var(--space-lg); flex: 1; }
.plan__feats li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: var(--step--1); color: var(--ink-muted); line-height: 1.5;
}
.plan__feats .tick { width: 14px; height: 14px; margin-top: .2rem; }
.plan .btn { width: 100%; }

/* What every plan shares, said once instead of three times. */
.plan-all {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem;
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
}
.plan-all__label {
  font-size: .74rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-subtle);
}
.plan-all ul {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  font-size: var(--step--1); color: var(--ink-muted);
}
.plan-all li { display: flex; align-items: center; gap: .45rem; }
.plan-all li::before {
  content: ""; flex: none; width: 5px; height: 5px;
  border-radius: 50%; background: var(--brand);
}

/* ==========================================================================
   Pilot form
   ========================================================================== */
.pilotform {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
  padding: var(--space-xl); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--step--1); font-weight: 600; }
.field input[type="text"], .field input[type="email"], .field select {
  width: 100%; padding: .7rem .85rem;
  font: inherit; font-size: var(--step--1);
  color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--border-input); border-radius: var(--radius-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus, .field select:focus {
  outline: 0; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field input[aria-invalid="true"] { border-color: var(--critical); }
.field--check { flex-direction: row; align-items: flex-start; gap: .65rem; }
.field--check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--brand); }
.field--check label { font-weight: 400; font-size: var(--step--1); color: var(--ink-muted); line-height: 1.5; }
.form-note { margin-top: var(--space-sm); font-size: var(--step--1); text-align: center; min-height: 1.4em; }
.form-note.is-ok { color: var(--good); font-weight: 600; }
.form-note.is-err { color: var(--critical); font-weight: 600; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: .5rem; }
.faq details {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); overflow: hidden;
  transition: border-color .18s var(--ease);
}
.faq details[open] { border-color: var(--border-strong); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg); cursor: pointer;
  font-weight: 600; font-size: var(--step-0); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* A node that fills when the answer is open — same marker as the steps and
   the trust rules, instead of the default chevron. */
.faq summary::after {
  content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--border-strong);
  background: transparent;
  transition: box-shadow .2s var(--ease), background .2s var(--ease);
}
.faq summary:hover::after { box-shadow: inset 0 0 0 2px var(--brand); }
.faq details[open] summary::after {
  box-shadow: inset 0 0 0 2px var(--brand);
  background: var(--brand);
}
.faq p {
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--ink-muted); font-size: var(--step--1); line-height: 1.62; max-width: 68ch;
}

/* ==========================================================================
   Closing + footer
   ========================================================================== */
.closing {
  padding-block: var(--space-4xl); text-align: center;
  background-color: var(--surface-sunken);
  background-image: var(--grain);
  border-top: 1px solid var(--border);
}
.closing__quote {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--step-4); font-weight: 400; line-height: 1.25;
  letter-spacing: -0.02em; max-width: 22ch; margin-inline: auto;
}
.closing__sub { margin-top: var(--space-md); color: var(--ink-subtle); font-size: var(--step--1); }
.closing .btn { margin-top: var(--space-xl); }

.site-footer {
  padding-block: var(--space-2xl); border-top: 1px solid var(--border);
  background-color: var(--bg); background-image: var(--grain);
}
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: start; }
.footer-brand p { margin-top: .5rem; font-size: var(--step--1); color: var(--ink-muted); }
.wordmark--footer { pointer-events: none; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: var(--step--1); }
.footer-nav a { color: var(--ink-muted); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); text-decoration: underline; }
.footer-legal {
  grid-column: 1 / -1; padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--ink-subtle); line-height: 1.55; max-width: 76ch;
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal { opacity: 0; translate: 0 18px; }
.reveal.is-in {
  opacity: 1; translate: 0 0;
  transition: opacity .6s var(--ease), translate .6s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; translate: none; transition: none; }
  .btn, .bars span::before { transition: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; }
  /* Stacked, the copy must come first — a device mockup above the headline
     spends the entire first screen without saying what the product is. */
  .hero__device { margin-top: var(--space-xl); }
  .hero__title, .hero__lede { max-width: 100%; }
  .panel__grid, .split { grid-template-columns: 1fr; }
  .panel__grid--rev .featurelist { order: 2; }
  .statrow { grid-template-columns: repeat(2, 1fr); }
  .trustgrid { grid-template-columns: repeat(2, 1fr); }
  /* Stacked, the thread turns vertical and runs down the left margin. */
  .steps {
    grid-template-columns: 1fr; gap: var(--space-xl);
    padding-top: 0; padding-inline-start: 2.1rem;
  }
  .steps::before {
    top: .4rem; bottom: .4rem; height: auto;
    inset-inline: auto; inset-inline-start: 5px; width: 2px;
    background:
      linear-gradient(var(--border), var(--border)) 0 0 / 100% 32% no-repeat,
      linear-gradient(var(--border), var(--border)) 0 100% / 100% 32% no-repeat;
  }
  .steps::after {
    top: 34%; bottom: 34%; height: auto;
    inset-inline: auto; inset-inline-start: 5px; width: 2px;
    background: repeating-linear-gradient(180deg,
                var(--border-strong) 0 2px, transparent 2px 9px);
  }
  .step { padding-top: 0; }
  .step::before { top: .3rem; inset-inline-start: calc(-2.1rem + 5px - 6px); }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plan-all { max-width: 460px; margin-inline: auto; }
  .trustgrid { gap: var(--space-lg); }
  .plan--featured { order: -1; }
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .section { padding-block: var(--space-3xl); }
  .section-head { margin-bottom: var(--space-xl); }
  .statrow { grid-template-columns: 1fr; }
  .trustgrid { grid-template-columns: 1fr; }
  .pilotform { grid-template-columns: 1fr; padding: var(--space-lg); }
  .switcher { width: 100%; }
  .switcher button { flex: 1; padding-inline: .5rem; }
  /* Greek CTA labels are long; side-by-side pills wrap to three lines. */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .exdetail__specs { gap: var(--space-md); }
}

@media print {
  .site-header, .hero__field, .theme-toggle, .lang-switch, .menu-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}