/* ============================================================================
   Flatmir — the poster page (flatmir.com/list/, NS 2026-10-19), after NS's ad:
   a bold question with the brand in amber, the hook underlined, three figure
   cards, then how it works, what the poster gets, agencies, and the button
   again. The site's tokens come from styles.css. One typeface, Montserrat, as
   in the ad: the front page's heading face has no Cyrillic, and a Russian
   heading fell back to a serif beside its Latin words. Light only, as the site is.
   ========================================================================== */

/* styles.css fixes html and body to the window for the app shell; this page scrolls */
body.list-page {
  height: auto; min-height: 100%;
  font-family: Montserrat, var(--body), sans-serif; font-size: 16px; line-height: 1.55;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) max(40px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.list-page main, .lp-head, .lp-foot { max-width: 1080px; margin-inline: auto; }
.list-page h1, .list-page h2, .list-page h3 { font-family: Montserrat, var(--body), sans-serif; color: #2b1b14; margin: 0; }

/* ------------------------------- header -------------------------------- */
.lp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding-top: env(safe-area-inset-top, 0px);
}
.lp-brand { display: inline-flex; align-items: center; min-height: 44px; }
.lp-brand img { display: block; width: auto; height: 34px; }
/* the language switch, in the site's look (landing.css .land-lang) */
.lp-lang {
  appearance: none; -webkit-appearance: none; border: none; min-height: 44px;
  padding: 9px 26px 9px 12px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 14px;
  color: var(--sub); cursor: pointer; transition: background-color .15s, color .15s;
  background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M2.5 4.5l3.5 3.5 3.5-3.5" fill="none" stroke="%236E695E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 10px center / 11px;
}
.lp-lang:hover { background-color: var(--wash); color: var(--ink); }

/* -------------------------------- the hero -------------------------------- */
.lp-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px);
  align-items: center; margin-top: clamp(12px, 3vh, 36px);
}
.lp-hero h1 { font-weight: 800; font-size: clamp(32px, 5vw, 54px); line-height: 1.08; letter-spacing: -.035em; }
.lp-accent { color: var(--accent-2); }
/* the hook, with the ad's amber stroke under it */
.lp-hook {
  display: inline-block; margin: 18px 0 0; padding-bottom: 8px;
  font-family: Montserrat, var(--body), sans-serif; font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25; color: #2b1b14;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 64% 3px;
}
.lp-line { margin: 14px 0 0; max-width: 34em; color: var(--sub); font-size: clamp(16px, 1.6vw, 18px); }
.lp-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; min-height: 52px; padding: 14px 26px;
  border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 700; font-size: 16px;
  box-shadow: var(--sh-1); transition: background-color .15s, transform .15s var(--ease);
}
.lp-cta svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.lp-cta:hover { background: var(--accent-2); }
.lp-cta:active { transform: scale(.98); }
.lp-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lp-note { margin: 10px 0 0; font-size: 13.5px; color: var(--sub); }
.lp-hero__image { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: var(--sh-2); }

/* ------------------------------- the figures ------------------------------- */
.lp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 5vh, 52px); }
.lp-stat {
  display: grid; justify-items: center; gap: 4px; padding: 20px 12px 18px; text-align: center;
  background: #fffaf3; border: 1px solid var(--line); border-radius: 18px;
}
.lp-stat svg { width: 30px; height: 30px; color: var(--accent); }
.lp-stat strong {
  font-family: Montserrat, var(--body), sans-serif; font-weight: 800; font-size: clamp(28px, 4vw, 42px); line-height: 1.05;
  letter-spacing: -.03em; color: var(--accent-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lp-stat span { font-size: 14px; font-weight: 600; color: var(--ink); }
.lp-growing { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--sub); }

/* -------------------------- steps, cards, agencies -------------------------- */
.lp-section { margin-top: clamp(44px, 8vh, 80px); }
.lp-section h2, .lp-agency h2, .lp-final h2 { font-weight: 800; font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -.025em; line-height: 1.15; }
.lp-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-steps li { display: flex; gap: 14px; align-items: flex-start; }
.lp-step__n {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--wash); color: var(--accent-2); font-weight: 800; font-size: 18px;
}
.lp-steps h3, .lp-card h3 { font-size: 18px; font-weight: 700; line-height: 1.25; }
.lp-steps p, .lp-card p { margin: 6px 0 0; color: var(--sub); font-size: 15px; }
.lp-cards { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-card { padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-1); }
.lp-card svg { width: 26px; height: 26px; color: var(--accent); margin-bottom: 10px; }

.lp-agency {
  margin-top: clamp(44px, 8vh, 80px); padding: clamp(24px, 4vw, 40px); border-radius: 26px;
  background: #2b1b14; color: #fff;
}
.lp-agency h2 { color: #fff; }
.lp-agency p { margin: 10px 0 0; max-width: 40em; color: rgba(255,255,255,.82); }
.lp-agency ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-agency li { position: relative; padding-left: 30px; font-weight: 600; }
.lp-agency li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="%23191713" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / 12px;
}

.lp-final { margin-top: clamp(44px, 8vh, 80px); text-align: center; }
.lp-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 14px; }
.lp-foot a { color: var(--sub); }
.lp-foot a:hover { color: var(--ink); }

/* --------------------------------- phones --------------------------------- */
@media (max-width: 860px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); }
  .lp-hero__image { order: -1; border-radius: 18px; }
  .lp-steps, .lp-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .lp-stats { gap: 8px; }
  .lp-stat { padding: 14px 6px 12px; border-radius: 14px; }
  .lp-stat svg { width: 22px; height: 22px; }
  .lp-stat strong { font-size: clamp(20px, 6.4vw, 30px); }
  .lp-stat span { font-size: 12px; line-height: 1.3; }
  .lp-cta { width: 100%; justify-content: center; }
}