/* ==== Miksi valita Kelo =====================================================
   The long page. Everything that only appears here lives in this block, so it
   can be lifted out whole if the page ever goes.

   The figures animate once, when they first come into view, and only for
   people who have not asked their system to stop animations. */

.kelo-why__hero { position: relative; }

.kelo-why__hero-img {
    display: block;
    width: 100%;
    height: clamp(320px, 52vh, 560px);
    object-fit: cover;
}

.kelo-why__hero-text {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.5rem 0 1.75rem;
    background: linear-gradient(to top, rgba(35, 36, 30, 0.78), rgba(35, 36, 30, 0));
    color: #fff;
}

.kelo-why__hero-text h1 { margin: 0 0 0.4rem; color: #fff; }
.kelo-why__hero-text p { margin: 0; max-width: 34rem; color: rgba(255, 255, 255, 0.92); }

/* ---- full-width photograph between sections ---- */
/* The full-width photographs. Square corners running to both edges of the window: a band that
   stops short of the edge reads as a picture pasted onto the page rather than as the page itself
   opening onto a view. Shallower than before — it is a breath between sections, not a hero.
   Everything is stated explicitly because the main stylesheet has its own .kelo-band, a dark
   rounded call-to-action block, and these two were fighting over the same photographs. */
.kelo-why-band {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
}

.kelo-why-band img {
    display: block;
    width: 100%;
    height: clamp(130px, 19vh, 230px);
    object-fit: cover;
    border-radius: 0;
}

/* ---- what leaves the machine ---- */
.kelo-why-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
    margin-top: 1.5rem;
}

.kelo-why-compare__side {
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--paper);
}

.kelo-why-compare__side--other { background: var(--sand); }
.kelo-why-compare__side h3 { margin: 0 0 0.9rem; font-size: 1.05rem; }

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

.kelo-why-ticks li {
    position: relative;
    padding: 0.32rem 0 0.32rem 1.6rem;
    border-bottom: 1px solid var(--line-soft);
}

.kelo-why-ticks li:last-child { border-bottom: 0; }

.kelo-why-ticks li::before {
    position: absolute;
    left: 0;
    content: "—";
    color: var(--silver);
}

.kelo-why-ticks--few li::before { content: "·"; color: var(--pine); font-weight: 700; }

.kelo-why-compare__note {
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
    color: var(--soft);
}

.kelo-why__caption {
    margin-top: 1.1rem;
    font-size: 0.85rem;
    color: var(--soft);
    max-width: var(--prose);
}

/* ---- the two flows ---- */
.kelo-why-flows { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 1.5rem; }

.kelo-why-flow {
    margin: 0;
    padding: 1.4rem 1.5rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--paper);
}

.kelo-why-flow figcaption h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.kelo-why-flow figcaption p { margin: 0 0 1.1rem; font-size: 0.92rem; color: var(--soft); }

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

.kelo-why-flow__step {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 0 0 1.15rem;
}

.kelo-why-flow__step:last-child { padding-bottom: 0; }

/* the line joining one step to the next */
.kelo-why-flow__step:not(:last-child)::before {
    position: absolute;
    left: 17px;
    top: 34px;
    bottom: 6px;
    width: 1px;
    background: var(--line);
    content: "";
}

.kelo-why-flow__mark {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper-warm);
    color: var(--pine);
}

.kelo-why-flow__name { font-weight: 600; color: var(--ink); }
.kelo-why-flow__what { font-size: 0.88rem; color: var(--soft); }

.kelo-why-flow__nowhere {
    margin: 1.2rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line-soft);
    font-size: 0.88rem;
    color: var(--pine);
}

/* ---- tiers ---- */
.kelo-why-tiers { margin-top: 1.5rem; }

.kelo-why-tier {
    display: grid;
    grid-template-columns: 11rem 1fr 15rem;
    gap: 1rem;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.kelo-why-tier:last-child { border-bottom: 0; }
.kelo-why-tier__name { font-weight: 600; color: var(--ink); }

.kelo-why-tier__track {
    height: 30px;
    border-radius: var(--r-sm);
    background: var(--sand);
    overflow: hidden;
}

/* No text inside the bar. Solo's bar is a tenth of the width of Pro's, and a label put inside it
   is cut in half — "20 laskua/k". The numbers live in the line beside it, where they fit whatever
   the scale does. */
.kelo-why-tier__bar {
    width: var(--w);
    min-width: 3px;
    height: 100%;
    border-radius: var(--r-sm);
    background: var(--pine);
}

.kelo-why-tier__meta { font-size: 0.9rem; color: var(--soft); text-align: right; }
.kelo-why-tier__meta strong { color: var(--ink); }

/* ---- roadmap ---- */
.kelo-why-road { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0; }

.kelo-why-road__item {
    position: relative;
    padding: 0 0 1.6rem 2.2rem;
    border-left: 1px solid var(--line);
}

.kelo-why-road__item:last-child { border-left-color: transparent; padding-bottom: 0; }

.kelo-why-road__dot {
    position: absolute;
    left: -6px;
    top: 4px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--pine);
    border-radius: 50%;
    background: var(--paper-warm);
}

.kelo-why-road__item--done .kelo-why-road__dot { background: var(--pine); }
.kelo-why-road__item--next .kelo-why-road__dot { border-color: var(--silver); }

.kelo-why-road__state {
    display: inline-block;
    margin-bottom: 0.25rem;
    padding: 0.1rem 0.55rem;
    border-radius: var(--r-pill);
    background: var(--sand);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--soft);
}

.kelo-why-road__item--done .kelo-why-road__state { background: var(--pine-wash); color: var(--pine); }
.kelo-why-road__item--now .kelo-why-road__state { background: var(--pine); color: var(--paper-warm); }
.kelo-why-road__item h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.kelo-why-road__item p { margin: 0; color: var(--soft); max-width: 42rem; }

/* ---- the pine's life ---- */
.kelo-why__story-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: calc(var(--gutter) * 1.5); align-items: center; }
.kelo-why__portrait { margin: 0; }
.kelo-why__portrait img { display: block; width: 100%; height: auto; border-radius: var(--r); }

.kelo-why-life { margin: 2.5rem 0 0; }
.kelo-why-life figcaption h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.kelo-why-life figcaption p { margin: 0 0 1.2rem; font-size: 0.9rem; color: var(--soft); }

/* The rows share one scale, so the grid is drawn once behind all of them. */
.kelo-why-life__chart { position: relative; padding-top: 1.4rem; }

.kelo-why-life__grid {
    position: absolute;
    left: 13rem;
    right: 0;
    top: 0;
    bottom: 1.2rem;
    pointer-events: none;
}

.kelo-why-life__tick { position: absolute; left: var(--left); top: 0; bottom: 0; }
.kelo-why-life__tick i { position: absolute; top: 1.25rem; bottom: 0; width: 1px; background: var(--line-soft); }

.kelo-why-life__tick em {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    font-style: normal;
    font-size: 0.72rem;
    color: var(--silver);
    white-space: nowrap;
}

.kelo-why-life__tick:first-child em { transform: none; }

.kelo-why-life__row {
    position: relative;
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 0 0;
    align-items: center;
    padding: 0.42rem 0;
}

.kelo-why-life__label {
    padding-right: 1rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
}

.kelo-why-life__track { position: relative; height: 26px; }

.kelo-why-life__span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--left);
    width: var(--w);
    border-radius: 2px;
}

.kelo-why-life__span--life { background: var(--pine); }
.kelo-why-life__span--turn { background: var(--heartwood); }
.kelo-why-life__span--stand { background: var(--pine-pale); }
.kelo-why-life__span--other { background: var(--silver); }

.kelo-why-life__note {
    grid-column: 2;
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--soft);
}

.kelo-why-life__unit {
    margin: 0.1rem 0 0 13rem;
    font-size: 0.72rem;
    color: var(--silver);
}

.kelo-why-life__key {
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    font-size: 0.85rem;
    color: var(--soft);
}

.kelo-why-life__chip {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 0.45rem;
    border-radius: 3px;
    vertical-align: baseline;
}

.kelo-why-life__chip--life { background: var(--pine); }
.kelo-why-life__chip--turn { background: var(--heartwood); }
.kelo-why-life__chip--stand { background: var(--pine-pale); }
.kelo-why-life__chip--other { background: var(--silver); }

/* ---- the map beside the story ---- */
.kelo-why-map { margin: 0; display: grid; place-items: center; }
.kelo-why-map svg { width: 100%; max-width: 230px; height: auto; }
.kelo-why-map figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: var(--soft); text-align: center; }
.kelo-why-map__land { fill: var(--pine-wash); stroke: var(--pine-pale); stroke-width: 1.5; stroke-linejoin: round; }
.kelo-why-map__pin { fill: #B3261E; }
.kelo-why-map__label { font-size: 13px; fill: var(--ink); font-weight: 600; }

/* ---- end and sources ---- */
.kelo-why__end { text-align: center; }
.kelo-why__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

.kelo-why-sources {
    padding: 2rem 0 3rem;
    font-size: 0.85rem;
    color: var(--soft);
}

.kelo-why-sources h2 { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--silver); }
.kelo-why-sources ul { margin: 0.6rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }

/* ---- coming into view -------------------------------------------------- */

/* Everything below is gated on .kelo-js, a class put on <html> before the page paints.
   Without it — no JavaScript, a blocked file, a stale cache — the figures are simply drawn at
   their real size. A chart that is invisible unless a script runs is not an animation, it is a
   chart that sometimes does not exist. */

.kelo-js [data-reveal] .kelo-why-tier__bar,
.kelo-js [data-reveal] .kelo-why-life__span { width: 0; }

.kelo-js [data-reveal].is-in .kelo-why-tier__bar,
.kelo-js [data-reveal].is-in .kelo-why-life__span {
    width: var(--w);
    transition: width 1400ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 1) * 160ms);
}

.kelo-js [data-reveal] .kelo-why-flow__step,
.kelo-js [data-reveal] .kelo-why-road__item {
    opacity: 0;
    transform: translateY(8px);
}

.kelo-js [data-reveal].is-in .kelo-why-flow__step,
.kelo-js [data-reveal].is-in .kelo-why-road__item {
    opacity: 1;
    transform: none;
    transition: opacity 700ms ease, transform 700ms ease;
    transition-delay: calc(var(--i, 1) * 170ms);
}

@media (prefers-reduced-motion: reduce) {
    .kelo-js [data-reveal] .kelo-why-tier__bar,
    .kelo-js [data-reveal] .kelo-why-life__span { width: var(--w); }

    .kelo-js [data-reveal] .kelo-why-flow__step,
    .kelo-js [data-reveal] .kelo-why-road__item { opacity: 1; transform: none; }

    [data-reveal] * { transition: none !important; }
}

@media (max-width: 820px) {
    .kelo-why-compare,
    .kelo-why-flows,
    .kelo-why__story-grid,
    .kelo-why__roots { grid-template-columns: 1fr; }

    .kelo-why-tier { grid-template-columns: 1fr; gap: 0.3rem; }
    .kelo-why-tier__meta { text-align: left; }

    /* The label goes above its bar; thirteen rem of names beside a bar is most of a phone. */
    .kelo-why-life__row { grid-template-columns: 1fr; }
    .kelo-why-life__note { grid-column: 1; }
    .kelo-why-life__grid { left: 0; }
    .kelo-why-life__unit { margin-left: 0; }
}

/* The story block and the map beside it. */
.kelo-why__roots {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: calc(var(--gutter) * 1.5);
    align-items: center;
}