/* Feldoro — "The Instrument". Direction A, approved 2026-09-01.
 *
 * Every colour here was computed, not chosen by eye. The first draft put the
 * margin figure in green next to the brass brand accent; the accessibility
 * validator measured that pair at dE 14.5 for normal vision and 10.1 for a
 * deutan viewer — two nearly identical warm colours, one of them carrying the
 * single number the product exists to deliver. So green is gone, and BRASS
 * MEANS EXACTLY ONE THING: money you make. Filled brass appears once per
 * screen, on the margin. Re-run the dataviz palette validator before changing
 * any of these values.
 */

:root{
  --void:#090D0F; --panel:#0E1418; --raised:#131B20;
  --hair:rgba(232,240,242,.075); --rule:rgba(232,240,242,.13);
  --t1:#EEF3F4; --t2:#C3CDD1; --t3:#9AA9AF; --t4:#7C8B92;
  --brass-t:#D9BC6A; --brass:#C9A227; --brass-m:#B28B1E; --brass-deep:#6E5714;
  --loss-t:#D2735C; --loss-m:#B54530;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --serif:"Spectral",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:20px;
}

/* The long-form legal documents: read carefully, printed, and reviewed by
 * Paddle. Same system, inverted deliberately rather than naively — the brass
 * darkens to #8A6C15 so it clears 4.5:1 on paper-white (measured 4.53:1). */
.page-light{
  --void:#F4F5F3; --panel:#FFFFFF; --raised:#FFFFFF;
  --hair:rgba(12,18,20,.09); --rule:rgba(12,18,20,.16);
  --t1:#0E1315; --t2:#3B464A; --t3:#5C696E; --t4:#77848A;
  --brass-t:#7A5F12; --brass:#8A6C15; --brass-m:#A6821C; --brass-deep:#D8C68C;
  --loss-t:#9E3823; --loss-m:#9E3823;
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--void); color:var(--t1);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance}
a{color:inherit; text-decoration:none}
main a:not(.btn):not(.card-link){text-decoration:underline;
  text-decoration-color:var(--brass-deep); text-underline-offset:3px}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px}

/* Every figure on this site is tabular. Prices are compared down a column,
 * not read one at a time. */
.num,.lines,.ltab,.dtab td,.counters .v,.marginbox .v,.band-labels{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}

.wrap{max-width:1120px; margin:0 auto; padding:0 var(--gut)}
.label{font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--t4)}

/* ---------------- nav ---------------- */
.nav{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px var(--gut); border-bottom:1px solid var(--hair);
  max-width:1120px; margin:0 auto}
.wordmark{font-family:var(--serif); font-size:30px; font-weight:400;
  letter-spacing:.02em; color:var(--t1)}
.wordmark b{color:var(--brass-t); font-weight:400}
.nav-links{display:flex; align-items:center; gap:18px; margin-left:auto;
  font-size:13.5px; color:var(--t3); flex-wrap:wrap}
.nav-links a:hover{color:var(--t1)}
.nav-logout{display:inline; margin:0}
.nav-logout button{background:none; border:0; padding:0; font:inherit;
  font-size:13.5px; color:var(--t3); cursor:pointer}
.nav-logout button:hover{color:var(--t1)}

/* ---------------- buttons ----------------
 * Outlined by default. Filled brass is reserved for the margin figure, so the
 * primary action only fills where no margin competes with it. */
.btn{display:inline-block; font-size:13.5px; font-weight:600; padding:9px 16px;
  border:1px solid var(--brass); border-radius:2px; color:var(--brass-t);
  background:transparent; cursor:pointer; font-family:var(--sans);
  letter-spacing:.01em}
.btn:hover{background:rgba(201,162,39,.10)}
.btn-solid{background:var(--brass); border-color:var(--brass); color:#0B0F11}
.btn-solid:hover{background:var(--brass-t)}
.btn-lg{font-size:14.5px; padding:13px 22px}

/* ---------------- hero ---------------- */
.hero{display:grid; gap:34px; padding:44px var(--gut) 40px;
  max-width:1120px; margin:0 auto}
.hero .kicker{font-family:var(--mono); font-size:10.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--brass-t)}
.hero h1{font-family:var(--serif); font-weight:200; font-size:clamp(30px,6vw,50px);
  line-height:1.08; letter-spacing:-.02em; margin:16px 0 0}
.hero .sub{color:var(--t2); margin:18px 0 0; max-width:46ch; line-height:1.6}
.hero .acts{display:flex; align-items:center; gap:16px; margin-top:26px;
  flex-wrap:wrap}
.hero .acts small{font-size:12.5px; color:var(--t4)}

/* ---------------- deal panel ---------------- */
.panel{background:var(--panel); border:1px solid var(--hair); border-radius:3px;
  padding:20px}
.panel-head{display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; padding-bottom:13px; border-bottom:1px solid var(--hair)}
.panel-head .car{font-family:var(--serif); font-size:18px}
.panel-head .spec{font-family:var(--mono); font-size:12px; color:var(--t3)}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:13px 0 16px}
.chip{font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--t3); border:1px solid var(--rule);
  padding:3px 7px; border-radius:2px}
.chip-vouch{color:var(--brass-t); border-color:var(--brass-deep)}
/* An absence, not a loss — so it takes no colour of its own. The dashed
 * edge reads as "something is missing here" without spending brass or
 * the loss red, which both mean money on this site. */
.chip-nophoto{color:var(--t4); border-style:dashed}

/* The evidence panel: the SK cars the estimate was fitted on. Closed by
 * default — the table is dense already and this is for the reader who
 * wants to check the claim, not decoration for the one who doesn't. */
.cmp{margin-top:8px}
.cmp summary{font-family:var(--mono); font-size:11px; color:var(--t3);
  cursor:pointer; letter-spacing:.02em}
.cmp summary:hover{color:var(--t1)}
.cmp-note{font-size:11.5px; color:var(--t4); margin:8px 0 6px;
  max-width:60ch; line-height:1.5}
.cmp-tab{border-collapse:collapse; font-family:var(--mono);
  font-variant-numeric:tabular-nums; font-size:11.5px; margin-bottom:6px}
.cmp-tab th{text-align:left; font-weight:400; color:var(--t4);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 14px 4px 0}
.cmp-tab td{padding:2px 14px 2px 0; color:var(--t2)}
.cmp-tab td:last-child{color:var(--t1)}
.lines{display:grid; gap:7px; font-size:13px}
.lines > div{display:flex; justify-content:space-between; gap:14px}
.lines .k{color:var(--t3)}
.lines .v{color:var(--t1)}
.marginbox{margin-top:16px; padding-top:15px; border-top:1px solid var(--rule);
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px}
.marginbox .v{font-weight:500; font-size:32px; line-height:1;
  letter-spacing:-.03em; color:var(--brass-t)}
.marginbox .v.loss{color:var(--loss-t)}

/* ---------------- price-position band ----------------
 * One car, local axis, always labelled at both ends. The grey zone is the
 * spread across the Slovak comparables; the brass fill is the margin. */
.band{position:relative; height:26px; margin:18px 0 0}
.band .track{position:absolute; left:0; right:0; top:11px; height:4px;
  background:var(--hair); border-radius:2px}
.band .range{position:absolute; top:8px; height:10px;
  background:rgba(232,240,242,.08); border-radius:2px}
.page-light .band .range{background:rgba(12,18,20,.07)}
.band .fill{position:absolute; top:10px; height:6px; background:var(--brass-m);
  border-radius:3px}
.band .tick{position:absolute; top:4px; width:2px; height:18px;
  background:var(--t2); box-shadow:0 0 0 2px var(--panel); border-radius:1px}
.band-labels{display:flex; justify-content:space-between; gap:12px;
  font-size:10.5px; color:var(--t4); margin-top:3px}
.band-note{font-family:var(--mono); font-size:10.5px; color:var(--t4);
  margin:9px 0 0}

/* ---------------- counters ---------------- */
.counters{display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  max-width:1120px; margin:0 auto}
.counters > div{padding:18px var(--gut); border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair)}
.counters .v{font-size:25px; letter-spacing:-.022em; color:var(--t1)}
.counters .v.brass{color:var(--brass-t)}
/* Two lines reserved whether or not this label needs them. In the 2x2 phone
 * grid only "INZERÁTOV V DATABÁZE" wrapped, which made the second row taller
 * than the first and the four figures stop looking like one instrument. */
.counters .k{font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--t4); margin-top:6px; min-height:3.1em}

/* ---------------- ledger ---------------- */
.ledger{padding:44px var(--gut) 48px; border-top:1px solid var(--hair);
  max-width:1120px; margin:0 auto}
.ledger h2{font-family:var(--serif); font-weight:300; font-size:clamp(24px,4vw,30px);
  letter-spacing:-.015em}
.ledger .lede{color:var(--t3); font-size:14px; margin:10px 0 24px; max-width:56ch}
.ltab{width:100%; border-collapse:collapse; font-size:13px; max-width:620px}
.ltab td{padding:8px 0; border-bottom:1px solid var(--hair); color:var(--t2)}
/* padding-left, not just alignment: on a 375px screen the label runs the full
 * width of the cell and the figure ended up touching the last word of it. */
.ltab td:last-child{text-align:right; color:var(--t1); white-space:nowrap;
  padding-left:16px}
.ltab td.ind{padding-left:18px; color:var(--t3); font-size:12.5px}
.ltab tr.sum td{border-top:1px solid var(--rule); border-bottom:none;
  padding-top:12px; color:var(--t1); font-weight:500}
.ltab tr.mar td{border:none; padding-top:14px; font-size:15px;
  color:var(--brass-t); font-weight:500}
.ltab tr.mar td:first-child{font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--t4); font-weight:400}

/* ---------------- deals table ---------------- */
.section{padding:40px var(--gut) 48px; border-top:1px solid var(--hair);
  max-width:1120px; margin:0 auto}
.section > h1,.section > h2{font-family:var(--serif); font-weight:300;
  font-size:clamp(23px,4vw,28px); letter-spacing:-.014em}
.section .lede{color:var(--t3); font-size:14px; margin:8px 0 22px}
.sortbar{display:flex; gap:14px; flex-wrap:wrap; margin:0 0 18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t4)}
/* The selected sort is marked by colouring the underline it already has
 * (every link inside main carries one) rather than by adding a border. A
 * border sits at the bottom of the box, so it drifted away from the text the
 * moment the link grew a tap area; the text-decoration stays on the text.
 *
 * `nav.sortbar`, not `.sortbar`: the generic `main a:not(.btn):not(.card-link)`
 * rule already sets a decoration colour and matches at the same specificity,
 * so without the extra element the selected sort silently kept everyone
 * else's underline and was marked by text colour alone. */
nav.sortbar a[aria-current="true"]{color:var(--brass-t);
  text-decoration-color:var(--brass)}
.tablewrap{overflow-x:auto}
/* 700, not 720: at a 768px viewport the content box is 713px, so 720 made the
 * table overflow by seven pixels and clip the yield column. Measured — at 820
 * and above the table is naturally wider than either value, so this only ever
 * binds in the one band where it was doing harm. */
.dtab{width:100%; border-collapse:collapse; font-size:13px; min-width:700px}
.dtab thead th{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--t4); font-weight:400; text-align:right;
  padding:0 14px 10px; border-bottom:1px solid var(--rule)}
.dtab thead th:first-child{text-align:left; padding-left:0}
.dtab tbody td{padding:15px 14px; border-bottom:1px solid var(--hair);
  text-align:right; color:var(--t2); white-space:nowrap}
.dtab tbody td:first-child{text-align:left; padding-left:0; color:var(--t1);
  font-family:var(--sans); white-space:normal}
.dtab tbody tr:last-child td{border-bottom:none}
.dtab .car{font-family:var(--serif); font-size:16.5px; display:block}
.dtab .sub{display:block; font-family:var(--mono); font-size:10.5px;
  color:var(--t4); margin-top:5px; letter-spacing:.02em}
.dtab .mar{color:var(--brass-t); font-weight:500; font-size:14.5px}
.dtab .mar.loss{color:var(--loss-t)}

/* Yield bars share one 0-35% scale, so they ARE comparable down the column —
 * unlike the per-car band above, which is a local axis. */
.yield{display:flex; align-items:center; gap:9px; justify-content:flex-end}
.yield .bar{position:relative; width:72px; height:6px; background:var(--hair);
  border-radius:3px; overflow:hidden}
.yield .bar i{position:absolute; left:0; top:0; bottom:0; background:var(--brass-m);
  border-radius:0 3px 3px 0}
.yield .pct{min-width:48px; text-align:right; color:var(--t2)}
.note{color:var(--t4); font-size:12.5px; margin:16px 0 0}

/* ---------------- the deals table on a phone ----------------
 * Measured 2026-09-08 at 375px: 720px of table inside a 320px scroll box, so
 * the only visible column was the car. Landed cost, SK market, MARGIN and
 * yield all sat off-screen — the margin 263px past the right edge, on the
 * public landing page and the paid deals page alike. `.tablewrap` was doing
 * its job and the page never scrolled sideways; the TABLE did, and iOS and
 * Android draw overlay scrollbars that are invisible at rest, so a phone sees
 * a table that simply appears to stop after the car name.
 *
 * Below 640px each row becomes a card instead. The header row is gone, so
 * every figure carries its own `data-label` (set in the templates from the
 * same t() key as the column header, so it is translated, not hardcoded).
 * The breakpoint is measured, not picked: 375/414/480/560 hid the margin
 * outright, and 640-767 showed the margin but still clipped the yield. 768 is
 * the first width at which the whole table fits, so it is the first width at
 * which a table is honest. Below it, cards. */
@media (max-width:767px){
  .tablewrap{overflow-x:visible}
  .dtab{min-width:0; display:block}
  .dtab thead{display:none}
  .dtab tbody,.dtab tbody tr,.dtab tbody td{display:block}
  .dtab tbody tr{padding:18px 0; border-bottom:1px solid var(--hair)}
  .dtab tbody tr:last-child{border-bottom:none}
  .dtab tbody td{padding:0; border:0; text-align:left; white-space:normal}
  .dtab tbody td:first-child{padding-bottom:11px}
  .dtab tbody td[data-label]{display:flex; align-items:baseline; gap:14px;
    justify-content:space-between; padding:5px 0}
  .dtab tbody td[data-label]::before{content:attr(data-label); flex:none;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--t4)}
  /* On a card there is no column of brass figures to read down, so the one
     number the reader came for has to carry its own emphasis locally. */
  .dtab tbody td.mar{margin-top:6px; padding-top:11px;
    border-top:1px solid var(--rule); font-size:19px}
}

.filterbar { margin: 1.5rem 0 0.5rem; }
.filterbar fieldset {
  display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem 1rem;
  border: 1px solid var(--rule); border-radius: 2px; padding: 0.9rem 1rem;
}
.filterbar legend { font: inherit; color: var(--t3); padding: 0 0.4rem; }
.filterbar label { display: flex; flex-direction: column; gap: 0.3rem; }
.filterbar label span { font-size: 0.8rem; color: var(--t3); }
.filterbar select {
  font: inherit; color: var(--t1); background: var(--raised);
  border: 1px solid var(--rule); border-radius: 2px; padding: 0.4rem 0.5rem;
  min-width: 11rem;
}
.filterbar button {
  font: inherit; color: var(--t1); background: transparent;
  border: 1px solid var(--brass); border-radius: 2px;
  padding: 0.45rem 1.1rem; cursor: pointer;
}
.filterbar .clear { align-self: center; color: var(--t3); font-size: 0.85rem; }

@media (max-width: 560px) {
  .filterbar fieldset { flex-direction: column; align-items: stretch; }
  .filterbar select, .filterbar button { width: 100%; }
}

/* ---------------- pricing ---------------- */
.pricing{display:grid; gap:30px; padding:44px var(--gut) 48px;
  border-top:1px solid var(--hair); max-width:1120px; margin:0 auto}
.pricing h2{font-family:var(--serif); font-weight:300;
  font-size:clamp(24px,4vw,30px); letter-spacing:-.015em}
.pricing .amount{font-family:var(--mono); font-size:42px; letter-spacing:-.035em;
  margin:14px 0 4px; font-variant-numeric:tabular-nums}
.pricing .amount small{font-size:15px; color:var(--t3); letter-spacing:0}
.pricing ul{list-style:none; margin:0; padding:0; display:grid; gap:11px;
  font-size:13.5px; color:var(--t2)}
.pricing li{display:flex; gap:11px; align-items:baseline}
.pricing li::before{content:"—"; color:var(--brass); font-family:var(--mono);
  font-size:12px}

/* ---------------- forms ---------------- */
.form-page{max-width:420px; margin:0 auto; padding:48px var(--gut) 64px}
.form-page h1{font-family:var(--serif); font-weight:300; font-size:29px;
  letter-spacing:-.018em}
.form-page .lede{color:var(--t3); font-size:14px; margin:10px 0 26px}
.field{display:block; margin:0 0 16px}
.field span{display:block; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--t4);
  margin-bottom:6px}
.field input{width:100%; padding:11px 12px; font:inherit; font-size:15px;
  color:var(--t1); background:var(--panel); border:1px solid var(--rule);
  border-radius:2px}
.field input:focus{border-color:var(--brass-deep)}
.form-page .btn{width:100%; text-align:center; margin-top:6px}
.form-alt{color:var(--t3); font-size:13.5px; margin:20px 0 0}
.error{color:var(--loss-t); font-size:13.5px; margin:0 0 18px;
  border-left:2px solid var(--loss-m); padding-left:12px}

/* ---------------- account ---------------- */
.account{max-width:620px; margin:0 auto; padding:44px var(--gut) 64px}
.account h1{font-family:var(--serif); font-weight:300; font-size:30px;
  letter-spacing:-.018em}
/* Which account this is. Quiet — it answers a question rather than making a
 * claim — but an address can be long, so it wraps anywhere rather than
 * pushing the page sideways on a phone. */
.whoami{font-family:var(--mono); font-size:11.5px; color:var(--t3);
  margin:10px 0 0; overflow-wrap:anywhere}
.status{display:inline-block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brass-t);
  border:1px solid var(--brass-deep); border-radius:2px; padding:4px 9px;
  margin:14px 0 20px}
.account p{color:var(--t2); max-width:60ch}
.account ul{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px;
  font-size:13.5px}

/* ---------------- legal ---------------- */
.legal{max-width:760px; margin:0 auto; padding:48px var(--gut) 72px}
.legal h1{font-family:var(--serif); font-weight:300; font-size:34px;
  letter-spacing:-.02em; margin-bottom:6px}
.legal .updated{font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--t4); margin:0 0 30px}
.legal h2{font-family:var(--serif); font-weight:400; font-size:20px;
  margin:32px 0 10px}
.legal p,.legal li{color:var(--t2); max-width:68ch}
.legal ul{padding-left:20px; display:grid; gap:7px; margin:12px 0}
.legal .ltab{max-width:none}

/* ---------------- footer ---------------- */
.site-foot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:26px var(--gut) 34px; border-top:1px solid var(--hair);
  max-width:1120px; margin:0 auto;
  font-family:var(--mono); font-size:11px; color:var(--t4)}
.legal-links{display:flex; gap:16px; flex-wrap:wrap}
.site-foot a:hover{color:var(--t2)}
.lang-switch{color:var(--brass-t)}

/* ---------------- tap targets ----------------
 * Measured at 375px: nav links were 21px tall and the footer's legal links
 * 17px. WCAG 2.2 asks 24px, Apple asks 44px, and "Účet" was 28x21 — a link to
 * the page where a customer pays, smaller than a fingertip.
 *
 * The TEXT keeps its size; only the hit area grows around it, so the design
 * is unchanged and the rows just breathe more on a phone. `pointer:coarse`
 * catches a touchscreen at any width, which is where the problem actually
 * lives; the width query catches a narrow window on a mouse. Both containers
 * are already flex, so their children are flex items and take the vertical
 * padding — an inline <a> would have ignored it and measured the same 21px. */
@media (pointer:coarse),(max-width:767px){
  .nav-links{gap:2px 16px}
  .nav-links a{padding:12px 0}
  .nav-logout{display:flex}
  .nav-logout button{padding:12px 0}
  .legal-links{gap:0 18px}
  .legal-links a{padding:14px 0}
  /* The sort control is not prose, so the standard's inline-text-link
     exception does not cover it. It was 20px. */
  .sortbar{gap:2px 16px; align-items:center}
  .sortbar a{padding:12px 0}
}

@media (min-width:820px){
  :root{--gut:30px}
  .wordmark{font-size:36px}
  .hero{grid-template-columns:1.12fr .88fr; gap:46px; padding-top:58px;
    align-items:start}
  .counters{grid-template-columns:repeat(4,1fr)}
  .counters > div{border-bottom:none}
  .counters > div:last-child{border-right:none}
  .counters .v{font-size:27px}
  .pricing{grid-template-columns:1fr 1fr; align-items:center; gap:44px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}