/* seekor.eu — restrained European industrial B2B.
   Neutral base, one accent, generous whitespace, no decoration for its own sake. */

@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-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;
}

:root {
  --ink:      #14171a;
  --ink-2:    #3d454d;
  --ink-3:    #667079;
  --line:     #dfe3e7;
  --line-2:   #eef1f4;
  --bg:       #ffffff;
  --bg-2:     #f7f8fa;
  --accent:   #14563d;      /* single accent — dark industrial green */
  --accent-2: #0e3d2b;
  --accent-bg:#eaf1ee;
  --warn-bg:  #fff6e0;
  --warn-line:#e6c774;

  --wrap: 1120px;
  --measure: 68ch;
  --r: 3px;

  --font: 'Inter var', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
}

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

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

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff;
  padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
.site-head { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-head-in {
  display: flex; align-items: center; gap: 24px;
  min-height: 68px; flex-wrap: wrap;
}
.brand {
  font-weight: 660; font-size: 20px; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand span { color: var(--accent); }
/* Brand line. Footer only: the header nav row is already at capacity and
   .wrap is max-width capped, so a tagline there wraps at every viewport. */
.foot-tag {
  font-weight: 560; color: var(--ink); font-size: 17px;
  padding-inline-start: 14px; border-inline-start: 2px solid var(--accent);
}
.nav { display: flex; gap: 20px; flex-wrap: wrap; margin-inline-start: auto; align-items: center; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 480;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }
.nav .cta {
  background: var(--accent); color: #fff; padding: 9px 16px; border-radius: var(--r);
  border-bottom: 0; font-weight: 560;
}
.nav .cta:hover { background: var(--accent-2); color: #fff; border-bottom-color: transparent; }
.lang { display: flex; gap: 2px; align-items: center; font-size: 14px; }
.lang a {
  padding: 4px 8px; color: var(--ink-3); text-decoration: none; border-radius: var(--r);
  border-bottom: 0; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12.5px;
  font-weight: 560;
}
.lang a[aria-current='true'] { background: var(--bg-2); color: var(--ink); }

/* ---------- layout ---------- */
main { display: block; }
.section { padding-block: 64px; --surface: var(--bg); }
.section + .section { border-top: 1px solid var(--line-2); }
.section.tint { background: var(--bg-2); border-top: 1px solid var(--line); --surface: var(--bg-2); }

.hero { padding-block: 76px 64px; }
.hero h1 { margin-top: 0; }

h1, h2, h3, h4 { line-height: 1.22; letter-spacing: -0.021em; font-weight: 640; color: var(--ink); }
h1 { font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem); margin: 0 0 20px; max-width: 22ch; }
h2 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem); margin: 56px 0 16px; max-width: 34ch; }
h3 { font-size: 1.12rem; margin: 32px 0 10px; font-weight: 620; }
h2:first-child, h3:first-child { margin-top: 0; }

p, ul, ol { max-width: var(--measure); }
p { margin: 0 0 18px; }
ul, ol { margin: 0 0 18px; padding-inline-start: 22px; }
li { margin-bottom: 8px; }
li::marker { color: var(--ink-3); }

.lead {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.2rem);
  color: var(--ink-2); line-height: 1.58; max-width: 62ch;
}
/* The standalone answer at the top of every guide. Styled so a reader — and a
   crawler — can see where the direct answer ends. */
.answer {
  font-size: 1.12rem; line-height: 1.6; color: var(--ink);
  border-inline-start: 3px solid var(--accent); padding: 2px 0 2px 20px;
  margin: 0 0 32px; max-width: 64ch;
}
.eyebrow {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-3); font-weight: 620; margin: 0 0 14px;
}

/* ---------- tables ---------- */
/* Tables are min-width 460px, so on a phone they scroll inside this box. A
   plain overflow container gives no sign of that: sentences simply stop at the
   right edge mid-word and readers do not know to swipe. These four background
   layers are the standard CSS-only cue — the two `local` layers are pinned to
   the content and slide away as you scroll, uncovering the two `scroll` layers
   that are pinned to the box. The shade therefore appears only on the side
   that has more table, and vanishes at each end. No JS, in keeping with the
   rest of the site. --surface keeps the cover matched to the section behind. */
.table-wrap {
  overflow-x: auto; margin: 0 0 26px; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--surface, var(--bg)) 40%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left,  var(--surface, var(--bg)) 40%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(20, 23, 26, .26), rgba(20, 23, 26, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(20, 23, 26, .26), rgba(20, 23, 26, 0)) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 19px 100%, 19px 100%;
  background-attachment: local, local, scroll, scroll;
}
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15.5px; }
caption {
  text-align: start; font-size: 14px; color: var(--ink-3); padding-bottom: 10px;
  caption-side: top;
}
th, td {
  text-align: start; vertical-align: top; padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
thead th {
  font-weight: 620; font-size: 13.5px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
}
tbody th { font-weight: 560; color: var(--ink); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
table.facts tbody th { width: 34%; color: var(--ink-3); font-weight: 520; }

/* ---------- components ---------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  border: 1px solid var(--line); border-radius: var(--r); padding: 26px;
  background: var(--bg);
}
/* Storefront screenshot at the top of a card. Pulled out to the card edge and
   cropped to one ratio so three cards of different source images still line up.
   object-position: top keeps the shop header and category copy in frame, which
   is the part that proves the store is real and in Estonian. */
.card-shot {
  /* max-width: none defeats the global img cap, which otherwise clamps this to
     the card's content box and leaves a 54px gap at the right edge. */
  display: block; width: calc(100% + 52px); max-width: none; margin: -26px -26px 20px;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: top center;
  border-bottom: 1px solid var(--line);
  border-radius: var(--r) var(--r) 0 0;
}
.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card .meta {
  font-size: 14px; color: var(--ink-3); margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
}

/* The five arguments */
.args { counter-reset: arg; list-style: none; padding: 0; margin: 0; max-width: none; }
.args > li {
  counter-increment: arg; position: relative; padding-inline-start: 56px;
  margin-bottom: 34px; max-width: 72ch;
}
.args > li::before {
  content: counter(arg, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; top: 1px;
  font-size: 14px; font-weight: 660; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.args h3 { margin: 0 0 8px; }
.args p:last-child { margin-bottom: 0; }

/* Onboarding timeline */
ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; max-width: none; }
ol.steps > li {
  counter-increment: step; position: relative;
  padding-inline-start: 40px; padding-bottom: 34px;
  border-inline-start: 1px solid var(--line); margin-inline-start: 13px;
  max-width: 68ch;
}
ol.steps > li:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
ol.steps > li::before {
  content: counter(step);
  position: absolute; inset-inline-start: -13px; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 620;
}
ol.steps h3 { margin: 2px 0 4px; }
.steps-when {
  font-size: 13.5px; color: var(--ink-3); margin: 0 0 8px;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 560;
}

.faq { margin-top: 56px; }
.faq-item { border-top: 1px solid var(--line); padding-top: 20px; margin-bottom: 24px; }
.faq-item h3 { margin: 0 0 8px; }
.faq-item p:last-child { margin-bottom: 0; }

.note {
  background: var(--bg-2); border-inline-start: 3px solid var(--ink-3);
  padding: 16px 20px; margin: 0 0 26px; max-width: var(--measure);
  font-size: 15.5px; color: var(--ink-2);
}
.note p:last-child { margin-bottom: 0; }

.offer {
  border-top: 1px solid var(--line); padding-top: 22px; margin-top: 44px;
  color: var(--ink-2); font-size: 15.5px; max-width: var(--measure);
}

.needs-input {
  background: var(--warn-bg); border: 1px dashed var(--warn-line);
  padding: 1px 6px; border-radius: var(--r);
  font-size: 0.9em; color: #6b4c00; font-weight: 500;
}

.btn {
  display: inline-block; background: var(--accent); color: #fff;
  padding: 13px 24px; border-radius: var(--r); text-decoration: none;
  font-weight: 560; font-size: 16px; border: 1px solid var(--accent);
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-bg); color: var(--accent-2); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 28px 0 0; }

/* Person card */
.person { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.person img, .person .avatar {
  width: 108px; height: 108px; border-radius: var(--r); object-fit: cover;
  background: var(--bg-2); border: 1px solid var(--line); flex: none;
}
.person .avatar { display: grid; place-items: center; color: var(--ink-3); font-size: 12px;
  text-align: center; padding: 8px; line-height: 1.3; }
.person-body { flex: 1 1 260px; }
.person-body p { margin-bottom: 8px; }
.person dl { margin: 12px 0 0; font-size: 15.5px; }
.person dt { color: var(--ink-3); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.05em; margin-top: 10px; }
.person dd { margin: 2px 0 0; }

/* Screenshot figures */
figure { margin: 0 0 26px; }
figure img { border: 1px solid var(--line); border-radius: var(--r); }
figcaption { font-size: 14px; color: var(--ink-3); margin-top: 10px; }
.shot-placeholder {
  border: 1px dashed var(--line); border-radius: var(--r); background: var(--bg-2);
  aspect-ratio: 16 / 10; display: grid; place-items: center; text-align: center;
  color: var(--ink-3); font-size: 14px; padding: 24px;
}

/* On this page */
.toc {
  border: 1px solid var(--line); border-radius: var(--r); padding: 20px 24px;
  margin: 0 0 40px; background: var(--bg-2); max-width: var(--measure);
}
.toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); margin: 0 0 10px; font-weight: 620; }
.toc ol { margin: 0; padding-inline-start: 20px; font-size: 15.5px; }
.toc li { margin-bottom: 5px; }

.meta-line {
  font-size: 14px; color: var(--ink-3); margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.crumbs { font-size: 14px; color: var(--ink-3); padding-block: 18px 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; max-width: none; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: '/'; color: var(--line); margin-inline-end: 6px; }
.crumbs a { color: var(--ink-3); }

.siblings { margin-top: 52px; border-top: 1px solid var(--line); padding-top: 26px; }
.siblings h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); margin: 0 0 14px; font-weight: 620; }
.siblings ul { list-style: none; padding: 0; max-width: none; }
.siblings li { margin-bottom: 10px; }

/* Guide index */
.guide-list { list-style: none; padding: 0; max-width: none; }
.guide-list > li { border-top: 1px solid var(--line); padding: 22px 0; }
.guide-list h3 { margin: 0 0 6px; }
.guide-list p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

/* ---------- form ---------- */
.form { max-width: 640px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14.5px; font-weight: 560; margin-bottom: 6px; }
.field .hint { font-size: 13.5px; color: var(--ink-3); margin: 0 0 6px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); outline: 2px solid var(--accent-bg); outline-offset: 0;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--line); background: var(--bg-2);
  padding-block: 48px 36px; margin-top: 80px; font-size: 15px;
}
.foot-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.site-foot h2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); margin: 0 0 12px; font-weight: 620; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 8px; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--accent); text-decoration: underline; }
.site-foot address { font-style: normal; color: var(--ink-2); }
.foot-legal {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 14px;
}
.foot-legal p { max-width: none; margin: 0 0 4px; }

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .section { padding-block: 48px; }
  .hero { padding-block: 48px 40px; }
  .site-head-in { min-height: 0; padding-block: 12px; gap: 10px 12px; }
  /* The brand sat alone on row one and the language switcher alone on row
     three, so the header cost 261px — 31% of a 390px-wide first screen, with
     the h1 pushed to 343px. Pairing them on one row and tightening the nav
     gives that back to the content. */
  .brand { order: 1; }
  .lang { order: 2; margin-inline-start: auto; }
  .nav { order: 3; margin-inline-start: 0; width: 100%; gap: 12px 14px; font-size: 14.5px; }
  /* Six links fill two rows exactly, so the CTA lands on a third either way.
     Full width turns an orphaned button into the obvious primary action and a
     much larger tap target. A <details> disclosure would collapse this to one
     row, but CSS cannot reveal a closed <details>, so it would stay collapsed
     on desktop too — verified, not assumed. That needs JS, which this site
     does without. */
  .nav .cta { width: 100%; text-align: center; padding: 11px 16px; }
  .card-shot { width: calc(100% + 44px); margin: -22px -22px 18px; }
  .card { padding: 22px; }
  h2 { margin-top: 44px; }
}

@media print {
  .site-head, .site-foot, .toc, .nav { display: none; }
  body { font-size: 11pt; }
}

/* ---------- consent banner ----------
   Only rendered when a GA measurement id is configured. Fixed to the bottom so
   it never covers the page heading, and it is the last thing in the DOM so it
   does not interrupt reading order. */
.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: var(--bg); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 16px rgba(20, 23, 26, .07);
  padding: 18px 0;
}
.consent[hidden] { display: none; }
.consent-in {
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px;
  display: flex; gap: 24px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.consent h2 {
  font-size: 15px; margin: 0 0 4px; font-weight: 620; letter-spacing: 0;
}
.consent p {
  margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 72ch; line-height: 1.5;
}
.consent-actions { display: flex; gap: 10px; flex: none; }
.consent-actions .btn { padding: 10px 20px; font-size: 15px; cursor: pointer; }

@media (max-width: 720px) {
  .consent-in { flex-direction: column; align-items: stretch; gap: 14px; }
  .consent-actions .btn { flex: 1; text-align: center; }
}