/* ==============================================
   DESIGN TOKENS
   ============================================== */

:root {
  /* Colors */
  --green-primary: #4CC35D;
  --black: #000000;
  --dark-gray: #333;
  --text-body: #666666;
  --border-gray: #D4D4D4;
  --bg-gray: #FAFAFA;
  --placeholder-gray: #d9d9d9;
  --white: #ffffff;
  --green-text: #00A918; /* brand token from the gold landing (PRD §3) – keep even if locally unused */
  --green-bg-light: #EEFFF1;
  --red-promo: #FF0000;
  /* Badge text darkened from the Figma #31A742/#FF0000 to meet WCAG AA
     (4.5:1) on their tinted backgrounds; the backgrounds are unchanged */
  --green-badge: #1E7A2E;
  --green-badge-bg: #E6FFEA;
  --red-badge: #C62828;
  --red-badge-bg: #FFEAEA;

  /* Typography */
  --font-main: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout – matches .container-block (1770px) on lombard24.ee */
  --max-width: 1770px;

  /* Spacing scale – shared with the gold landing; keep steps even if locally unused */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 60px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  /* Border radius */
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0px 16px 32px -8px rgba(12, 12, 13, 0.12),
                 0px 4px 8px -2px rgba(12, 12, 13, 0.08);
  --shadow-card-sm: 0px 16px 16px -8px rgba(12, 12, 13, 0.1),
                    0px 4px 4px -4px rgba(12, 12, 13, 0.05);
  --btn-glow: inset 0px 2px 4px #00DF20, inset 0px -2px 14px 0px #00FF24;
}

/* ==============================================
   CSS RESET & BASE
   ============================================== */

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

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-padding-top: 24px;
  /* Keep the scrollbar gutter reserved on classic-scrollbar systems, so the
     quote-modal scroll lock (body overflow:hidden) doesn't shift the page */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Long anchor scrolls (category tiles → bento cards) animate only for users
   who haven't asked for reduced motion; JS scrollIntoView mirrors this check */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-main);
  color: var(--dark-gray);
  line-height: 1.6;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { text-decoration: none; color: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px; /* matches lombard24.ee .container-block (1770px, 40px → 1690px content) */
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
}

h1 { font-size: 64px; line-height: 1.1; }

h2 { font-size: 48px; }

h3 { font-size: 24px; }

h4 { font-size: 18px; }

/* ==============================================
   UTILITIES
   ============================================== */

.svg-sprite { display: none; }

/* ==============================================
   REUSABLE COMPONENTS
   ============================================== */

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 0 24px;
  border-radius: var(--radius-full);
  font-family: var(--font-main); /* <button> elements don't inherit the body font */
  font-size: 18px;
  min-height: 50px;
  line-height: 1.15;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn-primary {
  background: var(--green-primary);
  color: var(--white);
  border: 1px solid rgba(0, 106, 15, 0.2);
  box-shadow: var(--btn-glow);
}

@media (hover: hover) {
  .btn-primary:hover { background: #5fd06e; }
}

.btn-primary:active { background: #43b053; }

.btn-secondary {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--border-gray);
}

@media (hover: hover) {
  .btn-secondary:hover { background: #F9F9F9; }
}

.btn-secondary:active { background: #F1F1F1; }

/* Keyboard focus ring – shared by every interactive element on the page.
   :focus-visible only, so mouse/touch activation stays ring-free. */
.btn:focus-visible,
.faq-question:focus-visible,
.cat-deep-card__toggle:focus-visible,
.quote-modal__close:focus-visible,
.category-tile:focus-visible,
.branch-card:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.btn-icon {
  gap: 12px;
}

/* Sticky quote CTA – revealed by JS once the hero CTA scrolls out of view and
   hidden again over the footer contact block.
   Desktop: a floating green pill centered above where the live-site HelpCrunch
   bubble sits (66px). Mobile: a full-width white bar replicating the product-
   page buy bar (.product-control-mobile) – copy on the left, pill on the right. */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  pointer-events: none; /* desktop: only the pill is interactive */
  visibility: hidden;
  transform: translateY(120%);
  transition: transform 0.35s ease, visibility 0s linear 0.35s;
}

.sticky-cta.is-visible {
  visibility: visible;
  transform: none;
  transition: transform 0.35s ease, visibility 0s linear 0s;
}

/* Desktop: floating centered pill – no bar chrome, copy hidden */
.sticky-cta__bar {
  display: flex;
  justify-content: center;
  padding: 0 16px calc(66px + env(safe-area-inset-bottom));
}

.sticky-cta__title { display: none; }

.sticky-cta .btn-primary {
  pointer-events: auto;
  width: auto; /* hug the label; overrides the global full-width mobile buttons */
  box-shadow: var(--btn-glow), var(--shadow-card);
}

/* Mobile: full-width white bar – copy left, button right */
@media (max-width: 768px) {
  .sticky-cta {
    pointer-events: auto;
    background: var(--white);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
  }

  .sticky-cta__bar {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
  }

  .sticky-cta__title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--black);
  }

  .sticky-cta .btn-primary {
    flex-shrink: 0;
    box-shadow: var(--btn-glow);
  }
}

@media (max-width: 480px) {
  .sticky-cta__title { font-size: 16px; }

  /* Both mobile pills – sticky bar and hero – match the product-page mobile
     buy button: 48px pill, 16px label */
  .sticky-cta .btn-primary,
  .hero-ctas .btn {
    font-size: 16px;
    min-height: 48px;
    padding: 8px 20px;
    border-radius: var(--radius-full);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta,
  .sticky-cta.is-visible { transition: none; }
}

/* Quote-channel modal – replica of the live-site "price options" popup
   (the banner CTA on lombard24.ee). Opened by the [data-quote-trigger] CTAs. */

.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.5);
}

.quote-modal[hidden] { display: none; }

.quote-modal__dialog {
  width: min(464px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 20px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.09);
  outline: none;
  animation: quote-modal-in 0.25s ease;
}

@keyframes quote-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote-modal__dialog { animation: none; }
}

.quote-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.quote-modal__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--black);
}

.quote-modal__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px; /* WCAG/HIG touch-target minimum */
  height: 44px;
  margin: -12px -12px 0 0; /* icon stays visually where the 28px box had it */
  padding: 0;
  border: none;
  background: none;
  color: #767676; /* 4.5:1 on white – was #BABABA (1.9:1) */
  cursor: pointer;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .quote-modal__close:hover { color: var(--black); }
}

/* Same auto-fill grid as the live popup: two columns when the dialog is
   wide enough, a single stacked column on narrow phones */
.quote-modal__channels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 12px;
}

.quote-modal__channels .btn {
  font-size: 16px;
  min-height: 48px;
  padding: 0 20px;
  gap: 10px;
}

.quote-modal__channels .btn svg { flex-shrink: 0; }

/* Scroll lock while the modal is open */
body.quote-modal-open { overflow: hidden; }

/* Section heading (h2 + badge wrapper) */

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* Step component */

.step {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.step-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.step-top h3 {
  font-size: 24px;
  line-height: 1.15;
}

.step-top p {
  font-size: 18px;
  color: var(--text-body);
  line-height: 1.5;
}

.step-img {
  order: -1;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--placeholder-gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  width: 100%;
}

/* Branch card */

.branch-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  gap: 20px;
  background: var(--white);
  box-shadow: var(--shadow-card-sm);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .branch-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }
}

.branch-card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.branch-card h3 {
  font-size: 16px;
  line-height: 1.15;
}

.branch-card .address {
  font-size: 14px;
  color: var(--black);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.2;
}

.branch-card .address svg {
  flex-shrink: 0;
  width: 15px;
  height: 20px;
}

.branch-card .rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 16px;
  color: var(--black);
  line-height: 1;
}

.branch-card .rating .stars {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  align-items: center;
  transform: translateY(-2px);
}

.branch-card .rating .stars svg {
  width: 16px;
  height: 16px;
  display: block;
}

.star-half {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
}

.star-half .star-bg {
  filter: saturate(0);
  opacity: 0.25;
}

.star-half .star-fill {
  position: absolute;
  left: 0;
  top: 0;
  clip-path: inset(0 50% 0 0);
}

/* Video card */

.sell-video-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  background: var(--green-bg-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) 32px;
  width: 100%;
}

/* No cursor:pointer here on purpose – the play overlay is a placeholder
   until the kokkuost video ships (PRD §5.5 / phase 2) */
.sell-video-player {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.play-icon {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .sell-video-player:hover .play-icon { opacity: 1; }
}

/* ==============================================
   SCROLL REVEAL ANIMATIONS
   ============================================== */

/* Scroll-reveal: keyframes for one-time animation, transition stays free for hover */

/* Reveal – "visible by default" model to prevent iOS scroll-back white flash.
   CSS base has NO opacity:0 – JS adds .reveal-hidden on init to below-fold elements,
   then .visible when they enter the viewport; the transition plays between the two.
   On iOS scroll-back recomposite, CSS base (opacity:1) holds – no white flash possible.
   Elements without JS fall back to fully visible (progressive enhancement). */

.reveal {
  transition: opacity 0.5s ease, transform 0.5s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.reveal.reveal-hidden {
  opacity: 0;
  transform: translateY(30px);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for child items */

.reveal-stagger > .reveal.visible:nth-child(1) { transition-delay: 0s; }

.reveal-stagger > .reveal.visible:nth-child(2) { transition-delay: 0.15s; }

.reveal-stagger > .reveal.visible:nth-child(3) { transition-delay: 0.3s; }

.reveal-stagger > .reveal.visible:nth-child(4) { transition-delay: 0.45s; }

.reveal-stagger > .reveal.visible:nth-child(5) { transition-delay: 0.6s; }

.reveal-stagger > .reveal.visible:nth-child(6) { transition-delay: 0.75s; }

.reveal-stagger > .reveal.visible:nth-child(7) { transition-delay: 0.9s; }

.reveal-stagger > .reveal.visible:nth-child(8) { transition-delay: 1.05s; }

/* Category bento has 15 cards — tighter cascade so the last card lands well
   before the reveal lock (1.6s) and the sequence stays snappy. */

.cat-deep-bento > .reveal.visible:nth-child(1) { transition-delay: 0s; }

.cat-deep-bento > .reveal.visible:nth-child(2) { transition-delay: 0.06s; }

.cat-deep-bento > .reveal.visible:nth-child(3) { transition-delay: 0.12s; }

.cat-deep-bento > .reveal.visible:nth-child(4) { transition-delay: 0.18s; }

.cat-deep-bento > .reveal.visible:nth-child(5) { transition-delay: 0.24s; }

.cat-deep-bento > .reveal.visible:nth-child(6) { transition-delay: 0.3s; }

.cat-deep-bento > .reveal.visible:nth-child(7) { transition-delay: 0.36s; }

.cat-deep-bento > .reveal.visible:nth-child(8) { transition-delay: 0.42s; }

.cat-deep-bento > .reveal.visible:nth-child(9) { transition-delay: 0.48s; }

.cat-deep-bento > .reveal.visible:nth-child(10) { transition-delay: 0.54s; }

.cat-deep-bento > .reveal.visible:nth-child(11) { transition-delay: 0.6s; }

.cat-deep-bento > .reveal.visible:nth-child(12) { transition-delay: 0.66s; }

.cat-deep-bento > .reveal.visible:nth-child(13) { transition-delay: 0.72s; }

.cat-deep-bento > .reveal.visible:nth-child(14) { transition-delay: 0.78s; }

.cat-deep-bento > .reveal.visible:nth-child(15) { transition-delay: 0.84s; }

/* Hero entrance – CSS keyframes (no JS timing dependency, works reliably on iOS).
   JS locks inline styles on animationend to prevent iOS scroll-back fill-mode recompute. */

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroImageFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-anim {
  opacity: 0;
  animation: heroFadeUp 0.6s ease forwards;
}

.hero-anim-delay-1 { animation-delay: 0.1s; }

.hero-anim-delay-2 { animation-delay: 0.2s; }

.hero-image-anim {
  opacity: 0;
  animation: heroImageFadeIn 0.7s ease 0.15s forwards;
}

/* Respect reduced motion preference */

@media (prefers-reduced-motion: reduce) {
  .hero-anim,
  .hero-image-anim,
  .reveal,
  .reveal.reveal-hidden {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ==============================================
   SECTION-SPECIFIC LAYOUTS
   Sections inherited from the gold landing first; kokkuost-specific
   sections follow under "Kokkuost components" further down
   ============================================== */

/* --- Section divider --- */

.section-divider {
  border: none;
  border-top: 1px solid var(--border-gray);
  margin: 0 auto;
}

/* --- Hero --- */

.hero {
  padding: 32px 0;
  display: flex;
  justify-content: center;
}

.hero-inner.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl); /* 60px between the copy and the hero image */
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 7vh, 100px) var(--space-2xl);
  max-width: calc(var(--max-width) - 64px);
  width: calc(100% - 64px);
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 805px;
  flex-shrink: 0;
}

.hero-top {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.hero h1 { color: var(--black); }

.hero-ctas {
  display: flex;
  gap: 13px;
}

.hero-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex-shrink: 1;
}

.hero-image img {
  max-height: 660px;
  width: auto;
  object-fit: contain;
}

/* --- Sell & Buy Process (shared) --- */

.sell-process {
  padding: var(--space-3xl) 0;
}

.sell-process .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
}

/* Sell steps variant (centered text, inline number) */

.sell-step .step-top {
  align-items: center;
  text-align: center;
  padding: 0 32px;
  gap: 20px;
}

.sell-step .step-header {
  display: block;
  text-align: center;
}

.sell-step .step-header .step-number {
  display: inline;
  vertical-align: middle;
  margin-right: 16px;
  line-height: 0; /* don't let the 36px digit inflate the title's first line box */
}

.sell-step .step-header h3 {
  display: inline;
}

.sell-step .step-top p {
  color: var(--text-body);
}

.sell-step {
  gap: 32px;
}

.sell-step .step-img {
  order: 0;
}

.step-number {
  font-size: 36px;
  font-weight: 800;
  color: var(--green-primary);
  line-height: 1;
}

/* Sell video card – background image variant */

.sell-video-card--bg {
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 994px;
  aspect-ratio: 994 / 480;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sell-video-card--bg > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sell-video-player--large .play-icon {
  position: relative;
  z-index: 1;
  opacity: 1;
  width: 60px;
  height: 42px;
}

/* Sell steps grid override – tighter gap matching Figma */

.sell-steps {
  gap: 20px;
}

/* --- Reputation & branches (ex "why choose") --- */

.why-choose {
  padding: var(--space-3xl) 0;
}

.why-choose > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reputation-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  width: 100%;
  padding: 0 32px;
}

.reputation-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2xl);
  width: 100%;
}

.reputation-stat {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 367px;
  flex-shrink: 0;
}

.stat-counter {
  display: flex;
  align-items: center;
  gap: 24px;
}

.stat-counter .stat-icon { flex-shrink: 0; }

.stat-numbers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-numbers .label {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.stat-numbers .number {
  font-size: 48px;
  font-weight: 700;
  color: var(--green-primary);
  line-height: 1;
}

.reputation-stat > p {
  font-size: 18px;
  color: var(--text-body);
  line-height: 1.5;
}

.branch-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(180px, calc(25% - 24px)), 1fr));
  gap: 32px;
  flex: 1;
  min-width: 0;
}

/* --- FAQ --- */

.faq {
  padding: var(--space-3xl) 0;
}

.faq > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  width: 100%;
  max-width: 807px;
}

.faq h2 {
  line-height: 1.15;
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.faq-item {
  background: var(--white);
  box-shadow: 0px 4px 4px -1px rgba(12, 12, 13, 0.1), 0px 4px 4px -1px rgba(12, 12, 13, 0.05);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 72px;
  padding: 0 24px;
  gap: 24px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--black);
  /* Button reset (semantic <button>) */
  background: none;
  border: none;
  font-family: var(--font-main);
  text-align: left;
  width: 100%;
}

.faq-question .toggle {
  font-size: 48px;
  line-height: 1.15;
  color: var(--green-primary);
  font-weight: 400;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}

.faq-answer > p {
  overflow: hidden;
  padding: 0 24px;
  font-size: 16px;
  color: var(--dark-gray);
  line-height: 1.6;
  transition: padding 0.2s ease;
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item.open .faq-answer > p {
  padding: 8px 24px 20px;
}

.faq-item.open .toggle { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .faq-question .toggle,
  .faq-answer,
  .faq-answer > p { transition: none; }
}

/* --- Contact CTA (inside FAQ) --- */

.contact-cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  /* Sibling of .faq-content (not inside it) so the four buttons get the
     full container width; margin keeps the old 120px visual separation */
  margin-top: var(--space-3xl);
}

.contact-cta-block h3 {
  line-height: 1.15;
  text-align: center;
}

.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}

/* Labels never break – tight buttons wrap to the next row as a whole */
.contact-buttons .btn { white-space: nowrap; }

.contact-buttons .btn img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ==============================================
   Kokkuost components
   ============================================== */

/* Hero subline */

.hero-subline {
  font-size: 20px;
  color: var(--text-body);
  line-height: 1.5;
  max-width: 560px;
}

/* Comparison cards (Lombard24 vs marketplace) */

.price-flow-section { padding: var(--space-3xl) 0; }

.price-flow-section > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
}

.price-flow-section h2 { text-align: center; }

.price-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 50px;
  width: 100%;
  max-width: 1120px;
}

/* Cards share three subgrid rows (logo/label, title, badges) so the titles
   and the badge stacks sit on the same level in both cards */
.price-flow__card {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 32px;
  justify-items: center;
  text-align: center;
  padding: 70px 54px;
  background: var(--white);
  border: 6px solid;
  border-radius: 28px;
}

.price-flow__card--good { border-color: var(--green-primary); }

.price-flow__card--bad { border-color: var(--red-promo); }

/* Figma insets the marks 24/35px (check) and 32/39px (cross) from the card
   edge; abs-pos counts from the padding box, hence the 6px border deducted */
.price-flow__mark {
  position: absolute;
  top: 18px;
  left: 29px;
}

.price-flow__card--bad .price-flow__mark {
  top: 26px;
  left: 33px;
}

.price-flow__logo { display: block; }

.price-flow__label {
  display: flex;
  align-items: flex-end;
  min-height: 56px; /* logo height – keeps the title row level without subgrid too */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--black);
}

.price-flow__title {
  align-self: start;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--black);
  max-width: 480px;
}

.price-flow__badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-flow__badges li {
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 800;
  line-height: 14px; /* cap-height line box: 8 + 14 + 8 = 30px pill, as in Figma */
  text-transform: uppercase;
  white-space: nowrap;
}

.price-flow__card--good .price-flow__badges li {
  background: var(--green-badge-bg);
  color: var(--green-badge);
}

.price-flow__card--bad .price-flow__badges li {
  background: var(--red-badge-bg);
  color: var(--red-badge);
}

/* Prep checklist */

.prep {
  padding: var(--space-3xl) 0;
  background: var(--bg-gray);
}

.prep > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
}

.prep h2 { text-align: center; }

.prep-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
  list-style: none;
}

.prep-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 44px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-sm);
}

.prep-item__number {
  flex-shrink: 0;
  min-width: 40px;
  text-align: center;
  margin-top: -3px; /* optically align the number with the first heading line */
}

.prep-item__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.prep-item__title { margin: 0; font-size: 22px; font-weight: 700; color: var(--black); line-height: 1.3; }

.prep-item__desc { font-size: 17px; color: var(--text-body); line-height: 1.6; }

/* Category grid */

.categories { padding: var(--space-3xl) 0; }

.categories > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
}

.categories h2 { text-align: center; }

.category-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 16px;
  width: 100%;
}

.category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 32px 16px;
  background: var(--white);
  box-shadow: var(--shadow-card-sm);
  border-radius: var(--radius-lg);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .category-tile:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }
}

/* Category icons are standalone files (images/icons/cat-*.svg) with the
   brand green baked in – currentColor can't cross an <img> boundary */
.category-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.category-tile__icon img { width: 100%; height: 100%; object-fit: contain; }

.category-tile__name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--black);
}

/* Per-category bento – all copy visible by default (SEO-safe) */

.cat-deep { padding: var(--space-3xl) 0; background: var(--bg-gray); }

.cat-deep > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

.cat-deep h2 { text-align: center; }

.cat-deep-bento {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cat-deep-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 2px 8px rgba(12, 12, 13, 0.05);
  position: relative;
  overflow: hidden;
  /* box-shadow drives the highlight/hover; opacity+transform must stay here too,
     else this rule (later than .reveal) overrides the reveal transition and the
     stagger delays never play – the cards would pop in all at once. */
  transition: box-shadow 1.2s ease-out, opacity 0.5s ease, transform 0.5s ease;
}

/* Highlight when a category-grid anchor lands on a card: a 4px green border
   (drawn as a spread shadow so the card's content never shifts) that stays
   until the user scrolls/swipes away (JS removes the class), then fades out.
   Removal transitions with the base rule's 1.2s timing; the 0.3s here only
   governs the fade-in. */

.cat-deep-card.is-highlighted {
  box-shadow: 0 2px 8px rgba(12, 12, 13, 0.05), 0 0 0 4px var(--green-primary);
  transition: box-shadow 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .cat-deep-card,
  .cat-deep-card.is-highlighted,
  .cat-deep-card__more,
  .cat-deep-card__toggle::after { transition: none; }
}

.cat-deep-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cat-deep-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.cat-deep-card__icon img { width: 100%; height: 100%; object-fit: contain; }

.cat-deep-card__head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--black);
  min-width: 0; /* flex item: shrink below longest word so the card's overflow:hidden never clips it */
  overflow-wrap: break-word;
}

.cat-deep-card__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--dark-gray);
  flex: 1;
}

.cat-deep-card__body p { margin: 0 0 8px; }

.cat-deep-card__body p:last-child { margin-bottom: 0; }

.cat-deep-card__body strong { color: var(--black); }

.cat-deep-card__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.cat-deep-card__more-inner {
  overflow: hidden;
  min-height: 0;
}

.cat-deep-card__more-inner > p:first-child { margin-top: 8px; }

.cat-deep-card.is-open .cat-deep-card__more { grid-template-rows: 1fr; }

.cat-deep-card__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: auto;
}

.cat-deep-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Padding + negative margin: ~40px touch target, unchanged layout */
  padding: 12px 8px;
  margin: -12px -8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-gray);
  transition: color 0.18s ease;
}

.cat-deep-card__toggle::after {
  content: "↓";
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 14px;
  line-height: 1;
}

@media (hover: hover) {
  .cat-deep-card__toggle:hover { color: var(--green-primary); }
}

.cat-deep-card.is-open .cat-deep-card__toggle::after { transform: rotate(180deg); }

/* "Didn't find your category?" note under the bento grid */

.why-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-top: 60px;
}

.why-cta p {
  font-size: 18px;
  color: var(--text-body);
  line-height: 1.5;
}

/* ==============================================
   RESPONSIVE BREAKPOINTS – all components
   Descending order: 1600 → 1400 → 1200 → 768 → 480.
   Within each block: gold-landing sections first, kokkuost sections after.
   ============================================== */

/* --- Large desktops ≤1600px --- */

@media (max-width: 1600px) {
  .hero { padding: 20px 0; }

  .hero-inner.container { padding: 40px 44px; }

  .hero-content { width: auto; flex: 1; min-width: 0; }

  .hero-image img { max-height: 560px; }

  /* Sell & Buy process */

  .sell-process { padding: 100px 0; }

  .sell-process .container { gap: var(--space-xl); }

  .steps-grid { gap: 20px; }

  /* Reputation & branches */

  .why-choose { padding: 100px 0; }

  .branch-cards { gap: 24px; }

  /* FAQ */

  .faq { padding: 100px 0; }

  /* Kokkuost sections */

  /* Generic section heading follows the gold-landing h2 scale (48 → 44);
     the FAQ h2 sits outside .section-heading but follows the same scale */

  .section-heading h2,
  .faq h2 { font-size: 44px; }

  .price-flow-section,
  .prep,
  .categories,
  .cat-deep { padding: 100px 0; }

  .price-flow-section > .container,
  .prep > .container,
  .categories > .container,
  .cat-deep > .container { gap: var(--space-xl); }

  .why-cta { margin-top: 0; }

  .price-flow__title { font-size: 54px; }
}

/* --- Intermediate ≤1400px --- */

@media (max-width: 1400px) {
  h1 { font-size: 54px; }

  .hero-inner.container { padding: 48px 40px; }

  /* Sell & Buy process */

  .sell-process { padding: var(--space-2xl) 0; }

  .sell-process .container { gap: 48px; }

  .steps-grid { gap: 32px; }

  .step-top h3 { font-size: 20px; }

  .step-top p { font-size: 16px; }

  .sell-video-card { padding: 48px 32px; }

  /* Reputation & branches */

  .why-choose { padding: var(--space-2xl) 0; }

  .reputation-content { gap: 48px; }

  .reputation-stat { width: 320px; }

  .stat-numbers .number { font-size: 40px; }

  .stat-numbers .label { font-size: 18px; }

  .reputation-stat > p { font-size: 16px; }

  .stat-icon {
    width: 140px;
    height: auto;
  }

  .branch-card { padding: 16px; }

  .branch-cards { gap: 20px; }

  .branch-card .rating .stars { gap: 2px; }

  .branch-card .rating .stars svg { width: 12px; height: 12px; }

  .star-half { width: 12px; height: 12px; }

  .star-half svg { width: 12px; height: 12px; }

  /* FAQ */

  .faq { padding: var(--space-2xl) 0; }

  /* Kokkuost sections */

  .section-heading h2,
  .faq h2 { font-size: 40px; }

  .price-flow-section,
  .prep,
  .categories,
  .cat-deep { padding: var(--space-2xl) 0; }

  .price-flow-section > .container,
  .prep > .container,
  .categories > .container,
  .cat-deep > .container { gap: 48px; }

  .why-cta { margin-top: -24px; }

  .price-flow__title { font-size: 48px; }

  /* 8 columns pinch to ~96px of content here; the longest one-word names
     («Музыкальные», «инструменты») only fit at 16px */
  .category-tile__name { font-size: 16px; }
}

/* --- Tablets / column layout ≤1200px --- */

@media (max-width: 1200px) {
  .container { padding: 0 20px; } /* lombard24.ee drops to 20px below desktop */

  .hero { padding: 32px 0; }

  .hero-inner.container {
    flex-direction: column;
    padding: 48px 40px;
    text-align: center;
    gap: 32px;
  }

  .hero-content {
    width: auto;
    align-items: center;
    gap: 40px;
  }

  .hero-top {
    align-items: center;
    gap: 32px;
  }

  .hero-image { order: -1; }

  .hero-image img { max-height: 360px; }

  .hero-ctas { justify-content: center; }

  h1 { font-size: 48px; }

  /* Sell process */

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 600px;
    margin: 0 auto;
  }

  .step { gap: 24px; }

  .sell-video-card {
    flex-direction: column;
    text-align: center;
    padding: 40px 24px;
    gap: 32px;
  }

  /* Reputation & branches */

  .reputation-content {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .reputation-stat {
    width: 100%;
    max-width: 600px;
    align-items: center;
    text-align: center;
  }

  .stat-numbers { text-align: left; }

  .reputation-stat > p { text-align: center; }

  .branch-cards { width: 100%; }

  /* Kokkuost sections */

  .section-heading h2,
  .faq h2 { font-size: 36px; }

  .category-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }

  .category-tile__name { font-size: 18px; }

  .price-flow {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 560px;
  }

  .price-flow__title { font-size: 44px; }

  .prep-list { grid-template-columns: 1fr; max-width: 600px; }

  /* 3 columns get too narrow for the long RU headings below ~1200 */

  .cat-deep-bento { grid-template-columns: repeat(2, 1fr); }

  .why-cta { margin-top: -36px; }

  .why-cta p { text-align: center; }
}

/* --- Small tablets / large phones ≤768px --- */

@media (max-width: 768px) {
  .section-divider { margin-top: 8px; margin-bottom: 8px; }

  .hero { padding: 24px 20px; }

  .hero-inner.container {
    padding: 32px 20px;
    border-radius: var(--radius-md);
    gap: 28px;
    width: 100%;
  }

  h1 { font-size: 40px; }

  .hero-content { gap: 32px; }

  .hero-top { gap: 24px; }

  .btn {
    font-size: 16px;
    min-height: 48px;
    padding: 8px 18px;
  }

  .hero-image img { max-height: 300px; }

  .sell-process { padding: var(--space-xl) 0; }

  .sell-process .container { gap: 36px; }

  .section-heading { gap: 8px; }

  .steps-grid { gap: 36px; }

  .step-header { gap: 14px; }

  .step-top h3 { font-size: 18px; }

  .sell-step { gap: 24px; }

  .sell-steps { gap: 48px; }

  .sell-step .step-top h3 { font-size: 22px; }

  /* Mobile: same centered inline flow as desktop; the hanging indent keeps
     wrapped title lines clear of the number */
  .sell-step .step-header {
    padding-left: 28px;
    text-indent: -28px;
  }

  .sell-step .step-header .step-number {
    margin-right: 12px;
  }

  .sell-video-card {
    padding: 32px 20px;
    gap: 24px;
  }

  /* Reputation & branches */

  .why-choose { padding: 60px 0; }

  .reputation-block { gap: 48px; padding: 0; }

  .reputation-stat { align-items: flex-start; text-align: left; }

  .reputation-stat > p { text-align: left; }

  .reputation-content { gap: 36px; }

  .stat-counter { gap: 20px; }

  .stat-icon { width: 120px; }

  .branch-cards {
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
  }

  .branch-card {
    padding: 16px;
    gap: 16px;
  }

  .branch-card h3 { font-size: 14px; }

  .branch-card .address { font-size: 11px; }

  .branch-card .rating { font-size: 14px; }

  /* FAQ */

  .faq { padding: var(--space-xl) 0; }

  .faq > .container { gap: 36px; }

  .faq-content { gap: 40px; }

  .faq-list { gap: 20px; }

  .faq-question {
    min-height: auto;
    padding: 24px 20px;
    font-size: 16px;
  }

  .faq-question .toggle { font-size: 36px; }

  .contact-cta-block { margin-top: 52px; }

  .contact-cta-block h3 { font-size: 20px; }

  .contact-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
  }

  /* Kokkuost sections */

  .section-heading h2,
  .faq h2 { font-size: 28px; }

  .hero-subline { font-size: 16px; }

  .price-flow-section,
  .prep,
  .categories,
  .cat-deep { padding: 60px 0; }

  .price-flow-section > .container,
  .prep > .container,
  .categories > .container,
  .cat-deep > .container { gap: 40px; }

  .prep-item { padding: 32px; gap: 16px; }

  .prep-item__title { font-size: 20px; }

  .price-flow__card { padding: 40px 20px; gap: 20px; }

  .price-flow__mark { width: 30px; height: 30px; top: 14px; left: 16px; }

  .price-flow__card--bad .price-flow__mark { width: 24px; height: 24px; top: 17px; left: 19px; }

  .price-flow__logo { width: 110px; height: 44px; }

  .price-flow__title { font-size: 32px; }

  .price-flow__label { min-height: 44px; font-size: 15px; }

  .price-flow__badges { gap: 10px; }

  /* Long badges must wrap on narrow phones, so the desktop cap-height
     line-box trick (which can't survive a second line) is lifted here */
  .price-flow__badges li { font-size: 13px; padding: 6px 10px; line-height: 1.35; white-space: normal; }

  .category-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .category-tile { padding: 20px 10px; gap: 10px; border-radius: 14px; }

  .category-tile__icon { width: 56px; height: 56px; }

  .category-tile__name { font-size: 16px; }

  .cat-deep-bento {
    grid-template-columns: 1fr;
    max-width: 600px;
    gap: 14px;
  }

  .cat-deep-card { padding: 24px; border-radius: 18px; }

  .cat-deep-card__head h3 { font-size: 20px; }

  .cat-deep-card__icon { width: 48px; height: 48px; }

  .why-cta { margin-top: 8px; }

  .why-cta p { font-size: 16px; }
}

/* --- Mobile phones ≤480px --- */

@media (max-width: 480px) {
  .hero { padding: 16px 20px; }

  .hero-inner.container {
    padding: 28px 20px;
    gap: 28px;
  }

  h1 { font-size: 36px; }

  .hero-content { gap: 28px; }

  .hero-top { gap: 24px; }

  .btn {
    font-size: 15px;
    min-height: 44px;
    padding: 8px 16px;
  }

  /* The hero pill itself is sized with the sticky-bar pill in the shared
     ≤480 rule near .sticky-cta; width comes from the full-width rule below */
  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }

  /* Unlike the gold landing there is no separate .hero-hands mobile
     composition – keep the main hero image, just smaller */

  .hero-image img { max-height: 240px; }

  .sell-process { padding: 56px 0; }

  .sell-process .container { gap: 32px; }

  .steps-grid { gap: 32px; }

  .step-top { gap: 14px; }

  .step-header { gap: 10px; }

  .step-top h3 { font-size: 18px; }

  .sell-step { gap: 20px; }

  .sell-step .step-top { gap: 8px; }

  /* Must repeat the ≤768 value AFTER .steps-grid{gap:32px} above – same
     specificity, so source order decides which gap the sell grid gets */
  .sell-steps { gap: 48px; }

  .sell-step .step-top h3 { font-size: 20px; }

  .btn-icon {
    font-size: 14px;
    gap: 8px;
  }

  /* Full-width buttons on mobile */

  .btn-primary,
  .btn-secondary {
    align-self: stretch;
    width: 100%;
  }

  .sell-video-card {
    padding: 24px 16px;
    gap: 20px;
  }

  /* Reputation & branches */

  .why-choose { padding: 56px 0; }

  .reputation-block { gap: 40px; }

  .reputation-content { gap: 32px; }

  .stat-icon { width: 100px; }

  .stat-numbers .number { font-size: 36px; }

  .stat-numbers .label { font-size: 16px; }

  .branch-card {
    padding: 14px;
    gap: 12px;
  }

  .branch-cards { gap: 12px; }

  /* FAQ */

  .faq { padding: 56px 0; }

  .faq-content { gap: 36px; }

  .faq-question {
    min-height: auto;
    padding: 20px 16px;
    font-size: 17px;
  }

  .faq-question .toggle {
    font-size: 28px;
    margin-left: 12px;
  }

  .faq-answer > p { font-size: 16px; }

  .faq-item.open .faq-answer > p { padding: 8px 16px 20px; }

  .contact-cta-block {
    margin-top: 40px;
    align-self: stretch;
  }

  .contact-cta-block h3 { font-size: 18px; }

  .contact-buttons {
    max-width: none;
  }

  .contact-buttons .btn {
    font-size: 15px;
    width: 100%;
  }

  /* Kokkuost sections */

  .category-grid { grid-template-columns: repeat(2, 1fr); }
}