/* Sivuston yhteinen tyylitiedosto: vaalea taitto, kevyt serif-otsikko, Inter-leipäteksti ja
   pillerinapit. Ei scroll-efektejä eikä koristeanimaatioita. */
/* Fontit omalta palvelimelta, jotta teksti ei odota ulkoisia palvelimia. Crimson Pro
   200/300/400 ja Inter 400/500, merkistöt latin ja latin-ext. Muuttuva fontti: sama tiedosto
   kaikille painoille. Lisenssi SIL OFL 1.1 (fonts/LICENSE.txt). Muut merkistöt (kyrillinen,
   kreikka, vietnam) tulevat selaimen varafontista. */
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 200; font-display: swap;
  src: url(/fonts/crimson-pro-v28-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 200; font-display: swap;
  src: url(/fonts/crimson-pro-v28-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/fonts/crimson-pro-v28-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/fonts/crimson-pro-v28-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/crimson-pro-v28-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/crimson-pro-v28-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/inter-v20-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/inter-v20-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/inter-v20-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/inter-v20-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #fbfbfb;
  --ink: #342e2e;
  --muted: #6b6360;         /* kontrasti taustaa vasten 5,7:1 (WCAG AA) */
  --line: #e2dfde;
  --panel: #e7e7e7;
  --white: #fff;
  --danger: #9b3b2f;
  --wrap: 1040px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.06;
}
h1 { font-size: clamp(2.7rem, 6.5vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h3 { font-size: 1.45rem; letter-spacing: -0.025em; }

p { margin: 0 0 1rem; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.wrap.narrow { max-width: 736px; margin-left: max(0px, calc((100% - var(--wrap)) / 2)); }

/* --- yläpalkki --- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 26px 28px; max-width: var(--wrap); margin: 0 auto;
}
.brand {
  font-family: "Crimson Pro", Georgia, serif; font-size: 1.3rem;
  letter-spacing: -0.02em; text-decoration: none;
}
.site-header nav { display: flex; align-items: center; gap: 28px; }
.site-header nav a { font-size: 0.95rem; text-decoration: none; color: var(--muted); }
.site-header nav a:hover { color: var(--ink); }

/* --- napit --- */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--ink); color: var(--bg);
  font: inherit; font-size: 0.92rem; letter-spacing: 0;
  padding: 15px 40px; border-radius: 300px; text-decoration: none;
}
.btn:hover { background: #241f1f; }
.btn:disabled { background: #c9c4c2; cursor: not-allowed; }
.btn-line {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink); padding: 14px 34px;
}
.btn-line:hover { background: rgba(52, 46, 46, 0.06); }
.btn-quiet {
  border: 0; cursor: pointer; font: inherit;
  background: none; color: var(--muted); padding: 0; border-radius: 0;
  font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px;
}
.btn-quiet:hover { background: none; color: var(--ink); }

/* --- osiot --- */
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.section { padding: 96px 0; }
.section--panel { background: var(--panel); }
.hero { padding: 110px 0 120px; }
.hero p.lead {
  font-size: 1.2rem; color: var(--muted); max-width: 34rem; margin: 28px 0 40px;
}
.eyebrow {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 22px;
}
.grid { display: grid; gap: 48px; grid-template-columns: repeat(3, 1fr); margin-top: 56px; }
.grid p { color: var(--muted); margin: 12px 0 0; }
.step-no {
  font-family: "Crimson Pro", Georgia, serif; font-size: 2.2rem;
  color: var(--muted); display: block; margin-bottom: 6px;
}

/* --- kortti ja lomake --- */
.center-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 48px 24px;
}
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: 44px; width: 100%; max-width: 430px;
}
.card h1 { font-size: 2.4rem; margin-bottom: 8px; }
.card .sub { color: var(--muted); margin-bottom: 30px; }
.field { display: block; margin-bottom: 18px; }
.field span {
  display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 7px;
}
input[type="email"], input[type="password"], input[type="time"], select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px;
}
input:focus, select:focus { outline: 2px solid var(--ink); outline-offset: -1px; }

/* Salasanan paljastusnappi (common.js attachReveal). Paljastettaessa kentän type
   vaihtuu textiksi, joten sama ulkoasu on toistettava .pw input[type="text"]:lle. */
.pw { position: relative; display: block; }
.pw input[type="text"] {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px;
}
.pw input { padding-right: 48px; }
.pw-btn {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 9px;
  background: none; color: var(--muted); cursor: pointer;
  touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.pw-btn:hover, .pw-btn.is-on { color: var(--ink); }
.pw-btn.is-on { background: var(--bg); }
.pw-btn svg { width: 20px; height: 20px; }

.card .btn { width: 100%; margin-top: 8px; }
.alt { margin: 24px 0 0; font-size: 0.92rem; color: var(--muted); text-align: center; }
.note { font-size: 0.92rem; color: var(--muted); min-height: 1.4em; margin: 14px 0 0; }
.note--error { color: var(--danger); }

/* --- jäsenalue --- */
.app-main { max-width: 660px; margin: 0 auto; padding: 56px 28px 96px; }
.app-main h1 { font-size: 3rem; margin-bottom: 10px; }
.who { color: var(--muted); font-size: 0.95rem; margin-bottom: 44px; }
.panel {
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: 34px; margin-bottom: 28px;
}
.panel h3 { margin-bottom: 22px; }
.row { display: flex; gap: 20px; }
.row .field { flex: 1; }
.price {
  font-family: "Crimson Pro", Georgia, serif; font-size: 3.4rem;
  letter-spacing: -0.035em; line-height: 1; margin: 0 0 6px;
}
.price small { font-family: Inter, sans-serif; font-size: 0.95rem; color: var(--muted); letter-spacing: 0; }

/* --- alapalkki --- */
.site-footer {
  background: var(--ink); color: #cfc8c6; padding: 64px 0;
  font-size: 0.92rem; margin-top: 0;
}
.site-footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer a { color: #cfc8c6; }

@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; gap: 36px; }
  .row { flex-direction: column; gap: 0; }
  .section, .hero { padding: 64px 0; }
  .card { padding: 32px 24px; }
}

/* --- jäsenalueen tilakortti, palautteet ja osiot --- */
.site-header { display: flex; align-items: center; justify-content: space-between; }
.site-nav { display: flex; gap: 18px; align-items: center; }

.status {
  border: 1px solid var(--line); background: var(--white); border-radius: 18px;
  padding: 26px 28px; margin: 26px 0 34px;
}
.status--paused { border-color: #d9c3ad; background: #fbf4ec; }
.status--running { border-color: var(--line); }
.status-title {
  font-family: "Crimson Pro", Georgia, serif; font-weight: 300;
  font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 8px;
}
.status-text { color: var(--muted); margin: 0; }
.status-meta { color: var(--muted); font-size: 0.92rem; margin: 10px 0 0; }
.status-actions { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #5b8c5a; margin-right: 9px; vertical-align: middle;
}
.dot--paused { background: #c08a3e; }

.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.panel-head h3 { margin: 0; }
.panel-sub { color: var(--muted); margin: 8px 0 18px; }
.panel--quiet { background: transparent; border: 1px solid var(--line); }

.badge {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); padding: 4px 9px; white-space: nowrap;
  background: var(--white);
}
.badge--on { color: #3f6b3e; border-color: #bcd3bb; background: #f2f7f1; }

.inline-ok { color: #3f6b3e; font-size: 0.92rem; margin-left: 12px; }
.inline-err { color: var(--danger); font-size: 0.92rem; margin-left: 12px; }
.link-danger { color: var(--danger); }

#toastHost {
  position: fixed; left: 0; right: 0; bottom: 26px; display: flex;
  flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 50;
}
.toast {
  background: var(--ink); color: #fff; padding: 12px 20px; font-size: 0.95rem;
  max-width: 90vw; opacity: 0; transition: opacity 0.18s ease;
}
.toast--show { opacity: 1; }
.toast--err { background: var(--danger); }

.divider { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.stack > * + * { margin-top: 18px; }

[hidden] { display: none !important; }

/* --- CTA-rivi ja luottamusrivi --- */
.btn-sm { padding: 11px 22px; font-size: 0.88rem; }

.cta-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin: 0 0 26px; }
.cta-alt { font-size: 0.92rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cta-alt:hover { color: var(--ink); }
/* heron kirjautumis- ja testaajalinkki allekkain napin vieressä; rako 12 px ja
   kosketuslaajennus 6 px, joten laajennukset eivät mene päällekkäin */
.cta-alts { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.trust {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 10px 26px; flex-wrap: wrap;
  font-size: 0.9rem; color: var(--muted);
}
.trust li { position: relative; padding-left: 18px; }
.trust li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
}

/* --- yhteinen vaiheindikaattori: signup (1/3), asetukset (2/3), käynnistys (3/3) --- */
.stepline {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 22px; font-size: 0.9rem; color: var(--muted);
}
.stepline-badge {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); padding: 4px 9px;
  white-space: nowrap; background: var(--white);
}
.card .stepline { margin-bottom: 18px; }

.hint { font-size: 0.82rem; color: var(--muted); margin: -10px 0 18px; }

@media (max-width: 720px) {
  .cta-row { gap: 16px; }
  .cta-row .btn { width: 100%; text-align: center; }
}

/* --- palautelomake (exit feedback) --- */
textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px; resize: vertical;
}
textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.qset { border: 0; padding: 0; margin: 0 0 26px; }
.qset legend {
  font-size: 0.82rem; color: var(--muted); padding: 0; margin-bottom: 10px;
}
.choice {
  display: flex; align-items: center; gap: 11px; padding: 9px 0;
  border-bottom: 1px solid var(--line); cursor: pointer; font-size: 0.98rem;
}
.choice:last-child { border-bottom: 0; }
.choice input { accent-color: var(--ink); width: 17px; height: 17px; margin: 0; }
.choice-row { display: flex; gap: 26px; }
.choice-row .choice { border-bottom: 0; padding: 4px 0; }

/* Maksutavan valinta (signup ja maksumuuri): oma laatikko kummallekin vaihtoehdolle. */
.planopt {
  display: grid; grid-template-columns: 17px 1fr; gap: 4px 11px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; margin-bottom: 10px; cursor: pointer;
}
.planopt[hidden] { display: none; }
.planopt input { accent-color: var(--ink); width: 17px; height: 17px; margin: 0; }
/* Jaettu input:focus piirtäisi neliön pyöreän radion sisään -> oma kehys ulkopuolelle. */
.planopt input:focus { border-radius: 50%; outline-offset: 2px; }
.planopt-main { font-size: 0.98rem; }
.planopt-sub { grid-column: 2; font-size: 0.82rem; color: var(--muted); }
.planopt:has(input:checked) { border-color: var(--ink); background: var(--bg); }

.scale { display: flex; gap: 10px; }
.scale-dot {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 11px 0; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  font-size: 0.95rem; color: var(--muted); background: var(--bg);
}
.scale-dot:hover { border-color: var(--ink); }
.scale-dot input { accent-color: var(--ink); margin: 0; }
.scale-dot:has(input:checked) { border-color: var(--ink); color: var(--ink); }
.scale-ends {
  display: flex; justify-content: space-between;
  font-size: 0.82rem; color: var(--muted); margin: 8px 2px 0;
}
/* Palautekysely (feedback.html): kentän otsikon perässä "— optional" samalla rivillä ja
   merkkilaskuri kentän alla. Laskuri varaa tilansa valmiiksi (visibility + min-height), ettei
   lomake hyppää, kun laskuri tulee näkyviin viimeisillä 200 merkillä. */
.field > span > span { display: inline; margin: 0; }
.charcount {
  margin: -12px 2px 18px; text-align: right; line-height: 1.3; min-height: 1.3em;
  font-size: 0.82rem; color: var(--muted); visibility: hidden;
}
.charcount.show { visibility: visible; }
.charcount.max { color: var(--danger); }

/* ==========================================================================
   Etusivu: sanamerkki, kielivalitsin ja etusivun osiot.
   ========================================================================== */

:root { --accent: #4a5d4e; }   /* korvautuu Aksenttiväri-osiossa */

/* --- sanamerkki: CHANGE --- */
.brand-name {
  font-family: "Crimson Pro", Georgia, serif; font-weight: 300;
  font-size: 1.5rem; letter-spacing: 0.18em; text-indent: 0.18em;
}

/* --- kielivalitsin: tekstipari, ei dropdownia --- */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; }
.lang {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 0.78rem; letter-spacing: 0.1em; color: var(--muted);
  padding: 4px 7px; border-radius: 4px;
}
.lang:hover { color: var(--ink); }
.lang--on { color: var(--ink); background: rgba(74, 93, 78, 0.1); }

/* --- leipätekstin variaatiot --- */
.body-lg { font-size: 1.08rem; color: var(--muted); max-width: 40rem; margin: 22px 0 0; }
.section-lead { font-size: 1.08rem; color: var(--muted); max-width: 42rem; margin: 24px 0 0; }
.aside {
  font-size: 0.95rem; color: var(--muted); margin: 32px 0 0;
  padding-left: 18px; border-left: 2px solid var(--accent);
}

/* --- ohjelma: spiraali, teemakortit ja aikajana ---
   Spiraalin geometria tulee draw-spiral.mjs:stä (repon juuri); sen GAP olettaa viivan
   paksuudeksi 11. */
:root { --t-nutri: #b4532a; --t-move: #9a7214; --t-sleep: #46558f; --t-mind: #86507a; }
.theme--nutri { --t: var(--t-nutri); --t-bg: #f6eae5; }
.theme--move { --t: var(--t-move); --t-bg: #f3eee3; }
.theme--sleep { --t: var(--t-sleep); --t-bg: #e9ebf2; }
.theme--mind { --t: var(--t-mind); --t-bg: #f1eaef; }

.arc-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 64px; align-items: center;
}
.spiral { display: block; width: 100%; height: auto; }
.sp { fill: none; stroke-width: 11; stroke-linecap: round; }
.sp--nutri { stroke: var(--t-nutri); }
.sp--move { stroke: var(--t-move); }
.sp--sleep { stroke: var(--t-sleep); }
.sp--mind { stroke: var(--t-mind); }
.sp-arrow { fill: var(--t-mind); stroke: var(--t-mind); stroke-width: 3; stroke-linejoin: round; }
.sp-start { fill: var(--bg); stroke: var(--t-nutri); stroke-width: 3.5; }
.sp-badge circle { fill: currentColor; fill-opacity: 0.12; }
.sp-badge use {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.sp-badge--nutri { color: var(--t-nutri); }
.sp-badge--move { color: var(--t-move); }
.sp-badge--sleep { color: var(--t-sleep); }
.sp-badge--mind { color: var(--t-mind); }

.themes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 64px;
}
.theme {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 28px 26px; box-shadow: inset 0 3px 0 var(--t);
}
.theme-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.theme-head h3 { margin: 0; }
.theme-icon {
  width: 44px; height: 44px; flex: 0 0 44px; padding: 9px; border-radius: 50%;
  color: var(--t); background: var(--t-bg);
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.theme p { color: var(--muted); margin: 0; }
.theme .theme-topics-label {
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 22px 0 10px;
}
.theme-topics { list-style: none; padding: 0; margin: 0; }
.theme-topics li {
  position: relative; padding-left: 18px; margin: 0 0 6px; font-size: 0.95rem; color: var(--ink);
}
.theme-topics li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--t);
}

.arc-steps-title { margin-top: 88px; font-size: 1.7rem; }
.arc-steps {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
}
.arc-step { position: relative; }
.arc-step:not(:last-child)::after {   /* yhdysviiva seuraavaan vaiheeseen */
  content: ""; position: absolute; top: 20px; left: 48px; right: -32px;
  height: 1px; background: var(--accent-line);
}
.arc-step-no {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; margin-bottom: 18px;
  background: var(--bg); border: 1.5px solid var(--accent); color: var(--accent);
  font-family: "Crimson Pro", Georgia, serif; font-size: 1.3rem; line-height: 1;
}
/* keskimmäinen vaihe: teemavärien kehä = teemat kiertävät */
.arc-step--cycle .arc-step-no {
  border: 0;
  background: conic-gradient(var(--t-nutri) 0 25%, var(--t-move) 0 50%, var(--t-sleep) 0 75%, var(--t-mind) 0);
}
.arc-step--cycle .arc-step-no::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bg); z-index: -1;
}
.arc-step p { color: var(--muted); margin: 0; }
.arc-step .arc-step-title { font-weight: 500; font-size: 1.05rem; color: var(--ink); margin: 0 0 8px; }

@media (max-width: 860px) {
  .arc-top { grid-template-columns: 1fr; gap: 40px; }
  .spiral { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .themes { gap: 16px; margin-top: 48px; }
  .theme { padding: 24px 22px 22px; }
  .arc-steps-title { margin-top: 64px; }
  .arc-steps { grid-template-columns: 1fr; gap: 28px; }
  .arc-step { padding-left: 60px; }
  .arc-step-no { position: absolute; left: 0; top: 0; margin: 0; }
  .arc-step:not(:last-child)::after { top: 48px; bottom: -20px; left: 20px; right: auto; width: 1px; height: auto; }
}

/* --- viikon kulku --- */
.beats { list-style: none; counter-reset: beat; padding: 0; margin: 44px 0 0; }
.beats li {
  counter-increment: beat; position: relative; padding-left: 46px; margin-bottom: 26px;
  color: var(--muted);
}
.beats li::before {
  content: counter(beat); position: absolute; left: 0; top: -2px;
  font-family: "Crimson Pro", Georgia, serif; font-size: 1.5rem; color: var(--accent);
}

/* --- kenelle / ei kenelle --- */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 52px; }
.col-title { font-size: 1.1rem; font-family: Inter, sans-serif; font-weight: 500;
  letter-spacing: -0.011em; margin: 0 0 18px; }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li {
  position: relative; padding-left: 28px; margin-bottom: 16px; color: var(--muted);
}
.ticks li::before {
  content: "—"; position: absolute; left: 0; top: 0; color: var(--accent);
}
.ticks--no li::before { content: "×"; color: var(--muted); }
.callout {
  margin: 52px 0 0; padding: 30px 32px; background: var(--white);
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  color: var(--muted); max-width: 46rem;
}

/* --- asiantuntijat --- */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 56px; }
.person { margin: 0; }
.person img {
  /* lähdekuvat ovat neliöitä -> ei rajata, koko pääkuva näkyy */
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top;
  display: block; background: var(--panel); filter: grayscale(100%); }
.person figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.person-name { font-size: 1rem; }
.person-role { font-size: 0.88rem; color: var(--muted); }

/* --- FAQ --- */
.faq { margin: 48px 0 0; }
.faq dt {
  font-size: 1.05rem; padding-top: 24px; border-top: 1px solid var(--line);
}
.faq dd { margin: 10px 0 24px; color: var(--muted); }

/* --- aloitusosio (#how): CTA askelten alla --- */
#how .cta-row { margin: 56px 0 0; }
#how .cta-row .beta-note { margin: 0; }
/* laitehuomautus askelten alla: lause ja neljä pientä ikonia */
.devices p { margin: 0; }
.device-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; padding: 0;
  font-size: 0.9rem; color: var(--muted);
}
.device-list li { display: inline-flex; align-items: center; gap: 7px; }
.device-icon {
  width: 20px; height: 20px; flex: 0 0 20px; color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* --- loppu-CTA --- */
.cta-band { background: var(--panel); }
.cta-band .cta-row { margin-top: 34px; }

/* --- alapalkki --- */
.site-footer .wrap { align-items: flex-start; }
.foot-brand { max-width: 40rem; }
.foot-disclaimer { color: #a9a09e; font-size: 0.85rem; line-height: 1.6; margin: 0; }
.foot-legal { color: #a9a09e; font-size: 0.78rem; line-height: 1.6; margin: 12px 0 0; }
.foot-links { display: flex; flex-direction: column; gap: 8px; text-align: right; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: #fff; }
.foot-company { color: #a9a09e; margin-top: 10px; }

@media (max-width: 860px) {
  .people { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .themes, .cols { grid-template-columns: 1fr; }
  .cols { gap: 40px; }
  .site-header { flex-wrap: wrap; gap: 14px; }
  .site-nav { gap: 14px; flex-wrap: wrap; }
  .site-nav a[href^="#"] { display: none; }   /* mobiilissa vain kieli, login ja CTA */
  .foot-links { text-align: left; margin-top: 28px; }
}

/* ===========================================================================
   Aksenttiväri: syvä vihreä. Yksi väri johdonmukaisesti: napit, silmäkulmatekstit,
   paneelit ja loppupalkki.
   =========================================================================== */
:root {
  --accent: #1d4d3b;        /* pääväri: syvä metsänvihreä */
  --accent-deep: #143a2c;   /* hover / tumma pinta */
  --accent-tint: #eef3f0;   /* vaalea paneelitausta */
  --accent-line: #d2e0d8;   /* vihertävä viiva */
  --panel: var(--accent-tint);
}

/* napit */
.btn { background: var(--accent); color: #fff; }
.btn:hover { background: var(--accent-deep); }
.btn:disabled { background: #bdc9c2; }
.btn-line { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.btn-line:hover { background: rgba(29, 77, 59, 0.07); }

/* silmäkulmatekstit ja numerot kantavat värin läpi sivun */
.eyebrow { color: var(--accent); }
.step-no { color: var(--accent); opacity: 0.85; }

/* navigaatio ja kielivalitsin */
.site-header nav a:hover { color: var(--accent); }
.lang--on { color: var(--accent); background: rgba(29, 77, 59, 0.09); }
.lang:hover { color: var(--accent); }

/* paneeliosioiden viivat vihertäviksi, jotta harmaa ei jää kellumaan */
.section--panel .faq dt { border-color: var(--accent-line); }
.section--panel .callout { border-color: var(--accent-line); }

/* reunanappi: .btn- ja .btn:disabled-säännöt antavat täyden taustan -> pidetään läpinäkyvänä, ettei teksti katoa */
.btn-line { background: transparent; }
.btn-line:disabled { background: transparent; }

/* loppu-CTA: täysi väri, sivun ainoa tumma pinta ennen alapalkkia */
.cta-band { background: var(--accent); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band .section-lead { color: rgba(255, 255, 255, 0.82); }
.cta-band .btn { background: #fff; color: var(--accent); }
.cta-band .btn:hover { background: rgba(255, 255, 255, 0.88); }

/* alapalkki samaan sukuun loppu-CTA:n kanssa, tummempana */
.site-footer { background: var(--accent-deep); color: #b9cbc2; }
.site-footer a { color: #b9cbc2; }
.foot-disclaimer, .foot-company, .foot-languages, .foot-legal { color: #8fa79c; }
.foot-languages { font-size: 0.82rem; margin: 0 0 10px; }

/* asiantuntijakuvat: harmaasävy pehmennetty, jotta ne eivät riitele värin kanssa */
.person img { filter: grayscale(88%) contrast(1.02); }




/* --- chat-mockup: miltä valmennus näyttää käyttäjälle --- */
.chat {
  margin: 52px auto 0; max-width: 430px; border-radius: 22px; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(20, 58, 44, 0.10), 0 2px 6px rgba(20, 58, 44, 0.05);
}
.chat-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); background: #fff;
}
.chat-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em;
}
.chat-who { display: flex; flex-direction: column; line-height: 1.25; }
.chat-who b { font-size: 0.95rem; font-weight: 600; }
.chat-who em { font-style: normal; font-size: 0.76rem; color: var(--accent); }
.chat-body {
  position: relative; background: #eaeff1; padding: 16px 14px 26px;
  max-height: 560px; overflow: hidden;
}
.bubble {
  position: relative; max-width: 90%; border-radius: 16px; padding: 11px 13px 8px;
  font-size: 0.9rem; line-height: 1.52; color: var(--ink);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);
}
.bubble p { margin: 0; }
.bubble--in { background: #fff; border-bottom-left-radius: 5px; }
.bubble--out {
  background: #d8f0dd; border-bottom-right-radius: 5px;
  margin: 10px 0 0 auto;
}
.bubble-title { font-weight: 600; margin: 0 0 8px !important; }
.bubble i { color: var(--muted); }
.bubble-time {
  display: block; text-align: right; margin-top: 5px;
  font-size: 0.7rem; color: var(--muted); letter-spacing: 0.02em;
}
/* viimeinen kupla katkeaa tahallaan: viesti jatkuu, kuvaan ei tule liikaa tekstiä */
.chat-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 92px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(234, 239, 241, 0), #eaeff1 82%);
}
.chat figcaption {
  padding: 14px 18px 16px; font-size: 0.82rem; color: var(--muted);
  text-align: center; background: #fff; border-top: 1px solid var(--line);
}
@media (max-width: 620px) { .chat { max-width: 100%; } }

/* --- käytännössä-osio: desktopissa kaksi palstaa, mockup vasemmalla ja teksti oikealla.
   Alle 960 px kuten .wrap.narrow: otsikko, keskitetty mockup ja teksti allekkain. --- */
.practice { max-width: 736px; margin-left: 0; }
@media (min-width: 960px) {
  .practice {
    max-width: var(--wrap); margin-left: auto;
    display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    grid-template-areas: "chat head" "chat text"; grid-template-rows: auto 1fr;
    column-gap: clamp(48px, 6vw, 80px);
  }
  .practice-head { grid-area: head; }
  .practice-text { grid-area: text; }
  .practice .chat { grid-area: chat; align-self: start; margin: 0; max-width: none; position: sticky; top: 40px; }
  .practice .beats { margin-top: 36px; }
}

/* --- ohjattu rekisteröitymisflow --- */

/* Korostettu muistutus käyttäjälle, joka ei ole vielä aloittanut ohjelmaa. */
.notice {
  border: 1px solid #d9c3ad; border-left: 3px solid var(--accent);
  background: #fbf4ec; border-radius: 18px;
  padding: 24px 28px; margin: 26px 0 0;
}
.notice-title {
  font-family: "Crimson Pro", Georgia, serif; font-weight: 300;
  font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.2; margin: 0 0 12px;
}
.notice-steps { margin: 0; padding-left: 1.2em; color: var(--muted); }
.notice-steps li { margin: 0 0 10px; }
.notice-steps li:last-child { margin-bottom: 0; }

/* Sovellussivulla callout istuu paneelin sisällä -> markkinointisivun isot marginaalit pois. */
.panel .callout { margin: 20px 0; padding: 20px 22px; max-width: none; }
.panel .callout p { margin: 0 0 10px; }
.panel .callout p:last-child { margin-bottom: 0; }

/* Käyttöehtojen kuittaus (app.html, Start-napin edellä) */
.check { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); cursor: pointer; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* --- rahat takaisin -laskuri (app.html "Your plan") ---
   Yksi iso luku ja lyhyt selite, jotta laskuri erottuu paneelin leipätekstistä yhdellä
   silmäyksellä. Viimeinen viikko korostetaan; umpeutunut näytetään hiljaisena (viiva
   numeron paikalla) eikä piiloteta. */
.refund {
  display: flex; align-items: baseline; gap: 14px;
  margin: 22px 0 0; padding: 18px 22px;
  background: var(--bg); border: 1px solid var(--line);
  border-left: 2px solid var(--ink); border-radius: 12px;
}
.refund-num {
  font-family: "Crimson Pro", Georgia, serif; font-size: 2.6rem; line-height: 1;
  letter-spacing: -0.03em; color: var(--ink); min-width: 1.6em; text-align: center;
}
.refund-text { font-size: 0.95rem; color: var(--muted); }
.refund--soon { border-left-color: var(--danger); }
.refund--soon .refund-num { color: var(--danger); }
.refund--over { border-left-color: var(--line); }
.refund--over .refund-num { color: var(--muted); font-size: 2rem; }

/* --- valmennusviestien arkisto (app.html) ---
   Lista <details>-elementtejä: avaus ja näppäimistökäyttö tulevat selaimelta, ei JS:ltä.
   Rivi on tarkoituksella tiivis, koska viestejä voi olla 55. */
.msglist { list-style: none; margin: 22px 0 0; padding: 0; }
.msgitem { border-top: 1px solid var(--line); }
.msgitem:last-child { border-bottom: 1px solid var(--line); }
.msghead {
  display: flex; align-items: baseline; gap: 14px; cursor: pointer;
  padding: 16px 30px 16px 2px; position: relative; list-style: none;
}
.msghead::-webkit-details-marker { display: none; }
.msghead:hover { background: rgba(52, 46, 46, 0.03); }
.msghead:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.msgday {
  flex: none; min-width: 4.6em; font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.msgtitle { font-weight: 500; color: var(--ink); }
/* Kulmamerkki oikeassa reunassa kertoo avattavuuden ilman erillistä ikonia. */
.msghead::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s ease;
}
.msgbox[open] .msghead::after { transform: rotate(-135deg); margin-top: -2px; }
.msgbox[open] .msgtitle { color: var(--ink); }
.msgbody { padding: 2px 6px 26px 2px; max-width: 42rem; }
.msgbody p { margin: 0 0 14px; color: var(--ink); }
.msgbody p:last-child { margin-bottom: 0; }
/* Vieritysikkuna: 55 viestin lista ei saa työntää muuta sivua näkymättömiin, joten
   suljettuna näkyy noin neljä riviä ja viides kurkistaa reunasta. Kun jokin viesti on auki,
   laatikko kasvaa, koska pitkää viestiä ei lueta 250 px:n ikkunassa. */
.msgscroll {
  --msgrows: 4;
  /* rivi = 3.85rem (otsikko + padding + viiva); +1.2rem jättää viidennen rivin
     kurkistamaan reunasta, mikä kertoo listan jatkuvan. */
  max-height: calc(var(--msgrows) * 3.85rem + 1.2rem);
  overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin;
  margin-top: 22px;
}
.msgscroll .msglist { margin-top: 0; }
.msgscroll--open { max-height: min(72vh, 34rem); }
.msgscroll--fadeBot { -webkit-mask-image: var(--fade-bot); mask-image: var(--fade-bot); }
.msgscroll--fadeTop { -webkit-mask-image: var(--fade-top); mask-image: var(--fade-top); }
.msgscroll--fadeTop.msgscroll--fadeBot {
  -webkit-mask-image: var(--fade-both); mask-image: var(--fade-both);
}
.msgscroll {
  --fade-bot: linear-gradient(to bottom, #000 calc(100% - 42px), transparent);
  --fade-top: linear-gradient(to bottom, transparent, #000 42px);
  --fade-both: linear-gradient(to bottom, transparent, #000 42px,
    #000 calc(100% - 42px), transparent);
}
/* Auki olevan viestin otsikko jää kiinni yläreunaan: pitkää viestiä lukiessa
   näkee koko ajan, minkä päivän viestissä ollaan. */
.msgscroll .msgbox[open] .msghead {
  position: sticky; top: 0; z-index: 1; background: var(--white);
}
/* ...ja silloin ylähäivytys haalistaisi juuri sen otsikon -> avattuna vain alareuna. */
.msgscroll--open.msgscroll--fadeTop { -webkit-mask-image: none; mask-image: none; }
.msgscroll--open.msgscroll--fadeTop.msgscroll--fadeBot {
  -webkit-mask-image: var(--fade-bot); mask-image: var(--fade-bot);
}
.msgscroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Varoitus maksumuurilla (takuu jo käytetty). */
.callout--warn { border-left-color: var(--danger); }
.callout--warn strong { color: var(--ink); }

@media (max-width: 720px) {
  .msghead { flex-direction: column; gap: 4px; padding-right: 26px; }
  .msgday { min-width: 0; }
  /* Otsikko ja päivämerkintä allekkain -> rivi on korkeampi kuin työpöydällä. */
  .msgscroll { max-height: calc(var(--msgrows) * 5rem + 1.1rem); }
  .msgscroll--open { max-height: 78vh; }
  .refund { gap: 12px; padding: 16px 18px; }
  .refund-num { font-size: 2.2rem; }
}

/* --- Suljettu beta ---
   [data-beta-show] näkyy vain betassa ja [data-beta-hide] vain sen ulkopuolella (config.js: BETA).
   Molemmat ovat piilossa, kunnes beta.js poistaa attribuutin niiltä, joiden kuuluu näkyä:
   mikään ei välähdä ruudulla ennen tarkistusta, ja elementti saa oman display-arvonsa
   (flex, grid ym.) takaisin. */
[data-beta-hide], [data-beta-show] { display: none !important; }

/* Beta-ilmoitus: sama vaalea laatikko kuin .callout, mutta hillitympi. */
.beta-note {
  margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid var(--accent);
  background: rgba(74, 93, 78, .06); font-size: .95rem; line-height: 1.5;
}

/* ===========================================================================
   Tekijä: hero-byline, tekijän tarina -osion muotokuva ja allekirjoitus sekä kiitokset.
   =========================================================================== */

/* hero: byline (tekijän nimi) */
.byline {
  margin: 26px 0 0; max-width: 34rem;
  font-size: 0.95rem; color: var(--muted);
}
.byline b { color: var(--ink); font-weight: 500; }

/* tekijän tarina: muotokuva kelluu tekstin oikealle, mobiilissa ylös */
.portrait { float: right; width: 200px; margin: 6px 0 24px 32px; }
.portrait img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top;
  display: block; background: var(--panel); filter: grayscale(100%);
}
.portrait figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--muted); }
.sign {
  margin: 28px 0 0; font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.15rem; color: var(--ink);
}
.sign::before { content: "— "; color: var(--accent); }

@media (max-width: 720px) {
  .portrait { float: none; width: 160px; margin: 24px 0 0; }
}

/* yhden kumppanin esittelykortti: kuva vasemmalla, oikealla nimi, titteli, bio, kirjalista
   ja linkit */
.people--1 { grid-template-columns: 1fr; max-width: 50rem; }
.person--feature { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: start; }
.person--feature figcaption { margin-top: 0; }
.person--feature .person-name {
  font-family: "Crimson Pro", Georgia, serif; font-weight: 300;
  font-size: 1.6rem; letter-spacing: -0.025em; line-height: 1.15;
}
.person-bio { margin: 14px 0 0; font-size: 0.95rem; color: var(--muted); }
.person-books-h {
  margin: 22px 0 6px; font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.person-books { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; color: var(--muted); }
.person-books li { margin: 4px 0; }
.person-books cite { font-style: normal; }
.person-books a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.person-books a:hover { color: var(--accent); }
.person-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; }
@media (max-width: 720px) {
  .person--feature { grid-template-columns: 1fr; gap: 20px; }
  .person--feature img { width: 160px; }
  .person-books li { margin: 10px 0; }
}

/* leipätekstiosiot (tekijän tarina, käytännössä): kappaleväli */
.prose > p:not(.eyebrow):not(.aside):not(.sign) {
  margin: 18px 0 0; color: var(--muted); max-width: 40rem;
}

/* ===========================================================================
   Hero: CTA-rivin ja alareunan välit, tyhjä #msg ja CHANGE-akronyymi h1:n alla.
   =========================================================================== */
.hero { padding-bottom: 72px; }
.hero .cta-row { margin-top: 36px; }
/* Ei display:nonea: #msg on aria-live-alue, eikä piilotettu alue ilmoita muutoksistaan.
   Tyhjä kappale ilman marginaalia vie silti 0 px. */
.note:empty { margin: 0; min-height: 0; }
.acronym {
  margin: 18px 0 0; font-size: 0.8rem; letter-spacing: 0.05em;
  color: var(--muted);
}
.site-header nav a.btn { color: var(--bg); }

/* akronyymi kahdelle riville (CHANGE ylös) ja konsulttien linkit nimen alle */
.acronym-word { display: block; letter-spacing: 0.16em; margin-bottom: 3px; }
.person-link {
  font-size: 0.85rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.person-link:hover { color: var(--ink); }

/* ===========================================================================
   Lakisivut (privacy.html, terms.html): pelkkää leipätekstiä ilman alapalkkia, jotta
   sivut pysyvät lyhyinä ja luettavina.
   =========================================================================== */
.legal-page { max-width: 720px; margin: 0 auto; padding: 56px 24px 96px; }
.legal-page h1 { font-size: 2.4rem; margin: 22px 0 0; }
.legal-page .legal-date { color: var(--muted); font-size: 0.88rem; margin: 8px 0 0; }
.legal-page h2 {
  font-family: "Inter", system-ui, sans-serif; font-size: 1rem; font-weight: 500;
  margin: 38px 0 0;
}
.legal-page p, .legal-page li { color: var(--muted); margin: 12px 0 0; }
.legal-page ul { margin: 12px 0 0; padding-left: 22px; }
.legal-page li { margin: 10px 0 0; }
.legal-page .alt { margin-top: 48px; text-align: left; }
.legal-page a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ===========================================================================
   Kuvituskuvat (etusivu).
   - Hero: teksti vasemmalla, kuva oikealla (neliö, cover-rajaus); mobiilissa kuva
     otsikon yläpuolelle.
   - Kaistakuva (.band-img): leveä hengähdystauko osioiden välissä; rajaus painottuu
     ylös (kasvot).
   =========================================================================== */
.hero-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 56px; align-items: center; }
.hero-img { margin: 0; }
.hero-img picture, .band-img picture { display: block; } /* <picture> WebP-versioille */
.hero-img img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: 45% 50%; border-radius: 18px;
}
.band-img { margin: 0; padding: 40px 0; }
.band-img img {
  display: block; width: 100%; height: 600px;
  object-fit: cover; object-position: center 30%; border-radius: 18px;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-img { order: -1; } /* mobiilissa kuva otsikon yläpuolelle */
  .hero-img img { aspect-ratio: auto; height: 260px; object-position: 45% 35%; }
}
@media (max-width: 720px) {
  .band-img { padding: 24px 0; }
  .band-img img { height: 200px; border-radius: 14px; }
}

/* tekijän tarina koko wrap-leveyteen: kappaleet levittäytyvät muotokuvan viereen
   (ei 40 rem -rajaa) */
.prose--wide > p:not(.eyebrow):not(.aside):not(.sign) { max-width: none; }
.prose--wide .body-lg { max-width: none; }

/* ===========================================================================
   Saavutettavuus ja yleiset tarkennukset
   =========================================================================== */

/* saavutettavuus: näkyvä fokusrengas näppäimistökäyttäjälle (selaimen oletus on 1 px ja
   lähes näkymätön vihreällä), ohituslinkki ja vain ruudunlukijalle tarkoitettu teksti */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cta-band :focus-visible, .site-footer :focus-visible { outline-color: #fff; }
#main:focus { outline: none; }
.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 10px;
  text-decoration: none; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.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;
}

/* H1:n alkuosa ("Painonhallintavalmennus") omalle rivilleen silmäkulmatekstin tyyliin */
.kicker {
  display: block; margin: 0 0 18px;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-weight: 500;
  font-size: 0.78rem; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}

/* napin näköiset linkit (a.btn): teksti keskelle, kun nappi venyy leveäksi */
a.btn { text-align: center; }

/* tekstikentät (mm. beta-koodi ja yhteydenoton nimi) samaan tyyliin kuin muut kentät.
   :where() pitää tarkkuuden nollassa, joten sivukohtaiset tyylit (admin .otp-code) voittavat. */
:where(input[type="text"], input:not([type])) {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px;
}

/* signupin viittaus käyttöehtoihin ja tietosuojaan */
.legal-note { font-size: 0.82rem; color: var(--muted); margin: 0 0 18px; }
.legal-note a { color: var(--ink); text-underline-offset: 3px; }

/* kuvien width/height-attribuutit varaavat tilan (ei layout shiftiä); height:auto
   pitää CSS:n neliörajauksen voimassa */
.person img, .portrait img { height: auto; }

/* kosketusalueet: osuma-aluetta kasvatetaan näkymättömällä ::after-laajennuksella, joten
   fonttikoot ja taitto eivät muutu */
.lang, .site-nav a:not(.btn), .cta-alt, .alt a, .person-link, .foot-links a { position: relative; }
.lang::after, .cta-alt::after, .alt a::after, .person-link::after, .foot-links a::after,
.site-nav a:not(.btn)::after { content: ""; position: absolute; inset: -8px 0; }
.site-nav a:not(.btn)::after { inset: -10px -6px; }
.foot-links a::after { inset: -4px 0; } /* rako 8 px: laajennukset eivät mene päällekkäin */
.cta-alts .cta-alt::after { inset: -6px 0; } /* rako 12 px */

/* auth-, laki- ja 404-sivujen yläpalkki (logo = linkki etusivulle, kielivalitsin).
   Kortti alkaa palkin alta eikä pystykeskity, koska keskitys siirtäisi korttia aina, kun
   sisällön korkeus muuttuu (layout shift). */
.site-header ~ .center-page { min-height: 0; justify-content: flex-start; padding: 56px 24px 96px; }
.site-header ~ .legal-page { padding-top: 40px; }
.site-header ~ .legal-page h1 { margin-top: 0; }
@media (max-width: 720px) {
  .site-header ~ .center-page { padding: 24px 24px 64px; }
}

/* mobiilin hero: Aloita-nappi ensinäkymään. Yksipalstaisessa taitossa nappirivi nostetaan
   otsikon ja akronyymin alle, ja ingressi ja byline tulevat sen jälkeen. Flex-sarakkeessa
   marginaalit eivät sulaudu, siksi ne annetaan tässä eksplisiittisesti. reading-flow pitää
   Tab-järjestyksen visuaalisena (Chromium). */
@media (max-width: 860px) {
  .hero-text { display: flex; flex-direction: column; reading-flow: flex-visual; }
  .hero-text > .cta-row { order: 1; margin: 28px 0 0; }
  .hero .hero-text > .lead { order: 2; margin: 32px 0 0; } /* ohittaa .hero p.lead -marginaalit */
  .hero-text > .byline { order: 3; }
  .hero-text > .beta-note { order: 4; margin-top: 26px; }
  .hero-text > .trust { order: 5; margin-top: 22px; }
}
@media (max-width: 720px) {
  .site-header { padding-top: 18px; padding-bottom: 18px; row-gap: 10px; }
  .hero { padding-top: 28px; }
  .hero-grid { gap: 24px; }
  /* kuvan korkeus seuraa näkyvää ruutua (svh = selaimen palkit auki), jotta nappi mahtuu
     myös puhelimissa, joissa selaimen palkit vievät tilaa; 200 px on ylä- ja 150 px alaraja */
  .hero-img img { height: 200px; height: clamp(150px, 23svh, 200px); }
}

/* ===========================================================================
   Valmentajachatti (chat.html). Koko ruudun sovellusnäkymä: yläpalkki, viestit ja
   kirjoituskenttä mahtuvat ruutuun, eikä sivu itse vieritä. Streamin omat tyylit tulevat
   vendor/stream-chat/stream-ui.css:stä; tässä vain sovitus sivuston ilmeeseen.
   =========================================================================== */
/* --app-h ja --app-y asettaa chat.html iPhonen näppäimistön mukaan (visualViewport). */
body.chat-app {
  position: fixed; left: 0; right: 0; top: var(--app-y, 0px);
  height: var(--app-h, 100dvh);
  display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none;
}
/* Matala yläpalkki yhdellä rivillä (muilla sivuilla kapeassa ruudussa kaksi riviä), jotta
   viesteille jää tilaa. Otsikko piiloon, jos se ei mahdu (alle 375 px leveät puhelimet). */
.chat-app .site-header {
  flex: none; flex-wrap: nowrap; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
           10px max(18px, env(safe-area-inset-left));
}
.chat-app .brand-name { font-size: 1.25rem; }
.chat-app .site-nav { gap: 10px; flex-wrap: nowrap; }
.chat-app .rule { flex: none; }
.coach-title {
  font-family: "Crimson Pro", Georgia, serif; font-size: 1.1rem; letter-spacing: -0.01em;
  color: var(--accent); margin-right: auto; white-space: nowrap;
}
@media (max-width: 374px) { .coach-title { display: none; } }

.coach-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.coach-state { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 40px 20px; }
.coach-state .card { margin: 0 auto; }
.coach-state .btn { text-align: center; }
.coach-state #loading { margin-top: 24px; }
.coach-chat {
  flex: 1; min-height: 0; width: 100%; max-width: 860px; margin: 0 auto;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.kb-open .coach-chat { padding-bottom: 0; } /* näppäimistö auki -> kotipalkin tilaa ei tarvita */
.coach-chat > .str-chat { height: 100%; }
/* Sumea chat, kunnes tiedetään, aukeaako iso ikkuna, ja ikkunan ajan (chat.html: veil). */
.coach-chat { transition: filter 0.25s ease-out; }
.coach-chat.is-veiled { filter: blur(12px); pointer-events: none; -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .coach-chat { transition: none; } }

/* Streamin värit sivuston vihreäksi (oletus sininen) ja fontti Interiksi. */
.chat-app .str-chat {
  --str-chat__brand-50: #f3f7f5;  --str-chat__brand-100: #e3eee8; --str-chat__brand-150: #d2e0d8;
  --str-chat__brand-200: #bcd1c5; --str-chat__brand-300: #8fb3a0; --str-chat__brand-400: #4f7d68;
  --str-chat__brand-500: #1d4d3b; --str-chat__brand-600: #173f30; --str-chat__brand-700: #143a2c;
  --str-chat__brand-800: #0f2d22; --str-chat__brand-900: #0b2119;
  --str-chat__typography-font-family-sans: Inter, "Helvetica Neue", Arial;
  --str-chat__background-core-app: var(--bg);
  /* valmentajan viestit lämpimällä harmaalla (oletus sinertävä), avatar kuin sivun kuvake: C vihreällä */
  --str-chat__chat-bg-incoming: #f0eeed;
  --str-chat__avatar-palette-bg-1: var(--accent); --str-chat__avatar-palette-text-1: #fff;
  --str-chat__avatar-palette-bg-2: var(--accent); --str-chat__avatar-palette-text-2: #fff;
  --str-chat__avatar-palette-bg-3: var(--accent); --str-chat__avatar-palette-text-3: #fff;
  --str-chat__avatar-palette-bg-4: var(--accent); --str-chat__avatar-palette-text-4: #fff;
  --str-chat__avatar-palette-bg-5: var(--accent); --str-chat__avatar-palette-text-5: #fff;
}
/* sivuston yleinen textarea-tyyli (palautelomake) ei kuulu Streamin kirjoituskenttään */
.chat-app .str-chat textarea { padding: 0; border-radius: 0; }
/* päiväerotin: "eilen" → "Eilen" (::first-letter ei toimi flex-elementissä) */
.chat-app .str-chat__date-separator-date { text-transform: capitalize; }
/* Streamin napit Isoin Alkukirjaimin ("Poista Viesti") → suomeksi vain ensimmäinen iso */
.chat-app .str-chat__button { text-transform: none; }

/* Kosketus: napautukset ilman harmaata välähdystä, eikä yläpalkki valikoidu pitkällä
   painalluksella, jotta sivu tuntuu sovellukselta eikä verkkosivulta. */
.chat-app { -webkit-tap-highlight-color: transparent; }
.chat-app .site-header { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Vihje chatin yllä (asenna Koti-valikkoon / salli ilmoitukset), iOS:n sovellusbannerin tapaan. */
.coach-tip {
  flex: none; width: 100%; max-width: 860px; margin: 0 auto;
  padding: 8px max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}
.coach-tip__in {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 12px;
  background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 14px;
}
.coach-tip__app { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.coach-tip__bell {
  width: 40px; height: 40px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--accent); color: #fff;
}
.coach-tip__bell svg { width: 22px; height: 22px; }
.coach-tip__txt { flex: 1; margin: 0; font-size: 0.88rem; line-height: 1.4; }
.coach-tip__txt strong { font-weight: 500; }
.coach-tip__sub { display: block; margin-top: 0.3em; opacity: 0.72; }
.coach-tip__ico { display: inline-block; vertical-align: -0.2em; color: var(--accent); }
.coach-tip__ico svg { width: 1.15em; height: 1.15em; display: block; }
.coach-tip__btn {
  flex: none; font: inherit; font-size: 0.9rem; font-weight: 500; color: #fff; background: var(--accent);
  border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; touch-action: manipulation;
}
.coach-tip__btn:active { background: var(--accent-deep); }
.coach-tip__x {
  flex: none; align-self: flex-start; font: inherit; font-size: 1.3rem; line-height: 1; color: var(--muted);
  background: none; border: 0; padding: 2px 6px; cursor: pointer;
}
a.coach-tip__btn { text-decoration: none; }
.kb-open .coach-tip { display: none; } /* näppäimistö auki -> tila viesteille */

/* Iso ikkuna keskellä ruutua: asenna, jatka sovelluksessa tai salli ilmoitukset. */
.coach-pop {
  width: min(360px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 0; border: 0;
  border-radius: 22px; background: var(--bg); color: var(--ink); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 24px 64px rgba(20, 28, 24, 0.28);
}
.coach-pop::backdrop { background: rgba(32, 28, 28, 0.5); }
.coach-pop[open], .coach-pop[open]::backdrop { animation: coach-pop-in 0.2s ease-out; }
@keyframes coach-pop-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .coach-pop[open], .coach-pop[open]::backdrop { animation: none; } }
.coach-pop__in {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 28px 22px 14px;
}
.coach-pop__in:focus { outline: none; }
.coach-pop__app { width: 64px; height: 64px; border-radius: 15px; }
.coach-pop__bell {
  width: 64px; height: 64px; border-radius: 15px; display: grid; place-items: center;
  background: var(--accent); color: #fff;
}
.coach-pop__bell svg { width: 34px; height: 34px; }
.coach-pop__title { font-size: 1.65rem; line-height: 1.15; margin: 16px 0 10px; }
.coach-pop__txt { margin: 0; font-size: 0.98rem; line-height: 1.5; }
.coach-pop__sub { margin: 12px 0 0; font-size: 0.88rem; line-height: 1.45; color: var(--muted); }
.coach-pop__steps {
  align-self: stretch; text-align: left; margin: 14px 0 0; padding: 0 0 0 1.6em;
  font-size: 0.95rem; line-height: 1.45;
}
.coach-pop__steps li + li { margin-top: 8px; }
.coach-pop__steps li::marker { color: var(--accent); font-weight: 500; }
.coach-pop__btn {
  display: block; box-sizing: border-box; width: 100%; min-height: 50px; margin-top: 22px; padding: 13px 18px;
  font: inherit; font-size: 1.02rem; font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none;
  color: #fff; background: var(--accent); border: 0; border-radius: 999px; cursor: pointer; touch-action: manipulation;
}
.coach-pop__btn:active { background: var(--accent-deep); }
.coach-pop__later {
  display: block; width: 100%; min-height: 46px; margin-top: 4px; padding: 10px 18px; font: inherit; font-size: 0.95rem;
  color: var(--muted); background: none; border: 0; border-radius: 999px; cursor: pointer; touch-action: manipulation;
}
.coach-pop__later:active { background: var(--accent-tint); }
/* Latausanimaatio asennuksen ajan: kolme pistettä syttyy vuorotellen. */
.coach-dots { display: inline-flex; gap: 0.4em; padding: 0.35em 0; vertical-align: middle; }
.coach-dots i { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--accent); animation: coach-dot 1.2s ease-in-out infinite both; }
.coach-dots i:nth-child(2) { animation-delay: 0.2s; }
.coach-dots i:nth-child(3) { animation-delay: 0.4s; }
.coach-pop__in > .coach-dots { font-size: 1.3rem; margin: 2px 0 4px; }
@keyframes coach-dot { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.7); } 40% { opacity: 1; transform: none; } }
@keyframes coach-dot-fade { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .coach-dots i { animation-name: coach-dot-fade; } }
/* /chat?debug=1: ensikosketuksen loki ruudun alareunassa. Avoin ikkuna peittää sen taustallaan. */
.coach-debug {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; max-height: 40%; overflow: auto; margin: 0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); font: 11px/1.35 ui-monospace, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere; color: #000; background: rgba(255, 255, 255, 0.92); pointer-events: none;
}
/* Oma sivu: kapealla ruudulla Valmentaja-linkki korvaa "Tietoa ohjelmasta" -linkin (sama kohde
   kuin logolla), jotta navigaatio mahtuu yhdelle riville. */
@media (max-width: 479px) {
  .site-nav:has(#navChat:not([hidden])) > a[href="/"] { display: none; }
}