/* Landing pages (/ and /bg/) only — layered on site.css.
   Motifs: shelf-tag price cards with a punched hole, torn-receipt edges,
   taped-on phone screenshots, a price ticker, hand-drawn marks.
   CSP: style-src 'self' and img-src 'self' — no inline styles, and no data:
   URIs in url(); every shape below is plain CSS or inline SVG in the markup. */

main { overflow-x: clip; }

/* Fixed colours for chips that sit on yellow / dark bands regardless of theme */
:root {
  --chip-up: #B31B25;
  --chip-down: #3C6E47;
  --chip-ink: #FBF8F1;
  --band-up: #FF6F7E;
  --band-down: #6BE7A8;
}

/* ---------- Shared bits ---------- */
.tri {
  display: inline-block;
  width: 0.62em;
  height: 0.54em;
  background: currentColor;
  flex: none;
}
.tri--up { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tri--down { clip-path: polygon(0 0, 100% 0, 50% 100%); }

.move {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.1em 0.55em;
  border-radius: 8px;
  background: var(--chip-up);
  color: var(--chip-ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: nowrap;
}
.move--down { background: var(--chip-down); }

/* Hand-drawn underline under the one word that matters */
.mark { position: relative; display: inline-block; white-space: nowrap; font-style: italic; }
.mark svg {
  position: absolute;
  left: -2%;
  bottom: -0.34em;
  width: 104%;
  height: 0.42em;
  overflow: visible;
  pointer-events: none;
}
.mark path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Shelf tag: card surface with an accent border and a punched hole */
.pricetag-wrap { filter: drop-shadow(0 10px 14px rgba(20, 20, 19, 0.18)); display: inline-block; max-width: 100%; }
.pricetag {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--space-md);
  row-gap: 2px;
  padding: 14px 20px 14px 46px;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
}
.pricetag::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
}
.pricetag__name { grid-column: 1 / -1; font-weight: 600; font-size: 0.9375rem; }
.pricetag__was {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.pricetag__now {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.875rem, 6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}
.pricetag .move { grid-column: 2; justify-self: start; }

.sticker {
  display: inline-block;
  padding: 0.35em 0.9em;
  background: var(--accent-strong);
  color: #FBF8F1;
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1rem;
  transform: rotate(-7deg);
  box-shadow: 0 6px 14px rgba(20, 20, 19, 0.25);
}

/* Phone screenshot, taped on */
.phone {
  position: relative;
  width: min(100%, 270px);
  margin: 0;
}
.phone::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 50%;
  width: 92px;
  height: 28px;
  margin-left: -46px;
  background: rgba(194, 84, 31, 0.5);
  transform: rotate(-4deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  /* torn tape ends */
  clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%);
}
.phone--r::before { transform: rotate(5deg); margin-left: -30px; }
.phone__frame {
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  line-height: 0;
}
:root[data-theme="dark"] .phone__frame { border-color: #1E2A47; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone__frame { border-color: #1E2A47; }
}
.phone img { width: 100%; height: auto; }
.scr--light { display: var(--scr-light); }
.scr--dark { display: var(--scr-dark); }

/* Torn receipt edge hanging off the bottom of a section */
.torn { position: relative; --zz: var(--bg); }
.torn::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
  background: var(--zz);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%;
}
.torn--deep { --zz: var(--bg-deep); }
.torn--tag { --zz: var(--tag); }
.torn--ink { --zz: var(--foot-bg); }

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--header-h) + var(--space-xl)); padding-bottom: var(--space-3xl); }
.hero__grid { display: grid; gap: var(--space-xl); }
.hero__copy > * + * { margin-top: var(--space-lg); }
.hero h1 { font-size: clamp(2.25rem, 8.4vw, 4.5rem); }
.hero__sub { font-size: 1.125rem; max-width: 34rem; color: var(--ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); padding-top: var(--space-xs); }
.hero__micro { font-size: 0.9375rem; color: var(--ink-2); }
.hero__art {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 18px 0 64px;
}
.hero__art .phone { transform: rotate(2.5deg); }
.hero__art .pricetag-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: rotate(-3deg);
}
.hero__art .sticker { position: absolute; right: 2%; top: 8px; z-index: 3; }
@media (min-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + var(--space-3xl)); padding-bottom: var(--space-4xl); }
  .hero__grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-3xl); align-items: center; }
  .hero__art { padding: 24px 0 72px; }
  .hero__art .pricetag-wrap { left: -64px; }
  .hero__art .phone { width: min(100%, 290px); }
}

/* ---------- Price ticker ---------- */
.ticker {
  display: flex;
  align-items: stretch;
  background: var(--foot-bg);
  color: var(--foot-ink);
  border-block: 1px solid var(--rule);
  overflow: hidden;
}
.ticker__label {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  background: var(--tag);
  color: var(--on-tag);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
  max-width: 7.5rem;
  position: relative;
  z-index: 1;
}
.ticker__view { overflow: hidden; flex: 1; min-width: 0; }
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 70s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__list { display: flex; list-style: none; margin: 0; padding: 0; }
.tick {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 14px 28px;
  white-space: nowrap;
  font-size: 0.9375rem;
  border-right: 1px dashed rgba(222, 229, 255, 0.28);
}
.tick b { font-weight: 600; }
.tick__prices { font-family: var(--font-receipt); font-size: 0.8125rem; color: var(--foot-ink-2); }
.tick__move { display: inline-flex; align-items: center; gap: 0.3em; font-family: var(--font-mono); font-weight: 600; font-size: 0.8125rem; }
.tick__move--up { color: var(--band-up); }
.tick__move--down { color: var(--band-down); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; width: auto; flex-wrap: wrap; }
  .ticker__list { flex-wrap: wrap; }
  .ticker__list[aria-hidden="true"] { display: none; }
}

/* ---------- Feature sections ---------- */
.feature { padding-block: var(--space-3xl); position: relative; }
.feature--deep { background: var(--bg-deep); }
.feature__grid { display: grid; gap: var(--space-xl); align-items: center; }
.feature__text > * + * { margin-top: var(--space-md); }
.feature__text h2 { margin-top: var(--space-sm); }
.feature__text p { max-width: 34rem; }
.fnum {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.5rem, 11vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--primary);
}
.feature__art { display: flex; justify-content: center; position: relative; padding-top: 14px; }
@media (min-width: 900px) {
  .feature { padding-block: var(--space-4xl); }
  .feature__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-3xl); }
  .feature--flip .feature__grid { grid-template-columns: 0.95fr 1.05fr; }
  .feature--flip .feature__art { order: -1; }
  .fnum { margin-left: -4px; }
}
.note { font-size: 0.9375rem; color: var(--ink-2); padding-left: var(--space-md); border-left: 3px solid var(--tag); }

/* map: three layers */
.layers { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: 0; max-width: 34rem; }
.layers li {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-top: 1px dashed var(--rule);
}
.layers li:last-child { border-bottom: 1px dashed var(--rule); }
.layers__dot { width: 18px; height: 18px; margin-top: 5px; border: 2px solid var(--ink); border-radius: 50%; }
.layers__dot--you { background: var(--ink); }
.layers__dot--crowd { background: var(--accent); }
.layers__dot--official { background: var(--primary); }
.layers strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; }
.layers span { color: var(--ink-2); }
.feature--map .sticker { position: absolute; left: 4%; bottom: 12%; z-index: 3; }
@media (min-width: 900px) { .feature--map .sticker { left: 2%; } }

/* inflation: two phones + two figures */
.pair { position: relative; width: min(100%, 420px); height: 0; padding-bottom: 112%; }
.pair .phone { position: absolute; width: 56%; }
.pair .phone:first-child { left: 0; top: 0; transform: rotate(-3deg); }
.pair .phone:last-child { right: 0; bottom: 0; transform: rotate(2.5deg); }
.figures { display: flex; flex-wrap: wrap; gap: var(--space-md) 20px; margin-top: var(--space-lg); max-width: 34rem; }
.figure { border-top: 3px solid var(--ink-2); padding-top: var(--space-xs); flex: 1 1 7.5rem; }
.figure__n {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.875rem, 6vw, 2.625rem);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  line-height: 1.1;
  color: var(--ink);
}
.figure--hot { border-top-color: var(--up); }
.figure--hot .figure__n { color: var(--up); }
.figure__l { color: var(--ink-2); font-size: 0.9375rem; }
.figures + .note { margin-top: var(--space-md); }

/* split: how it goes */
.steps { list-style: none; counter-reset: s; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-sm); max-width: 30rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline; }
.steps li::before {
  content: counter(s);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.625rem;
  color: var(--accent-text);
}

/* scan: checklist drawn in CSS */
.checks { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-md); max-width: 34rem; }
.checks li { position: relative; padding-left: 2.25rem; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.15em;
  width: 0.65rem;
  height: 1.05rem;
  border-right: 4px solid var(--down);
  border-bottom: 4px solid var(--down);
  transform: rotate(40deg);
}
.checks b { font-weight: 700; }
.flag { display: inline-block; padding: 0 0.5em; border-radius: 8px; background: var(--tag); color: var(--on-tag); font-weight: 600; font-size: 0.875em; }

/* ---------- Also in the box: a till receipt ---------- */
.box { padding-block: var(--space-3xl); background: var(--bg-deep); }
.box__grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 900px) {
  .box { padding-block: var(--space-4xl); }
  .box__grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-3xl); }
}
.receipt {
  position: relative;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-receipt);
  padding: var(--space-xl) var(--space-lg);
  max-width: 34rem;
  box-shadow: var(--shadow-soft);
  transform: rotate(-0.6deg);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
  background: var(--surface);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%;
}
.receipt__title { text-align: center; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.receipt__sub { text-align: center; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-top: 2px; }
.receipt__rule { border: 0; border-top: 1px dashed var(--ink-2); margin: var(--space-md) 0; }
.receipt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.receipt li > .l-line { display: flex; align-items: baseline; gap: 6px; font-weight: 700; font-size: 0.9375rem; }
.l-dots { flex: 1; min-width: 12px; border-bottom: 2px dotted var(--ink-2); transform: translateY(-3px); }
.l-val { white-space: nowrap; }
.l-desc { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-2); margin-top: 2px; }
.receipt__total { display: flex; align-items: baseline; gap: 6px; font-weight: 700; font-size: 1.0625rem; }

/* ---------- Final CTA ---------- */
.get { background: var(--tag); color: var(--on-tag); padding-block: var(--space-3xl); position: relative; }
.get .wrap { display: grid; gap: var(--space-xl); }
.get h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 7.5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 16ch;
  text-wrap: balance;
}
.get p { font-size: 1.125rem; max-width: 32rem; margin-top: var(--space-md); }
.get .play-badge img { width: 240px; }
@media (min-width: 900px) { .get .play-badge img { width: 280px; } }
.get .play-badge--pending .play-badge__pill { background: var(--on-tag); color: var(--tag); box-shadow: none; }
.get .play-badge--pending img { opacity: 0.8; }
@media (min-width: 900px) {
  .get { padding-block: var(--space-4xl); }
  .get .wrap { grid-template-columns: 1fr auto; align-items: end; gap: var(--space-3xl); }
}

/* Mid widths: the hero copy column is narrow, so keep long (Bulgarian) headlines to ~4 lines. */
@media (min-width: 900px) { .hero h1 { font-size: clamp(2.5rem, 4.8vw, 4.75rem); } }

/* ---------- Desktop QR ("scan to get the app") ----------
   A phone-install shortcut for desktop visitors: the code encodes /get, which
   nginx 302s to Google Play. Layout when live: [QR card | column of store badges],
   top-aligned, with the caption under the whole block. The QR card is sized to two
   stacked badges plus their gap (--qr-size), so it reads as one block and a second
   store badge can be dropped into .get__stores later with no layout change.
   Hidden by default and shown only on wide, hover + fine-pointer devices (a phone
   already has the badge) AND once the Play flag is "true" -- the negated :not() form
   at the bottom mirrors .btn--get-app, so a page that omits the attribute can never
   show a pre-launch QR. Everywhere else .store-block and .get__stores are
   display: contents, i.e. layout-neutral, so the pre-launch page is unchanged. The
   card is always paper with dark ink, in dark mode too: scanners need dark on
   light, so those are literals rather than theme tokens. */
.store-block, .get__stores { display: contents; }
.qr-card, .qr-caption { display: none; }
.qr-card {
  --qr-size: 154px;           /* hero: two 180px-wide badges (69px) + 16px gap */
  box-sizing: border-box;
  width: var(--qr-size);
  height: var(--qr-size);
  margin: 0;
  padding: var(--space-sm);
  background: #FBF8F1;
  border: 1px solid #C4BDAE;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}
.qr-card img { display: block; width: 100%; height: 100%; }
.get .qr-card { --qr-size: 201px; }   /* 2 x 92px (240px badge) + 16px gap */
.get .get__stores .play-badge img { width: 240px; }
.qr-caption { font-size: 0.8125rem; line-height: 1.35; color: var(--ink-2); }
.get .qr-caption { color: var(--on-tag); }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body[data-play-live="true"] .store-block {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: start;
    column-gap: var(--space-md);
    row-gap: var(--space-sm);
  }
  body[data-play-live="true"] .get__stores {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  body[data-play-live="true"] .qr-card { display: block; }
  body[data-play-live="true"] .qr-caption {
    display: block;
    grid-column: 1 / -1;
    width: 0;            /* the caption must not widen the block; it wraps to it */
    min-width: 100%;
  }
}
/* From 1200px the final-CTA column has room for the 280px badge (see .get above). */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .get .qr-card { --qr-size: 232px; } /* 2 x 108px (280px badge) + 16px gap */
  .get .get__stores .play-badge img { width: 280px; }
}
body:not([data-play-live="true"]) .qr-card,
body:not([data-play-live="true"]) .qr-caption { display: none; }