/* === AlleProfit Home (graal-v2) === */

:root {
  --bone: #eae7de;
  --card: #f4f2ec;
  --graphite: #191c21;
  --grey: #4e545c;
  --brand: #ff5a00; /* AlleProfit brand color, used for CTAs */
  --brand-deep: #d64a00;
  --loss: #c11b2a; /* loss only */
  --profit: #1b7a4b; /* profit only */
  --hair: rgba(25, 28, 33, 0.16);
  --display: 'Chivo', system-ui, sans-serif;
  --mono: 'Red Hat Mono', ui-monospace, Menlo, monospace;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  background: var(--bone);
}
body {
  color: var(--graphite);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* canvas: always bone, even before WebGL boots or if it never does */
#yard {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bone);
  opacity: 0;
  transition: opacity 1.2s ease;
}
/* subtle photographic vignette over the yard: graphite corners, untouched
   centre. Canvas elements take no pseudo-elements, so it lives on body -
   painted above #yard (same z-index, later in paint order), below .content */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 120% 90% at 50% 42%,
    rgba(42, 46, 52, 0) 62%,
    rgba(42, 46, 52, 0.14) 100%
  );
}
.content {
  position: relative;
  z-index: 1;
}
.solid {
  background: var(--bone);
}

/* guaranteed-contrast panel for any copy that floats over the canvas */
.pane {
  background: rgba(234, 231, 222, 0.9);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid var(--hair);
  padding: 30px 26px;
}

/* ---------- nav ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(234, 231, 222, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hair);
}
nav .in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* top/bottom only: the shorthand `13px 0` used to zero out .shell's own
     24px side padding (same element, higher specificity), gluing the logo
     to the screen edge on every viewport narrower than the 1120px shell */
  padding-top: 13px;
  padding-bottom: 13px;
  gap: 12px;
}
.logo {
  display: flex;
  align-items: center;
  flex: none;
}
.logo img {
  display: block;
  height: 44px;
  width: auto;
}
@media (max-width: 939.98px) {
  /* breathing room next to the account button down to 320px: scale the
     tagline logo down instead of letting flex squeeze or overflow it */
  .logo img {
    height: auto;
    max-width: min(45vw, 168px);
  }
}
/* desktop nav, original layout: logo pinned left, the section links
   centered in the leftover space (flex: 1 + justify-center), and the
   .nav-right cluster (language switcher / login / CTA) pinned right */
nav .links {
  display: none;
  gap: 26px;
  font-size: 15px;
  color: var(--grey);
}
nav .links a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
nav .links a:hover {
  color: var(--graphite);
}
.nav-right {
  display: none;
}
.nav-login {
  color: var(--grey);
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
}
.nav-login:hover {
  color: var(--graphite);
}
@media (min-width: 940px) {
  nav .links {
    display: flex;
    flex: 1;
    justify-content: center;
  }
  .nav-right {
    display: flex;
    flex: none;
    align-items: center;
    gap: 18px;
  }
}
/* between the desktop threshold and the full 1120px shell the three nav
   groups tighten up so everything fits with slack down to 940px */
@media (min-width: 940px) and (max-width: 1119.98px) {
  nav .links {
    gap: 16px;
    font-size: 14px;
  }
  .logo img {
    height: 36px;
  }
  .nav-right {
    gap: 12px;
  }
}
/* mobile-first account controls: below 940px the nav shows one orange
   "Konto" trigger, at 940px+ the .nav-right cluster (with the classic
   register CTA) takes over.
   `nav .` prefixes keep these ahead of the later .btn/.btn-p rules. */
nav .nav-cta {
  padding: 11px 18px;
  font-size: 15px;
  white-space: nowrap;
}
nav .nav-account {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  font-size: 15px;
  white-space: nowrap;
}
nav .nav-account .chev {
  font-size: 11px;
  line-height: 1;
  transition: transform 0.22s ease;
}
nav .nav-account[aria-expanded='true'] .chev {
  transform: rotate(180deg);
}
/* fold-out under the sticky bar: closed by CSS default (no-JS safe: the
   trigger is then a plain register link), home.js toggles .open */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-top: 0;
  box-shadow: 0 18px 34px -20px rgba(25, 28, 33, 0.4);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    max-height 0.22s ease,
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s;
}
.nav-panel.open {
  max-height: 340px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-panel .btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 18px; /* with 1.6 line-height a 50px+ touch target */
  font-size: 15.5px;
}
.nav-panel-sep {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 2px 0;
}
.nav-panel .lang-switcher {
  align-self: center;
}
.nav-panel .lang-switcher button {
  padding: 12px 22px;
  font-size: 13px;
}
@media (min-width: 940px) {
  nav .nav-account,
  .nav-panel {
    display: none;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 26px;
  border: 2px solid var(--graphite);
  transition: 0.15s ease;
}
.btn-p {
  background: var(--brand);
  color: #1a0f05;
  border-color: var(--graphite);
}
.btn-p:hover {
  background: var(--graphite);
  color: var(--brand);
}
.btn-g {
  color: var(--graphite);
  font-weight: 500;
}
.btn-g:hover {
  background: var(--graphite);
  color: var(--bone);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.trustline {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grey);
}
.trustline span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trustline span::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--profit);
  border-radius: 50%;
  flex: 0 0 auto;
}

/* ---------- section heads ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--brand);
}
h2 {
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 18ch;
}
.lede {
  margin-top: 18px;
  max-width: 52ch;
  color: #33393f;
  font-size: 17px;
}

/* ---------- 1 · hero ---------- */
.hero {
  padding: 74px 0 120px;
  min-height: 88svh;
  display: flex;
  align-items: center;
}
.hero .pane {
  max-width: 640px;
}
h1 {
  font-weight: 900;
  font-size: clamp(2.5rem, 8vw, 4.7rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
}
h1 em {
  font-style: normal;
  color: var(--brand);
}
.hero .sub {
  margin-top: 22px;
  max-width: 42ch;
  font-size: clamp(1.02rem, 1.9vw, 1.2rem);
  line-height: 1.5;
  color: #2e343b;
}
/* ---------- 2 · the one order ---------- */
.order {
  padding: 88px 0;
}
.sheet {
  margin-top: 34px;
  background: var(--card);
  border: 1px solid var(--hair);
  max-width: 620px;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grey);
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(25, 28, 33, 0.08);
}
.row .lbl {
  font-size: 16px;
}
.row .lbl small {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--grey);
  margin-top: 3px;
}
.row .amt {
  font-family: var(--mono);
  font-size: 17px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.row.fee .amt {
  color: var(--loss);
}
.row.head .amt {
  font-weight: 500;
}
.row.res {
  background: var(--graphite);
  color: var(--bone);
  border: 0;
  padding: 20px 22px;
}
.row.res .lbl {
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.row.res .amt {
  font-family: var(--display);
  font-weight: 900;
  font-size: 26px;
  color: #ff6b6b;
  letter-spacing: -0.02em;
}
.reveal {
  opacity: 0;
}

.aside {
  margin-top: 22px;
  max-width: 620px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--grey);
  border-left: 2px solid var(--brand);
  padding-left: 16px;
}

/* ---------- 3 · calculator ---------- */
.calc {
  padding: 88px 0;
}
.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 34px;
  max-width: 900px;
}
@media (min-width: 840px) {
  .calc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
.fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 7px;
}
.field .wrap {
  display: flex;
  align-items: center;
  border: 2px solid var(--graphite);
  background: var(--card);
}
.field input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 14px 14px;
  font-family: var(--mono);
  font-size: 19px;
  color: var(--graphite);
  width: 100%;
}
.field input:focus {
  outline: none;
}
/* Exception to the rule above: the checkbox is the only field outside a
   `.wrap`, so the `:focus-within` border that compensates for the killed UA
   ring never reaches it and keyboard focus had no indicator at all.
   (0,3,1) beats `.field input:focus` (0,2,1) regardless of order. */
.field input[type='checkbox']:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* The calculator/scale fields are type="text" since the decimal-comma
   change (ALPR-94), so there are no native number spinners to hide - the
   old input[type='number'] spinner overrides are gone. */
.field .wrap:focus-within {
  border-color: var(--brand);
}
.field .unit {
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--grey);
}
/* featured-offer toggle (ALPR-97): a checkbox row in the fields column -
   the label keeps the mono uppercase field look, the box sits inline */
.field label.checkline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  cursor: pointer;
}
.checkline input[type='checkbox'] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

.seg {
  display: flex;
  border: 2px solid var(--graphite);
}
.seg button {
  flex: 1;
  padding: 12px 8px;
  background: var(--card);
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--grey);
  letter-spacing: 0.02em;
}
.seg button.on {
  background: var(--graphite);
  color: var(--bone);
}
.seg button + button {
  border-left: 2px solid var(--graphite);
}
.hintline {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
  line-height: 1.55;
  margin-top: -6px;
}

.result {
  background: var(--graphite);
  color: var(--bone);
  padding: 28px 26px;
  align-self: start;
  /* Grid item: without this the default min-width:auto lets a long number
     stretch the column and push the card past the section. Second line of
     defence behind the field limits in home.js - the input caps keep the
     numbers sane, this keeps ANY number inside the card. */
  min-width: 0;
}
.result .k {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9aa2ab;
}
.result .big {
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-top: 10px;
  /* A run of digits offers no break opportunity, so a wide result used to
     leave the card instead of wrapping. `anywhere` lets it fall to a second
     line - ugly for an absurd number, but it never breaks the layout, and
     ordinary results are far too short to wrap at all. */
  overflow-wrap: anywhere;
}
.result .big small {
  font-size: 0.28em;
  margin-left: 0.1em;
  color: #9aa2ab;
}
.result .msg {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #d2d6da;
  min-height: 3em;
}
.result hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin: 22px 0 18px;
}
.result .prog {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.result .prog b {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  color: #ff8a4a;
  /* Same reasoning as .result .big: a flex item defaults to min-width:auto,
     so a long break-even price would widen the row rather than wrap. */
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}
.after {
  margin-top: 26px;
  max-width: 52ch;
  font-size: 17px;
  color: #33393f;
}
.field select {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 14px 14px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--graphite);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.field select:focus {
  outline: none;
}
.wrap.sel::after {
  content: '▾';
  padding: 0 14px;
  color: var(--grey);
  /* The chevron sits in a ~39px strip OUTSIDE the input (it is a pseudo
     element on the wrapper). For the category combobox home.js turns that
     strip into a real open/close hit target, so it must look clickable and
     must not select as text on a double click. */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
/* category combobox: the bordered .wrap anchors an absolute dropdown of
   filtered matches (max 20 + the always-present "own rate" row) */
.cat-lookup {
  position: relative;
  cursor: pointer; /* the padding strip around the input opens the list too */
}
.cat-lookup input {
  font-size: 16px;
  cursor: text; /* the input keeps the caret affordance */
  /* the field carries the leaf only, but leaves can still be long: cut with
     an ellipsis rather than mid-glyph */
  text-overflow: ellipsis;
}
.cat-list {
  position: absolute;
  top: calc(100% + 2px);
  left: -2px;
  right: -2px;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card);
  border: 2px solid var(--graphite);
  box-shadow: 0 18px 34px -20px rgba(25, 28, 33, 0.4);
}
.cat-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--graphite);
}
.cat-item + .cat-item {
  border-top: 1px solid var(--hair);
}
.cat-item.active,
.cat-item:hover {
  background: var(--graphite);
  color: var(--bone);
}
.cat-item .ci-name {
  min-width: 0;
  font-weight: 600; /* leaf carries the row; the path below it stays quiet */
  overflow-wrap: anywhere;
}
/* Path context under each leaf. It used to be a single nowrap line, so a
   4-5 level breadcrumb lost its tail (the closest, most telling parent) to
   the ellipsis. Wrapping to at most two lines shows the whole path for
   every realistic depth and only then clamps. */
.cat-item .ci-ctx {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11px;
  font-weight: 400;
  color: var(--grey);
  overflow: hidden;
  overflow-wrap: anywhere;
}
.cat-item.active .ci-ctx,
.cat-item:hover .ci-ctx {
  color: #b9bfc6;
}
.cat-item .ci-pct {
  flex: none;
  color: var(--brand-deep);
}
.cat-item.active .ci-pct,
.cat-item:hover .ci-pct {
  color: #ff8a4a;
}
.cat-empty {
  padding: 11px 13px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--grey);
}
/* Ancestors of the picked category, shown under the field. Mirrors the
   list row's leaf + muted path split, so the same category reads the same
   way before and after picking it. */
.catpath {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--grey);
  margin-top: 7px;
  overflow-wrap: anywhere;
}
.catpath[hidden] {
  display: none;
}
.commtag {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--brand-deep);
  margin-top: 7px;
}
.vat {
  border: 1px solid var(--hair);
  background: var(--card);
}
.vat summary {
  cursor: pointer;
  padding: 13px 14px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
  list-style: none;
}
.vat summary::-webkit-details-marker {
  display: none;
}
.vat summary::after {
  content: '+';
  float: right;
}
.vat[open] summary::after {
  content: '−';
}
.vat .inner {
  padding: 2px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.break {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
  font-size: 13px;
  color: #b9bfc6;
}
.break div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
/* Cost-breakdown rows: label left, amount right. Both are flex items, so
   both need min-width:0 before a long amount is allowed to wrap instead of
   stretching the row past the card. */
.break div > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.break div > span.neg {
  text-align: right;
}
.break .neg {
  color: #ff9c8a;
}
.estnote {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #9aa2ab;
  margin-top: 14px;
  line-height: 1.55;
}
.scale {
  padding: 88px 0 60px;
}
.volrow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
  align-items: stretch;
  max-width: 640px;
}
.volseg {
  flex: 1 1 300px;
}
.volseg button {
  font-size: 13px;
}
.volfield {
  flex: 0 1 220px;
}
/* the methodology hint sits between the volume row and the results: same
   look as the calculator hints, but it needs its own spacing there (the
   base .hintline pulls itself up with a negative margin) */
.scale-method {
  margin-top: 18px;
  max-width: 640px;
}
/* Asekuracja dla sprzedawcy, ktoremu kalkulator skali wlasnie pokazal plan
   platny (audyt Damiana, pkt 1): to moment wahania, wiec zdanie o darmowych
   14 dniach stoi tuz pod wynikiem, a nie tylko w karcie Scale w cenniku. */
.scale-noworry {
  margin-top: 16px;
  max-width: 640px;
  padding-left: 14px;
  border-left: 3px solid var(--brand);
  font-size: 15.5px;
  color: var(--graphite);
}
.volout {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
  max-width: 640px;
}
.volout div,
.volout a {
  flex: 1 1 240px;
  background: var(--graphite);
  color: var(--bone);
  padding: 18px 20px;
  /* Flex items default to min-width:auto - a long "≈ ... zł" would widen
     its tile and shove the neighbour off the row instead of wrapping. */
  min-width: 0;
}
.volout .k {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9aa2ab;
}
.volout b {
  font-weight: 900;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  letter-spacing: -0.03em;
  color: #ff6b6b;
  overflow-wrap: anywhere;
}
/* ---------- two flagship features (loss list + commission refunds) ---------- */
.features {
  padding: 72px 0 48px;
}
.featgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 36px;
  max-width: 980px;
}
@media (min-width: 840px) {
  .featgrid {
    grid-template-columns: 1fr 1fr;
  }
}
.feat {
  background: var(--card);
  border: 1px solid var(--hair);
  padding: 24px 22px;
}
.feat-tag {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
}
.feat-loss .feat-tag {
  color: var(--loss);
}
.feat-profit .feat-tag {
  color: var(--profit);
}
.feat h3 {
  margin-top: 10px;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.feat p {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--grey);
}
.feat-nums {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 13px;
}
.feat-loss .feat-nums {
  color: var(--loss);
}
.feat-profit .feat-nums {
  color: var(--profit);
}
.feat-sync {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--grey);
}

.obj {
  padding: 28px 0 88px;
}
.objgrid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  border: 1px solid var(--hair);
  max-width: 960px;
}
@media (min-width: 840px) {
  .objgrid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.objgrid div {
  background: var(--card);
  padding: 20px;
}
.objgrid h4 {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--brand-deep);
  margin-bottom: 8px;
}
.objgrid p {
  font-size: 15px;
  line-height: 1.55;
}
.mcta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: 0.25s ease;
}
.mcta a {
  display: block;
  text-align: center;
  box-shadow: 0 12px 30px -12px rgba(25, 28, 33, 0.55);
}
.mcta.show {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
@media (min-width: 940px) {
  .mcta {
    display: none;
  }
}
.volout .planbox b,
.volout .recoverbox b {
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  color: #ff8a4a;
  line-height: 1.25;
}
/* the middle tile is a link (scrolls to #ask): the card look comes from the
   shared `.volout div, .volout a` rule, the value dresses as a CTA with an
   underline affordance instead of a loss-red number */
.volout a.recoverbox {
  text-decoration: none;
}
.volout .recoverbox b {
  border-bottom: 2px solid rgba(255, 138, 74, 0.5);
}
.volout a.recoverbox:hover b {
  color: #ffb98f;
  border-bottom-color: #ffb98f;
}

/* ---------- 4 · yard moment ---------- */
.map {
  padding: 110px 0 130px;
  min-height: 112svh;
  display: flex;
  align-items: center;
}
.map .pane {
  max-width: 470px;
}
.map h2 {
  font-size: clamp(1.7rem, 4.4vw, 2.7rem);
}
.legend {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grey);
}
.legend div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.legend s {
  width: 14px;
  height: 11px;
  text-decoration: none;
  flex: 0 0 auto;
  border: 1px solid rgba(25, 28, 33, 0.25);
}
.legend s.k {
  background: #c2a87e;
}
.legend s.r {
  background: var(--loss);
}
.proof {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--hair);
  padding: 20px 22px;
  max-width: 470px;
}
.proof .who {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grey);
  letter-spacing: 0.04em;
}
.proof .amt {
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: -0.035em;
  color: var(--loss);
  margin-top: 6px;
}
.proof .amt small {
  font-size: 0.3em;
  color: var(--graphite);
  margin-left: 0.08em;
}
.proof p {
  margin-top: 8px;
  font-size: 15.5px;
  color: #33393f;
}
.fine {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
}

/* ---------- 5 · pricing ---------- */
.pricing {
  padding: 88px 0;
}
.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 36px;
  max-width: 980px;
}
@media (min-width: 840px) {
  .plans {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: stretch;
  }
}
.plan {
  background: var(--card);
  border: 1px solid var(--hair);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plan.hot {
  border: 2px solid var(--graphite);
}
.plan .tagb {
  position: absolute;
  top: -12px;
  left: 18px;
  background: var(--brand);
  color: #1a0f05;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
}
.plan h3 {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.plan .who {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--grey);
  margin-top: 4px;
}
.plan .pr {
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.03em;
  margin-top: 14px;
}
.plan .pr small {
  font-size: 14px;
  color: var(--grey);
  font-weight: 400;
  letter-spacing: 0;
}
.plan ul {
  list-style: none;
  margin: 16px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 15px;
  color: #33393f;
}
.plan li {
  padding-left: 16px;
  position: relative;
}
.plan li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 2px;
  background: var(--brand);
}
.plan .btn {
  margin-top: auto;
  text-align: center;
}
/* Scale: the fourth plan, sold as a full-width horizontal card under the
   3-card grid. Same light card language as .plan - it stopped being the
   dark "napisz do nas" bar when Scale became self-checkout (ALPR-97:
   up to 25 000 orders/month at 499 zł, above that individual pricing).
   Desktop: name+price with the feature list below on the left, the
   trial hook + CTA + enterprise note as a rail on the right. */
.plan-wide {
  margin-top: 16px;
  max-width: 980px;
}
@media (min-width: 840px) {
  .plan-wide {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 300px);
    column-gap: 44px;
    align-items: center;
  }
  /* Pasek zajmuje wlasny wiersz na pelnej szerokosci; reszta zjezdza o jeden
     w dol, a kolumna akcji obejmuje oba pozostale wiersze. */
  .plan-wide .plan-wide-flag {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .plan-wide .plan-wide-head {
    grid-column: 1;
    grid-row: 2;
  }
  .plan-wide ul {
    grid-column: 1;
    grid-row: 3;
    margin-bottom: 0;
    display: grid;
    /* One column when the left half is narrow, two when it can afford
       full single-line bullets - no breakpoint arithmetic. */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 9px 28px;
  }
  .plan-wide .plan-wide-act {
    grid-column: 2;
    grid-row: 2 / 4;
  }
}
/* Pasek wienczacy karte Scale. Wlasciciel: "musisz BARDZO MOCNO wyeksponowac,
   ze to jest na start 14 dni za darmo (...) ale z klasa".
   Cala smialosc wydana w tym jednym miejscu - to eskalacja plakietki .tagb
   ("Najczesciej wybierany") do pelnej szerokosci karty: ten sam pomarancz,
   ten sam near-black tekst, ten sam mono w wersalikach. Dzieki temu czyta sie
   jako decyzja W SYSTEMIE, nie doklejony banner. Cena 499 zl zostaje w karcie
   nietknieta: podmiana jej na "0 zl" zlamalaby drabinke Starter/Standard/Pro,
   po ktorej ludzie porownuja plany.
   Dawna cicha linijka .plan-trial zostala USUNIETA - jej tresc jest teraz tutaj,
   a dwa razy to samo zdanie na jednej karcie to ten sam blad, ktory wlasciciel
   wytknal przy karcie "Zawsze liczymy 100%". */
.plan-wide-flag {
  /* wybieg na krawedzie karty: .plan ma padding 26px 22px */
  margin: -26px -22px 22px;
  padding: 13px 22px;
  background: var(--brand);
  color: #1a0f05;
  font-family: var(--mono);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 14px;
}
.plan-wide-flag .flag-lead {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.plan-wide-flag .flag-rest {
  font-size: 12.5px;
  letter-spacing: 0.03em;
  /* przygaszone wzgledem leadu, ale wciaz czytelne na pomaranczu */
  color: rgba(26, 15, 5, 0.82);
}
/* .btn is inline-block; inside the block-flow action column it must go
   full-width to match the buttons on the vertical cards (flex children). */
.plan-wide .btn {
  display: block;
}
/* Quiet escape hatch for >25k/month sellers - keeps the enterprise
   contact path without competing with the buy button. */
.plan-wide .plan-note {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
  line-height: 1.6;
}
.plan-wide .plan-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plan-wide .plan-note a:hover {
  color: var(--graphite);
}
.year {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grey);
}
.reframe {
  margin-top: 18px;
  max-width: 56ch;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--grey);
  border-left: 2px solid var(--brand);
  padding-left: 14px;
  line-height: 1.6;
}

/* ---------- 6 · faq ---------- */
.faqs {
  padding: 88px 0;
}
.faq {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  max-width: 960px;
  border: 1px solid var(--hair);
}
@media (min-width: 840px) {
  .faq {
    grid-template-columns: 1fr 1fr;
  }
}
.faq div {
  background: var(--card);
  padding: 20px 20px;
}
.faq h4 {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--grey);
  margin-bottom: 8px;
}
.faq p {
  font-size: 15.5px;
  line-height: 1.55;
}

/* ---------- 7 · ask ---------- */
/* No bottom padding: the footer is the section's last child, so any
   padding down there would land BELOW the footer as dead space. The air
   between the ask copy and the footer hairline lives on the footer's own
   margin-top instead. */
.ask {
  padding: 88px 0 0;
}
.hook {
  margin-top: 22px;
  max-width: 56ch;
  font-size: 15.5px;
  color: #33393f;
  border-left: 2px solid var(--brand);
  padding-left: 14px;
}

/* Multi-column footer, layout mirrored from production alleprofit.com:
   hairline rule, brand column (logo, disclaimer, support address) beside the
   Product / Company / Legal link columns, then a hairline-separated bottom
   bar with the copyright on the left and the credits on the right. */
footer {
  margin-top: 64px;
  border-top: 1px solid var(--hair);
  padding: 48px 0 28px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grey);
}
.foot-grid {
  display: grid;
  gap: 30px 32px;
}
.foot-brand img {
  display: block;
  height: 36px;
  width: auto;
}
.foot-brand .disc {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.6;
  max-width: 46ch;
}
.foot-mail {
  display: inline-block;
  margin-top: 12px;
}
.foot-col h4 {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 12px;
}
.foot-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
footer a {
  color: var(--grey);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
}
footer a:hover {
  color: var(--graphite);
}
.foot-bottom {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 12.5px;
}
@media (max-width: 559.98px) {
  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (min-width: 560px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 940px) {
  .foot-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px 40px;
  }
}
/* phone: the floating CTA (fixed ~62px incl. its offset) must never park
   on the footer text at full scroll, so the clearance lives in the
   footer's own bottom padding - right where the page ends, no dead band
   below it. Rides the mcta threshold (939.98px), not the 840px section
   breakpoint: the clearance must exist exactly where the floating CTA
   shows. */
@media (max-width: 939.98px) {
  footer {
    margin-top: 40px;
    padding: 32px 0 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
  }
  #yard {
    display: none;
  }
  body::after {
    display: none;
  }
}

/* i18n fade-in: body hidden until translations applied (pattern from old landing) */
body {
  opacity: 0;
  transition: opacity 0.15s ease;
}
body.i18n-ready {
  opacity: 1;
}

/* post-delete-account toast: settings.js lands here with #account-deleted,
   home.js builds the bar (graal styling, no components.css on this page) */
.home-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  background: var(--card);
  border: 2px solid var(--graphite);
  box-shadow: 0 12px 30px -12px rgba(25, 28, 33, 0.55);
  padding: 14px 22px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--graphite);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -14px);
  transition: 0.3s ease;
  pointer-events: none;
}
.home-toast::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--profit);
  flex: 0 0 auto;
}
.home-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 480px) {
  .home-toast {
    white-space: normal;
    width: calc(100vw - 32px);
    justify-content: center;
    text-align: center;
  }
}

/* language switcher in nav (markup identical to other pages, styled for graal nav) */
.lang-switcher {
  display: flex;
  gap: 2px;
  border: 1px solid var(--hair);
}
.lang-switcher button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 6px 9px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--grey);
}
.lang-switcher button.active {
  background: var(--graphite);
  color: var(--bone);
}