/*
Theme Name: Kelo
Theme URI: https://keloerp.fi
Description: Kelo — suomalainen yritysohjelmisto. Teema Kelo-sivustolle: etusivu, hinnoittelu WooCommerce-tuotteista ja tavalliset sisältösivut. Ei emoteemaa eikä sivunrakentajaa.
Version: 1.11.9
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Author: Kelo
Text Domain: kelo
Tags: business, custom-colors, custom-menu, e-commerce, one-column, two-columns, translation-ready
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ---------------------------------------------------------------------------
   Kelo. The palette is the tree: ground, silver deadwood, pine, heartwood, ink.
   Every colour and measure is a custom property, so a change lands everywhere
   at once instead of being hunted through the file.
   --------------------------------------------------------------------------- */

:root {
  --ground: #F5F3EC;
  --paper: #FFFFFF;
  --paper-warm: #FBFAF7;
  --sand: #F2F0EA;
  --silver: #B4AB99;
  --pine: #2C5A4C;
  --pine-dark: #1E4235;
  --pine-pale: #9BC4B2;
  --pine-wash: #F2F8F5;
  --heartwood: #A8623A;
  --ink: #23241E;
  --body: #40443F;
  --soft: #6A6F68;
  --line: #DDD8CB;
  --line-soft: #EDEAE1;

  /* Two names apiece on purpose. Kelo Serif and Kelo Sans are the self-hosted pair; Fraunces and
     Source Sans 3 are the same faces under the names Google Fonts serves them by. Whichever of
     the two the site is set up for, the first name that resolves wins and the fallbacks below are
     only ever reached when neither loaded. */
  --serif: "Kelo Serif", Fraunces, Georgia, "Times New Roman", serif;
  --sans: "Kelo Sans", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --page: 1180px;
  --prose: 820px;
  --gutter: 24px;
}

/* ---------- reset ---------- */

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  background: var(--ground);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4, .kelo-brand__name, .kelo-plan__amount {
  /* Fraunces keeps its odd alternates — the curled j, the hooked 2 — on the WONK axis, and a
     softened cut on SOFT. Both pinned to 0. Harmless on a face that has neither axis. */
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-optical-sizing: auto;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 12px;
}

h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.02em; }
h2 { font-size: clamp(26px, 3.4vw, 36px); }
h3 { font-size: 20px; letter-spacing: -0.01em; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--pine-dark); }

.kelo-wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.kelo-prose { max-width: var(--prose); }
.kelo-muted { color: var(--soft); }
.kelo-small { font-size: 15px; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.skip-link:focus {
  position: fixed; left: 16px; top: 16px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 12px 18px; border-radius: var(--r);
}

:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }

/* ---------- buttons ---------- */

.kelo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.kelo-btn--primary { background: var(--pine); color: var(--paper-warm); }
.kelo-btn--primary:hover { background: var(--pine-dark); color: var(--paper-warm); }
.kelo-btn--ghost { background: transparent; color: var(--pine); border-color: var(--line); }
.kelo-btn--ghost:hover { background: var(--paper); border-color: var(--pine); color: var(--pine-dark); }
.kelo-btn--small { padding: 9px 16px; font-size: 15px; }
.kelo-btn--block { width: 100%; }
.kelo-btn[aria-disabled="true"] {
  background: var(--sand); color: var(--soft); border-color: var(--line); cursor: default; pointer-events: none;
}

/* ---------- top bar ---------- */

.kelo-top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(245, 243, 236, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.kelo-top__inner { display: flex; align-items: center; gap: 28px; min-height: 68px; }

.kelo-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.kelo-brand__mark { display: block; width: 30px; height: 30px; }
.kelo-brand__name { font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: -0.01em; }

.kelo-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.kelo-nav ul { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.kelo-nav a { color: var(--body); font-size: 16px; text-decoration: none; }
.kelo-nav a:hover, .kelo-nav .current-menu-item > a { color: var(--pine); }
/* ".kelo-nav a" outranks ".kelo-btn--primary" on specificity, so without this the download button's
   label inherited the menu's grey and sat almost invisibly on the green. */
.kelo-nav a.kelo-btn--primary,
.kelo-nav a.kelo-btn--primary:hover { color: var(--paper-warm); }

.kelo-langs { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--soft); }
.kelo-langs a { color: var(--soft); text-decoration: none; }
.kelo-langs a:hover { color: var(--pine); }
.kelo-langs [aria-current] { color: var(--ink); font-weight: 600; }

.kelo-top__toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 12px; font: inherit; font-size: 15px; color: var(--ink);
}

/* ---------- the basket in the top bar ---------- */
/* Hidden until it holds something: the markup is always there so that WooCommerce's fragment
   refresh has an element to replace, and the class is what makes it visible. */

.kelo-cart { position: relative; display: none; }
.kelo-cart--full { display: block; }

.kelo-cart__link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--paper-warm); font-size: 15px; font-weight: 600; line-height: 1;
  text-decoration: none; transition: border-color .15s, background .15s;
}
/* ".kelo-nav a" outranks a plain class here, the same way it does the download button. */
.kelo-nav a.kelo-cart__link, .kelo-nav a.kelo-cart__link:hover { color: var(--ink); }
.kelo-cart:hover .kelo-cart__link,
.kelo-cart:focus-within .kelo-cart__link { border-color: var(--pine); background: var(--paper); }
.kelo-cart__mark { flex: none; color: var(--pine); }

.kelo-cart__peek {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: 324px;
  padding: 16px 18px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 18px 40px rgba(35, 36, 30, .13);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s, transform .14s, visibility .14s;
}
/* The ten pixels between the pill and the panel are not part of either, so a mouse crossing them
   would drop the hover and the panel would shut under the pointer. This bridges the gap. */
.kelo-cart__peek::before { content: ""; position: absolute; inset: -11px 0 100% 0; }
.kelo-cart:hover .kelo-cart__peek,
.kelo-cart:focus-within .kelo-cart__peek { opacity: 1; visibility: visible; transform: none; }

/* Written against ".kelo-nav ul", which is the row of menu links and outranks a lone class. The
   basket's list lives inside the nav and would otherwise be laid out as a menu: side by side. */
.kelo-cart__peek ul.kelo-cart__lines {
  display: grid; align-items: initial; gap: 11px; margin: 0 0 13px; padding: 0; list-style: none;
}
.kelo-cart__peek .kelo-cart__lines li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 15px;
}
.kelo-cart__what { color: var(--ink); font-weight: 600; }
.kelo-cart__which { display: block; font-size: 13px; font-weight: 400; color: var(--soft); }
.kelo-cart__which p { margin: 0; }
.kelo-cart__each { color: var(--body); white-space: nowrap; }

.kelo-cart__total {
  display: flex; justify-content: space-between; gap: 14px;
  margin: 0 0 13px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 15px; color: var(--soft);
}
.kelo-cart__total strong { color: var(--ink); font-size: 17px; }
.kelo-nav a.kelo-cart__all {
  display: block; margin-top: 11px; text-align: center; font-size: 14px; color: var(--soft);
}
.kelo-nav a.kelo-cart__all:hover { color: var(--pine); }

/* ---------- the black flash on the cart and the checkout ----------
   WooCommerce's cart block always renders both states, the full basket and the empty one, and its
   script removes the wrong one once it runs. The empty one opens with a basket icon, and that icon
   is not an image: it is a 5em-tall box painted in the current text colour and then masked to the
   shape of a basket. The box has no width of its own, so it is as wide as the page, and the mask is
   an SVG the browser decodes separately from the stylesheet.

   Between the stylesheet arriving and either the mask decoding or the script running, the box is
   painted plain: a near-black band across the whole page for a frame or two, on these two pages and
   nowhere else. Neither a width nor a paler colour costs anything once the mask lands, and together
   they turn that frame into a pale square nobody notices. */

.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  width: 5em;
  color: var(--silver);
}

/* A screenshot links to its full-size self, for the lightbox. The link must not colour or
   underline the picture, and the cursor should say there is more to see. */
.kelo-shotfig__zoom { display: block; cursor: zoom-in; border: 0; text-decoration: none; }
.kelo-shotfig__zoom img { display: block; }

/* ---------- sections ---------- */

.kelo-section { padding: 76px 0; }
.kelo-section--tight { padding: 52px 0; }
.kelo-section--paper { background: var(--paper); border-block: 1px solid var(--line); }
.kelo-section__head { max-width: 740px; margin-bottom: 36px; }
.kelo-section__head p { color: var(--soft); font-size: 18px; margin: 0; }

.kelo-eyebrow {
  display: inline-block; margin: 0 0 14px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--heartwood);
}

/* ---------- hero ---------- */

.kelo-hero { padding: 72px 0 84px; }
.kelo-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.kelo-hero h1 { margin-bottom: 18px; }
.kelo-hero__lead { font-size: 20px; color: var(--body); max-width: 33em; }
.kelo-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 16px; }
.kelo-hero__note { font-size: 15px; color: var(--soft); margin: 0; }

/* the little program window in the hero */
.kelo-shot { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.kelo-shot__bar {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px;
  background: var(--sand); border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--soft);
}
.kelo-shot__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.kelo-shot__tools { display: flex; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line-soft); }
.kelo-shot__tool { font-size: 13px; color: var(--body); background: var(--paper-warm); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 5px 11px; }
.kelo-shot__table { display: grid; grid-template-columns: 62px 1fr 92px 96px 92px; font-size: 14px; }
.kelo-shot__table > div { padding: 11px 13px; border-bottom: 1px solid var(--line-soft); }
.kelo-shot__table > div.is-head { background: var(--paper-warm); color: var(--soft); font-size: 13px; font-weight: 600; }
.kelo-shot__table > div.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.kelo-state { font-size: 13px; border-radius: var(--r-pill); padding: 3px 10px; display: inline-block; }
.kelo-state--sent { background: var(--sand); color: var(--body); }
.kelo-state--paid { background: var(--pine-wash); color: var(--pine); }
.kelo-state--late { background: #FBECEC; color: #A11F1F; }
.kelo-shot__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; background: var(--paper-warm); }
.kelo-shot__foot strong { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.kelo-shot__foot span { font-size: 13px; color: var(--soft); }
.kelo-barcode { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.kelo-barcode i { display: block; width: 3px; background: var(--ink); border-radius: 1px; }

/* ---------- trust strip ---------- */

.kelo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.kelo-strip h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.kelo-strip p { font-size: 16px; color: var(--soft); margin: 0; }

/* ---------- cards ---------- */

.kelo-cards { display: grid; gap: 22px; }
.kelo-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kelo-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kelo-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.kelo-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 26px 28px; display: flex; flex-direction: column;
}
.kelo-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.kelo-card__top h3 { margin: 0; }
.kelo-card p { color: var(--body); }
.kelo-card ul { margin: 14px 0 0; padding: 0; list-style: none; }
.kelo-card li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 16px; color: var(--body); }
.kelo-card li::before {
  content: ""; position: absolute; left: 4px; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--pine-pale);
}

.kelo-tag { font-size: 13px; font-weight: 600; border-radius: var(--r-pill); padding: 4px 11px; white-space: nowrap; }
.kelo-tag--now { background: var(--pine-wash); color: var(--pine); }
.kelo-tag--soon { background: var(--sand); color: var(--soft); }
.kelo-tag--best { background: var(--heartwood); color: var(--paper); }

/* ---------- numbered reasons ---------- */

.kelo-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.kelo-reason__no {
  width: 34px; height: 34px; border-radius: 50%; background: var(--pine); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 17px; margin-bottom: 12px;
}
.kelo-reason h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.kelo-reason p { font-size: 16px; color: var(--soft); margin: 0; }

/* ---------- call to action band ---------- */

.kelo-band {
  background: var(--ink); color: #E8E7E0; border-radius: var(--r-lg);
  padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.kelo-band h2 { color: var(--paper); margin-bottom: 6px; }
.kelo-band p { color: #B9BBB4; margin: 0; }
.kelo-band .kelo-btn--primary { background: var(--pine-pale); color: var(--ink); }
.kelo-band .kelo-btn--primary:hover { background: var(--paper); color: var(--ink); }

/* ---------- questions ---------- */

.kelo-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; }
.kelo-qa h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.kelo-qa p { font-size: 16px; color: var(--soft); margin: 0; }

/* ---------- pricing ---------- */

.kelo-periods {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.kelo-periods button {
  border: 0; background: transparent; border-radius: var(--r-pill);
  padding: 9px 18px; font: inherit; font-size: 15px; font-weight: 600; color: var(--soft); cursor: pointer;
}
.kelo-periods button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(35, 36, 30, .08); }
.kelo-periods small { font-weight: 400; color: var(--heartwood); margin-left: 6px; }

.kelo-plan { position: relative; }
.kelo-plan--best { border-color: var(--pine); }
.kelo-plan__pitch { color: var(--soft); font-size: 16px; min-height: 3em; }
.kelo-plan__price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 4px; }
.kelo-plan__amount { font-family: var(--serif); font-size: 40px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.kelo-plan__per { font-size: 16px; color: var(--soft); }
.kelo-plan__total { font-size: 14px; color: var(--soft); margin: 0 0 18px; min-height: 1.6em; }
.kelo-plan ul { flex: 1; }
.kelo-plan .kelo-btn { margin-top: 20px; }

.kelo-compare { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.kelo-compare th, .kelo-compare td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
.kelo-compare th { font-family: var(--sans); font-weight: 600; color: var(--ink); background: var(--paper-warm); }
.kelo-compare tbody th, .kelo-compare td:first-child { text-align: left; }
.kelo-compare tbody th { background: var(--paper); color: var(--body); font-weight: 400; }
.kelo-compare tr:last-child th, .kelo-compare tr:last-child td { border-bottom: 0; }
.kelo-compare__scroll { overflow-x: auto; }

/* ---------- ordinary pages (terms, privacy, posts) ---------- */

.kelo-sheet {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 56px 64px; max-width: 900px; margin: 0 auto;
}
.kelo-sheet h1 { margin-bottom: 8px; }
.kelo-sheet h2 { font-size: 25px; margin: 34px 0 8px; }
.kelo-sheet h3 { margin: 24px 0 6px; }
.kelo-sheet p, .kelo-sheet li { color: #2C2F2C; }
.kelo-sheet ul, .kelo-sheet ol { padding-left: 22px; margin: 0 0 16px; }
.kelo-sheet li { margin-bottom: 6px; }
.kelo-sheet__meta { color: var(--soft); font-size: 16px; margin-bottom: 0; }
.kelo-sheet__back { display: inline-block; margin-bottom: 14px; font-size: 16px; text-decoration: none; }

.kelo-notice {
  padding: 14px 18px; border-radius: var(--r); font-size: 15px;
  background: #FDF6E3; border: 1px solid #E5D9B6; color: #5A4416; margin-bottom: 26px;
}
.kelo-callout {
  padding: 20px 24px; border-radius: var(--r-lg);
  background: var(--pine-wash); border: 1px solid #C7E2D6; margin: 0 0 26px;
}
.kelo-callout h2 { margin-top: 0; font-size: 24px; }

/* ---------- footer ---------- */

.kelo-foot { background: var(--ink); color: #B9BBB4; padding: 56px 0 34px; margin-top: 76px; }
.kelo-foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; }
.kelo-foot__brand { display: flex; align-items: center; gap: 10px; color: var(--paper); margin-bottom: 14px; }
.kelo-foot__brand .kelo-brand__name { color: var(--paper); }
.kelo-foot p { font-size: 15px; margin: 0 0 4px; }
.kelo-foot h2 { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8B8E86; margin-bottom: 12px; }
.kelo-foot ul { margin: 0; padding: 0; list-style: none; }
.kelo-foot li { margin-bottom: 8px; }
.kelo-foot a { color: #D6D7D1; text-decoration: none; font-size: 15px; }
.kelo-foot a:hover { color: var(--paper); text-decoration: underline; }
.kelo-foot__legal {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid #3A3B34;
  display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; color: #8B8E86;
}

/* ---------- WooCommerce ---------- */

.woocommerce-page .kelo-sheet { padding: 40px 44px; max-width: var(--page); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--serif); font-size: 20px; }
.woocommerce .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce input.button {
  background: var(--pine); color: var(--paper); border-radius: var(--r-pill);
  padding: 12px 22px; font-weight: 600; line-height: 1;
}
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--pine-dark); color: var(--paper); }
.woocommerce .button.alt, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--pine); color: var(--paper); }
.woocommerce .button.alt:hover { background: var(--pine-dark); }
.woocommerce div.product .price, .woocommerce ul.products li.product .price { color: var(--ink); font-family: var(--serif); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--pine); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--pine); }
.woocommerce table.shop_table { border-radius: var(--r-lg); }

/* the licence key on an order line deserves to be readable and copyable */
.woocommerce td .wc-item-meta li p, .woocommerce .wc-item-meta-value { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ---------- kelo grain ----------
   assets/kelo-grain.jpg is drawn by assets/make-grain.py, not photographed: no licence, no stock
   library, and one file of about 150 kB for the whole site. It sits behind the hero, the call to
   action and the footer at an opacity chosen by comparing the blends against real text, and it is
   decoration only — remove the file and every one of these rules simply does nothing. */

.kelo-hero, .kelo-band, .kelo-foot { position: relative; isolation: isolate; }

.kelo-hero::before, .kelo-band::before, .kelo-foot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(assets/kelo-grain.jpg) center / cover no-repeat;
}

/* Multiply darkens the grain into a light ground; soft-light lifts it out of a dark one. */
/* Lighter behind the headline than elsewhere: this is the one place where the texture
   competes with the largest type on the site. */
.kelo-hero::before { mix-blend-mode: multiply; opacity: .12; }
.kelo-band::before { mix-blend-mode: soft-light; opacity: .30; border-radius: var(--r-lg); }
.kelo-foot::before { mix-blend-mode: soft-light; opacity: .30; }

/* Texture behind text is the first thing to drop when someone needs the contrast. */
@media (prefers-contrast: more) {
  .kelo-hero::before, .kelo-band::before, .kelo-foot::before { display: none; }
}

/* ---------- product page ---------- */

/* The real <select> still runs the form; it is moved out of sight, not removed, so the page keeps
   working for a keyboard, a screen reader and a browser with JavaScript off. */
.kelo-choices__select {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.kelo-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }

.kelo-choice {
  border: 1px solid var(--line); background: var(--paper); border-radius: var(--r-pill);
  padding: 11px 22px; font: inherit; font-size: 16px; font-weight: 600; color: var(--body);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.kelo-choice:hover { border-color: var(--pine); color: var(--pine); }
.kelo-choice[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: var(--paper-warm); }
.kelo-choice:disabled { opacity: .4; cursor: not-allowed; }

.woocommerce div.product form.cart .variations { margin-bottom: 18px; }
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { display: block; padding: 0; border: 0; }
.woocommerce div.product form.cart .variations label {
  font-weight: 600; color: var(--ink); margin-bottom: 4px; display: block;
}
/* "Poista" clears the chosen period back to nothing. A period is always preselected here, so the
   link only offers a worse state than the one the visitor is already in. */
.woocommerce div.product form.cart .reset_variations { display: none; }

/* The quantity box, wrapped by the theme so it can go without touching WooCommerce's template. */
.woocommerce div.product form.cart .kelo-quantity { display: none; }

.woocommerce div.product .woocommerce-variation-price .price {
  font-family: var(--serif); font-size: 30px; color: var(--ink);
}

/* WooCommerce floats the gallery and the summary. Without clearing them, everything hooked in
   after the summary starts its first line in the gap beside the image and only then drops below —
   which is exactly what made the description look misaligned. */
.woocommerce div.product .kelo-product-desc,
.woocommerce div.product .related,
.woocommerce div.product .up-sells { clear: both; }

.woocommerce div.product .woocommerce-product-gallery { width: 46%; margin-bottom: 0; }
.woocommerce div.product .summary { width: 50%; margin-bottom: 0; }
.woocommerce div.product .summary .product_title { margin-top: 0; }

/* Some plugins print a bare brand or vendor line next to the title. There is one brand here and
   it is in the logo, so it is not repeated beside the product name. */
.woocommerce div.product [itemprop="brand"],
.woocommerce div.product .product_brand,
.woocommerce div.product .wc-brand,
.woocommerce div.product .posted_in { display: none; }

.kelo-product-desc {
  max-width: var(--prose); margin: 48px auto 0; padding-top: 32px; border-top: 1px solid var(--line);
}
.kelo-product-desc h2, .kelo-product-desc h3 { margin-top: 28px; }
.kelo-product-desc p { color: #2C2F2C; }
.kelo-product-desc ul { padding-left: 22px; }
.kelo-product-desc li { margin-bottom: 6px; }


/* ---------- module and guide pages ---------- */

.kelo-hero--module, .kelo-hero--narrow { padding: 56px 0 64px; }
.kelo-hero--narrow .kelo-hero__lead { max-width: var(--prose); }
.kelo-hero--module h1 { margin-bottom: 14px; }
.kelo-hero__module { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 8px; }
.kelo-hero__module p { color: var(--body); }
.kelo-eyebrow a { color: inherit; text-decoration: none; }
.kelo-eyebrow a:hover { text-decoration: underline; }
.kelo-eyebrow span { margin: 0 6px; opacity: .5; }

.kelo-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kelo-strip--4 h3 { font-family: var(--serif); font-size: 28px; margin-bottom: 2px; }

/* a screenshot, real or still a placeholder */
.kelo-shotfig { margin: 0; }
.kelo-shotfig img {
  display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper);
}
.kelo-shotfig figcaption { margin-top: 10px; font-size: 15px; color: var(--soft); }
.kelo-shotfig--hero img { box-shadow: 0 18px 40px -28px rgba(35, 36, 30, .45); }
/* The hint only ever renders for someone who can upload files, so visitors never see it. */
.kelo-shotfig__hint {
  display: block; margin-top: 8px; font-size: 13px; color: var(--heartwood);
}
.kelo-shotfig__hint code { background: var(--sand); border-radius: var(--r-sm); padding: 1px 5px; }

/* alternating feature rows */
.kelo-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px; align-items: center; padding: 44px 0; border-top: 1px solid var(--line-soft);
}
.kelo-feature:first-of-type { border-top: 0; padding-top: 8px; }
.kelo-feature--flip .kelo-feature__text { order: 2; }
/* a row with no picture yet: the text takes a readable measure instead of half the grid */
.kelo-feature--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.kelo-feature--solo.kelo-feature--flip .kelo-feature__text { order: 0; }
.kelo-feature h3 { font-size: 26px; margin-bottom: 10px; }
.kelo-feature p { color: var(--body); }

.kelo-ticks { margin: 16px 0 0; padding: 0; list-style: none; }
.kelo-ticks li { position: relative; padding-left: 26px; margin-bottom: 9px; color: var(--body); }
.kelo-ticks li::before {
  content: ""; position: absolute; left: 3px; top: 9px; width: 9px; height: 5px;
  border-left: 2px solid var(--pine); border-bottom: 2px solid var(--pine); transform: rotate(-45deg);
}

/* the payment slip explained */
.kelo-slip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.kelo-slip__list { display: grid; gap: 22px; }
.kelo-slip__item { padding-left: 20px; border-left: 3px solid var(--pine-pale); }
.kelo-slip__item h3 { font-family: var(--sans); font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.kelo-slip__item p { color: var(--soft); font-size: 16px; margin: 0; }

/* the everything-included grid */
.kelo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.kelo-grid__item { background: var(--paper); padding: 26px 24px; }
.kelo-grid__item h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.kelo-grid__item p { font-size: 16px; color: var(--soft); margin: 0; }

.kelo-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.kelo-qa--single { grid-template-columns: 1fr; gap: 20px; }

.kelo-facts { width: 100%; border-collapse: collapse; font-size: 16px; }
.kelo-facts th, .kelo-facts td { padding: 12px 0; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.kelo-facts th { font-weight: 400; color: var(--soft); width: 45%; }
.kelo-facts td { color: var(--ink); }
.kelo-facts code { background: var(--sand); border-radius: var(--r-sm); padding: 1px 6px; font-size: 15px; }

.kelo-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kelo-btn--onDark { color: #D6D7D1; border-color: #4A4B43; }
.kelo-btn--onDark:hover { background: transparent; border-color: var(--pine-pale); color: var(--paper); }

/* ---------- tietopankki ---------- */

/* Deliberately not the numbered look of a guide card: a numbered card promises step 1 of 5, and
   these are not steps. Same frame, quieter — a title you read and a line that says why. */
.kelo-readcard h3 { font-size: 19px; margin-bottom: 8px; }
.kelo-readcard h3 a { color: var(--ink); text-decoration: none; }
.kelo-readcard h3 a:hover { color: var(--pine); }
.kelo-readcard p { font-size: 16px; color: var(--soft); flex: 1; margin: 0; }
.kelo-readcard__link { margin-top: 16px; font-size: 16px; font-weight: 600; text-decoration: none; }

.kelo-section__more { margin-top: 24px; font-weight: 600; }
.kelo-section__more a { text-decoration: none; }
.kelo-section__more a:hover { text-decoration: underline; }

.kelo-tietopankki__lead { max-width: var(--prose); margin-top: 10px; }
.kelo-tietopankki__lead p:first-child { font-size: 19px; color: var(--soft); }

/* ---------- help centre ---------- */

.kelo-guidecard { position: relative; }
.kelo-guidecard__no {
  font-family: var(--serif); font-size: 15px; color: var(--silver); letter-spacing: 0.04em;
  display: block; margin-bottom: 8px;
}
.kelo-guidecard h3 { font-size: 19px; margin-bottom: 8px; }
.kelo-guidecard h3 a { color: var(--ink); text-decoration: none; }
.kelo-guidecard h3 a:hover { color: var(--pine); }
.kelo-guidecard p { font-size: 16px; color: var(--soft); flex: 1; }
.kelo-guidecard__link { margin-top: 14px; font-size: 16px; font-weight: 600; text-decoration: none; }

.kelo-guide__lead { font-size: 19px; color: var(--soft); margin-bottom: 8px; }

/* Steps number themselves: insert one in the editor and the rest follow. */
.kelo-guide__body { counter-reset: kelo-step; }
.kelo-guide__body h2 {
  counter-increment: kelo-step; position: relative;
  font-size: 23px; margin: 40px 0 10px; padding-top: 26px; border-top: 1px solid var(--line-soft);
}
.kelo-guide__body h2::before {
  content: counter(kelo-step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-right: 12px; vertical-align: 2px;
  background: var(--pine); color: var(--paper-warm); border-radius: 50%;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
}
.kelo-guide__body h2:first-child { border-top: 0; padding-top: 0; margin-top: 18px; }
.kelo-guide__body h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin: 22px 0 6px; }
.kelo-guide__body .kelo-shotfig { margin: 18px 0 6px; }
.kelo-guide__body ul, .kelo-guide__body ol { padding-left: 22px; }
.kelo-guide__body li { margin-bottom: 7px; }
.kelo-guide__body code { background: var(--sand); border-radius: var(--r-sm); padding: 1px 6px; font-size: 15px; }
.kelo-guide__updated { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

.kelo-guidenav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; margin: 22px auto 0; }
.kelo-guidenav__item {
  display: block; padding: 18px 22px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); text-decoration: none;
}
.kelo-guidenav__item:hover { border-color: var(--pine); }
.kelo-guidenav__item span { display: block; font-size: 14px; color: var(--soft); margin-bottom: 2px; }
.kelo-guidenav__item strong { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); }
.kelo-guidenav__item--next { text-align: right; }

/* anything typed into one of these pages in WordPress */
.kelo-editable h2 { margin-top: 28px; }

@media (max-width: 1040px) {
  .kelo-hero__module, .kelo-feature, .kelo-slip, .kelo-two { grid-template-columns: 1fr; gap: 32px; }
  .kelo-feature--flip .kelo-feature__text { order: 0; }
  .kelo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kelo-strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .kelo-grid { grid-template-columns: 1fr; }
  .kelo-strip--4 { grid-template-columns: 1fr; }
  .kelo-guidenav { grid-template-columns: 1fr; }
  .kelo-guidenav__item--next { text-align: left; }
}

/* ---------- narrow screens ---------- */

@media (max-width: 1040px) {
  .kelo-hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .kelo-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .kelo-top__toggle { display: block; }
  .kelo-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 18px var(--gutter) 22px;
  }
  .kelo-nav.is-open { display: flex; }
  .kelo-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .kelo-nav a { display: block; padding: 8px 0; font-size: 18px; }
  .kelo-top .kelo-btn { display: none; }
  /* No hovering on a touch screen, and no room for a panel either: in the opened menu the basket
     is a line like the others, and a tap goes to the cart page. */
  .kelo-cart--full { display: block; margin-top: 12px; }
  .kelo-cart__peek { display: none; }
  .kelo-nav .kelo-btn { display: inline-flex; margin-top: 10px; }

  .kelo-section { padding: 52px 0; }
  .kelo-strip, .kelo-reasons, .kelo-qa, .kelo-cards--2, .kelo-cards--3, .kelo-cards--4 { grid-template-columns: 1fr; }
  .kelo-band { flex-direction: column; align-items: flex-start; padding: 28px 26px; }
  .kelo-foot__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .kelo-sheet { padding: 32px 24px; }
  .kelo-shot__table { grid-template-columns: 52px 1fr 88px 80px; }
  .kelo-shot__table > div:nth-child(5n) { display: none; }
}

@media (max-width: 520px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .kelo-foot__grid { grid-template-columns: 1fr; }
  .kelo-periods { display: flex; width: 100%; }
  .kelo-periods button { flex: 1; padding: 9px 6px; }
}

@media print {
  .kelo-top, .kelo-foot, .kelo-btn, .kelo-notice { display: none !important; }
  body { background: #fff; }
  .kelo-sheet { border: 0; padding: 0; max-width: none; }
}

/* ---- Download note ------------------------------------------------------
   The honest small print under a download button: what Windows will say
   while the installer is unsigned, and the checksum for anyone who would
   rather verify than trust. Quiet by design — it should reassure, not
   look like a warning banner. */

.kelo-download-note {
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    /* Half-strength paper and rule, so the box settles into the page instead of sitting on
       top of it. It sits under the download button, where the button is meant to be the thing
       the eye lands on -- a bordered panel of its own competes with that. The plain colours
       come first for a browser that does not know color-mix. */
    border: 1px solid rgba(221, 216, 203, 0.55);
    border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    border-radius: var(--r);
    background: rgba(251, 250, 247, 0.5);
    background: color-mix(in srgb, var(--paper-warm) 50%, transparent);
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--soft);
    max-width: 44rem;
}

/* The summary is the whole note until somebody asks for more, so it carries no weight of its
   own: one line, a mark that says there is an answer behind it, and no disclosure triangle,
   which browsers draw differently and none of them draw well. */
.kelo-download-note > summary {
  display: flex; align-items: center; gap: 9px;
  margin: -1rem -1.15rem; padding: 1rem 1.15rem;
  list-style: none; cursor: pointer; color: var(--soft);
}
.kelo-download-note > summary::-webkit-details-marker { display: none; }
.kelo-download-note > summary:hover { color: var(--pine); }
.kelo-download-note[open] > summary { margin-bottom: 0; }

.kelo-download-note__mark { display: inline-flex; flex: none; color: var(--soft); }
.kelo-download-note > summary:hover .kelo-download-note__mark { color: var(--pine); }
.kelo-download-note__line { font-weight: 500; }

.kelo-download-note__body { padding-top: 0.85rem; }

.kelo-download-note p { margin: 0 0 0.6rem; }
.kelo-download-note p:last-child { margin-bottom: 0; }
.kelo-download-note strong { color: var(--body); }

.kelo-download-note pre,
.kelo-download-note .kelo-hash {
    margin: 0 0 0.6rem;
    padding: 0.55rem 0.7rem;
    background: var(--sand);
    border-radius: var(--r-sm);
    overflow-x: auto;
}

.kelo-download-note code {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    font-size: 0.82em;
    color: var(--ink);
    word-break: break-all;
}

/* ---------- kassa ---------- */

/* The line under the pay button that says when the key arrives. Quiet, because it is
   reassurance rather than an instruction — somebody who is already pressing the button does not
   need to be stopped and told something. */
.kelo-checkout-promise {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--soft);
  text-align: center;
}

/* The consent boxes read as a group rather than as a list of unrelated ticks. */
.wc-block-checkout__additional-fields .wc-block-components-checkbox {
  margin-bottom: 10px;
}

/* ---------- Ohjekeskus: usein kysyttyä ----------
   Each question is a Details block: the question is the line, the answer opens under it. The
   browser's own disclosure triangle is replaced by one drawn at the end of the line, which turns
   when the answer is open, so a list of questions reads as a list and not as a tree. */
.kelo-faq .wp-block-details {
  border-bottom: 1px solid var(--line);
  padding: 0;
  margin: 0;
}
.kelo-faq .wp-block-details:first-of-type { border-top: 1px solid var(--line); }
.kelo-faq .wp-block-details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 1rem 0.25rem;
  list-style: none; cursor: pointer;
  font-weight: 600; color: var(--ink);
}
.kelo-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.kelo-faq .wp-block-details > summary::after {
  content: ""; flex: none;
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--soft);
  transition: transform 0.15s ease;
}
.kelo-faq .wp-block-details[open] > summary::after { transform: rotate(180deg); }
.kelo-faq .wp-block-details > summary:hover { color: var(--pine); }
.kelo-faq .wp-block-details > summary:hover::after { border-top-color: var(--pine); }
.kelo-faq .wp-block-details > :not(summary) { margin: 0 0.25rem 0.75rem; }
.kelo-faq .wp-block-details > :last-child { margin-bottom: 1.1rem; }
@media (prefers-reduced-motion: reduce) {
  .kelo-faq .wp-block-details > summary::after { transition: none; }
}

/* Tietopankki shelves: Laskutus and Kirjanpito */
.kelo-tietopankki__shelf { font-size: 24px; margin: 0 0 18px; }