/* wearfits.me — public site styles.
   1) Landing ("Kampania"), the only home page. Archivo variable (wdth 62–125, wght 300–800); headlines condensed (62%) 800
      uppercase; ground #EDEAE4, ink #111, 2px rules, no radius, no shadows.
      Brand accent #00edc9: very sparse, teal on black only (1.25:1 on ground, 12.55:1 on ink); placements in project/design/DESIGN-NOTES.md.
      Desktop layout ≥ 900px; below that the mobile layout (390 reference), except #how and the H1, which stay desktop-like from 700px.
   2) Site additions: reset, skip link, guides grid, article template (.ar-*), size tool (.st-*), 404.
   Every page puts class="lp" on <body>; see site/README.md for the class reference. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-skip {
  position: absolute; left: 8px; top: -100px; z-index: 30; /* above the sticky home header */ padding: 12px 16px;
  background: var(--lp-ink); color: var(--lp-ground); font-weight: 700; text-decoration: none;
}
.lp .lp-skip:focus { top: 8px; color: var(--lp-ground); }

.lp {
  --lp-ground: #EDEAE4;
  --lp-ink: #111;
  --lp-muted: #3B3935;
  --lp-muted-dark: #BDB7AD;
  --lp-brand: #00edc9;     /* text and marks on ink only: 12.55:1, never on ground/white (1.25:1). Ink text on a brand fill is fine. */
  --lp-gutter: clamp(16px, 3vw, 40px);
  --lp-gap: clamp(64px, 8vw, 128px);
  font-family: Archivo, system-ui, sans-serif;
  font-stretch: 100%;
  font-size: 17px;
  line-height: 1.5;
  color: var(--lp-ink);
  background: var(--lp-ground);
  overflow-x: clip;
}
.lp p, .lp ul, .lp ol, .lp dl, .lp dd, .lp figure { margin: 0; }
.lp ul, .lp ol { list-style: none; padding: 0; }
.lp h1, .lp h2, .lp h3 { margin: 0; }
.lp img { display: block; width: 100%; height: auto; max-width: none; object-fit: cover; }
.lp a { color: inherit; }
.lp a:hover { opacity: 0.75; }
::selection { background: var(--lp-brand); color: var(--lp-ink); }
.lp :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.lp [tabindex="-1"]:focus { outline: none; }
.lp [id] { scroll-margin-top: 16px; }
.lp-top { object-position: 50% 0; }
.lp-pad { padding-left: var(--lp-gutter); padding-right: var(--lp-gutter); }
.lp-muted { color: var(--lp-muted); }
.lp-light { font-weight: 400; }
.lp-only-m { display: none !important; }

/* headline type */
.lp-h1, .lp-h2, .lp-hero-in-title, .lp-hero-out figcaption, .lp-hero-hook,
.lp-step-n, .lp-plan-price, .lp-card-plus {
  font-stretch: 62%; font-weight: 800; text-transform: uppercase;
}
.lp-h1 {
  /* one line, filling the gutter-to-gutter width (divisor = text width in em, plus a scrollbar margin) */
  font-size: min(calc((100vw - 2 * var(--lp-gutter)) / 7.3), 260px); line-height: 0.8; letter-spacing: -0.01em; padding-top: 12px; white-space: nowrap;
}
.lp-h2 { font-size: clamp(52px, 6.4vw, 104px); line-height: 0.88; }
.lp-sec { padding-top: var(--lp-gap); }

/* buttons */
.lp-btn {
  display: block; text-align: center; text-decoration: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 18px; border: 0; background: var(--lp-ink); color: var(--lp-ground);
}
.lp a.lp-btn { color: var(--lp-ground); }
.lp a.lp-btn-line { padding: 16px; border: 2px solid var(--lp-ink); background: transparent; color: var(--lp-ink); }
.lp a.lp-btn-light { background: var(--lp-ground); color: var(--lp-ink); }
/* Solid black buttons only; opacity reset so the generic link hover doesn't wash out the colour. */
@media (hover: hover) {
  .lp .lp-btn:not(.lp-btn-line, .lp-btn-light):hover { background: var(--lp-brand); color: var(--lp-ink); opacity: 1; }
  .lp .lp-head-cta:hover { background: var(--lp-ground); color: var(--lp-ink); opacity: 1; }
}

/* header */
.lp-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px;
  padding: 8px var(--lp-gutter); background: var(--lp-ink); color: var(--lp-ground);
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.lp-head a { text-decoration: none; }
/* Logos are outlined SVGs; font-size still sets their scale: em heights match the type they replaced. */
.lp-logo { display: block; flex: none; font-size: 30px; }
.lp .lp-logo img { width: auto; height: 0.714em; }
.lp-nav { display: flex; flex-wrap: wrap; gap: 0 28px; }
.lp-nav a { padding: 14px 0; }
.lp-head-actions { display: flex; gap: 0 24px; align-items: center; }
/* Every header control is 44 px tall; only the CTA is a filled box. */
.lp-head-actions > a { display: inline-flex; align-items: center; height: 44px; white-space: nowrap; }
.lp .lp-head-cta { gap: 8px; padding: 0 18px; background: var(--lp-brand); color: var(--lp-ink); font-weight: 700; }
.lp .lp-head-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; background: var(--lp-ink); color: var(--lp-brand); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lp .lp-head-cta:focus-visible { outline-color: var(--lp-brand); } /* the outline sits on the black bar, where currentColor ink would vanish */
.lp-burger { display: none; }
/* The longer Polish labels must still fit one bar just above the mobile breakpoint. */
@media (min-width: 900px) and (max-width: 1099px) {
  .lp-head { gap: 4px 16px; font-size: 12px; letter-spacing: 0.02em; }
  .lp-nav { gap: 0 14px; }
  .lp-head-actions { gap: 0 12px; }
  .lp .lp-head-cta { padding: 0 10px; }
}
/* language switch: globe button + black panel, joined with no gap so hover survives the trip into it */
.lp-lang { position: relative; display: inline-flex; flex: none; }
.lp .lp-lang-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--lp-ground); cursor: pointer;
}
.lp .lp-lang.is-open .lp-lang-btn { background: var(--lp-ground); color: var(--lp-ink); }
.lp-lang-panel {
  display: none; position: absolute; top: 100%; left: 0; z-index: 8; width: 130px;
  flex-direction: column; border: 1px solid var(--lp-ground); background: var(--lp-ink);
}
.lp-lang-up .lp-lang-panel { top: auto; bottom: 100%; left: auto; right: 0; }
.lp-lang.is-open .lp-lang-panel,
.lp-lang:not([data-ready]):hover .lp-lang-panel,
.lp-lang:not([data-ready]):focus-within .lp-lang-panel { display: flex; } /* the two :not rules are the no-JavaScript route */
.lp .lp-lang-opt {
  appearance: none; display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 12px 10px;
  border: 0; border-radius: 0; background: transparent; color: var(--lp-ground); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; cursor: pointer;
}
.lp .lp-lang-opt + .lp-lang-opt { border-top: 1px solid #4A4741; }
.lp .lp-lang-opt[aria-current] { color: var(--lp-brand); }
.lp-lang-opt span:last-child { font-weight: 400; letter-spacing: 0; text-transform: none; }
.lp .lp-lang-opt:hover { opacity: 1; background: #2A2825; }
.lp .lp-lang :focus-visible { outline: 2px solid var(--lp-ground); outline-offset: 2px; }
.lp-lang-seg { display: none; }
html[data-locale-pending="pl"] body { visibility: hidden; }

/* hero */
/* Home H1 on the ground band under the black header; last word on a brand marker. The hero below joins it directly under a rule at every breakpoint (specificity beats the media queries). */
.lp-h1-band { padding-bottom: 14px; }
.lp-h1-accent { display: inline-block; padding: 0.06em 0.08em 0.02em; background: var(--lp-brand); line-height: 0.8; }
.lp-h1-band + .lp-hero { margin-top: 0; }
.lp-hero {
  margin-top: clamp(16px, 2vw, 28px); display: grid; gap: 2px;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 33vw, 500px) minmax(0, 1.2fr);
  background: var(--lp-ink); border-top: 2px solid var(--lp-ink); border-bottom: 2px solid var(--lp-ink);
}
.lp-hero-in { min-width: 0; background: #fff; display: flex; flex-direction: column; }
.lp-hero-in > img { aspect-ratio: 1; }
.lp-hero-links {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; align-items: stretch;
  background: var(--lp-ink); border-top: 2px solid var(--lp-ink);
}
.lp-hero-links-title {
  display: flex; align-items: center; justify-content: center; padding: 8px; background: var(--lp-ground); text-align: center;
  font-size: clamp(22px, 2.2vw, 32px); line-height: 0.95; font-stretch: 62%; font-weight: 800; text-transform: uppercase;
}
.lp-hero-in figcaption {
  flex: 1 1 auto; background: var(--lp-ground); padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.lp-hero-in-title { font-size: clamp(40px, 4.4vw, 56px); line-height: 0.9; }
.lp-hero-in-note { font-size: 15px; color: var(--lp-muted); }
.lp-hero-out { position: relative; min-width: 0; background: #fff; display: flex; flex-direction: column; }
.lp-hero-out > img { aspect-ratio: 768 / 1376; }
.lp-hero-out figcaption {
  margin-top: auto; background: var(--lp-ink); color: var(--lp-ground);
  padding: 12px 16px; font-size: 40px; line-height: 1;
}
.lp-inset { display: none; }
.lp-hero-panel {
  min-width: 0; background: var(--lp-ink); color: var(--lp-ground); padding: clamp(24px, 3vw, 48px);
  display: flex; flex-direction: column; gap: 32px;
}
.lp-hero-lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.45; }
.lp-hero-hook { font-size: clamp(32px, 3.4vw, 44px); line-height: 0.95; }
.lp .lp-hero-hook { margin-top: auto; }
.lp-form { display: flex; flex-direction: column; gap: 10px; }
.lp-form label, .lp-eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-muted-dark);
}
.lp-form input {
  height: 56px; padding: 0 16px; border: 1px solid var(--lp-ground); border-radius: 0;
  background: transparent; color: var(--lp-ground); font: inherit; font-size: 17px; min-width: 0;
}
.lp-form input::placeholder { color: var(--lp-muted-dark); }
.lp-form input[aria-invalid="true"] { border-width: 2px; }
.lp-form button {
  height: 56px; border: 0; background: var(--lp-ground); color: var(--lp-ink); cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.lp-form-error { font-size: 15px; font-weight: 600; color: var(--lp-ground); border-left: 4px solid var(--lp-ground); padding-left: 10px; }
.lp-form.drag-over { outline: 3px dashed var(--lp-ground); outline-offset: 6px; }
.lp-form button.lp-form-pick { height: auto; padding: 0; background: none; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; text-decoration: underline; }
.lp-hero-panel .lp-form button:not(.lp-form-pick) { background: var(--lp-brand); color: var(--lp-ink); }
.lp-form-note { font-size: 14px; color: var(--lp-muted-dark); }
.lp a.lp-form-more { font-size: 14px; color: var(--lp-muted-dark); padding: 4px 0; align-self: flex-start; }

/* from selfie to studio shot: selfie + product tiles → studio shot */
.lp .lp-eq-title { margin-bottom: 40px; }
.lp .lp-eq-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  padding-left: var(--lp-gutter); padding-right: var(--lp-gutter);
}
.lp-eq-item { min-width: 0; display: flex; flex-direction: column; border: 2px solid var(--lp-ink); background: #fff; }
.lp-eq-sum {
  flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(0, 3fr); gap: 6px;
  align-items: start; padding: clamp(8px, 1vw, 14px);
}
.lp-eq-in, .lp-eq-out { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lp-eq-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-muted); }
.lp-eq-op { font-size: 28px; font-weight: 800; line-height: 1; text-align: center; color: var(--lp-ink); }
.lp-eq-arrow { align-self: center; }
.lp-eq-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lp-eq-tiles img, .lp-hero-links img, .lp-inset-tiles img, .lp-looks .lp-looks-tile { aspect-ratio: 3 / 4; background: #F4F3F0; }
.lp-eq-in > img { aspect-ratio: 1; }
.lp .lp-eq-tiles img:nth-child(3):last-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; object-position: 50% 78%; }
.lp-eq-out img { aspect-ratio: 768 / 1376; }
.lp .lp-eq-cap { border-top: 2px solid var(--lp-ink); padding: 10px 14px; background: var(--lp-ground); font-size: 15px; line-height: 1.35; }
.lp .lp-eq-note { margin-top: 16px; font-size: 14px; color: var(--lp-muted); }

/* steps: three columns with a capped media height (no section height, no subgrid), caption in normal flow.
   Heading to note fits the viewport at 1440x900, 1366x768 and 1024x768, and from 700px wide at 768x1024 and 820x1180;
   much shorter windows scroll. The second min() term keeps the figure no wider than its column. */
.lp .lp-how {
  --lp-how-media: min(clamp(300px, calc(100vh - 340px), 560px), calc((100vw - 2 * var(--lp-gutter) - 32px) / 3 * 1.79));
  margin-top: calc(var(--lp-gap) - 24px); padding-top: 24px; padding-bottom: 16px;
}
.lp .lp-how-title { font-size: clamp(48px, 5.6vw, 88px); margin-bottom: 20px; white-space: nowrap; }
.lp-steps { display: grid; gap: 0 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1360px; }
.lp-step { min-width: 0; }
.lp-step-media { height: var(--lp-how-media); }
.lp-step-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--lp-ink); line-height: 1.3; }
/* step 1, a mini product page: address bar, the whole product photo filling the middle, name and shop */
.lp-step-bar {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--lp-ground); border-bottom: 1px solid var(--lp-ink);
  font-size: 12px; color: var(--lp-muted); white-space: nowrap; overflow: hidden;
}
.lp-step-bar::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: 22px; border-radius: 50%; background: var(--lp-muted); box-shadow: 10px 0 var(--lp-muted), 20px 0 var(--lp-muted); }
.lp-step-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lp .lp-step-photo { flex: 1 1 0; min-height: 0; object-fit: contain; }
.lp-step-meta { display: block; padding: 6px 10px 8px; font-size: 13px; font-weight: 600; }
.lp-step-meta small { display: block; font-size: 12px; font-weight: 400; color: var(--lp-muted); }
/* step 2, the paste action: the field centred as the focal point, the selfie a small first-time aside at the bottom */
.lp-step-paste { margin-block: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.lp-step-label { font-size: 13px; font-weight: 600; }
.lp-step-field { width: 100%; min-width: 0; padding: 16px 10px; border: 2px solid var(--lp-ink); border-radius: 0; background: #fff; color: var(--lp-ink); font: inherit; font-size: 15px; font-weight: 600; }
.lp-step-field::placeholder { color: var(--lp-muted); }
.lp-step-field:focus::placeholder { color: transparent; }
.lp-step-go { padding: 16px 10px; border: 0; background: var(--lp-ink); color: var(--lp-ground); font: inherit; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.lp-step-choose { align-self: flex-start; border: 0; padding: 4px 0; background: none; color: var(--lp-ink); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.lp-step-paste .lp-form-error { margin: 0; color: var(--lp-ink); border-color: var(--lp-ink); font-size: 13px; }
.lp-step-paste .lp-form-pick { border: 0; background: none; color: inherit; font: inherit; padding: 0; text-decoration: underline; cursor: pointer; }
.lp-step-paste .lp-form-photo-hint { color: var(--lp-muted); font-size: 12px; }
.lp-step-paste.drag-over { outline: 3px dashed var(--lp-ink); outline-offset: -4px; }
.lp-step-once { display: flex; align-items: center; gap: 8px; padding: 0 12px 12px; font-size: 12px; color: var(--lp-muted); }
.lp .lp-step-selfie { flex: none; width: 56px; aspect-ratio: 1; }
/* step 3, the payoff: the column's full width like steps 1 and 2. The source is square with the figure centred, so the height keeps head to toe and only spare backdrop goes. */
/* The wide image has about 4% spare below the shoes; capping width by height keeps cover from cropping the person in short windows. */
.lp .lp-step-whole { width: min(100%, calc(var(--lp-how-media) * 1.04)); height: 100%; object-fit: cover; object-position: 50% 50%; }
.lp-step-body { padding-top: 12px; display: flex; gap: 16px; align-items: flex-start; }
.lp-step-n { font-size: 64px; line-height: 0.8; }
.lp-step h3 { font-size: 20px; font-weight: 700; text-transform: uppercase; }
.lp-step p { margin-top: 4px; color: var(--lp-muted); line-height: 1.4; }
.lp .lp-how-note { margin-top: 10px; max-width: 1360px; font-size: 14px; color: var(--lp-muted); }
.lp-card-meta {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px;
  background: var(--lp-ground); color: var(--lp-ink);
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}

/* looks */
.lp-looks {
  display: grid; grid-template-columns: clamp(300px, 34vw, 520px) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto; column-gap: clamp(32px, 4vw, 64px); row-gap: 32px;
}
.lp-looks-fig { grid-column: 1; grid-row: 1 / -1; align-self: start; width: 100%; background: #fff; }
.lp-looks-fig img { aspect-ratio: 768 / 1376; }
.lp-looks > :not(.lp-looks-fig) { grid-column: 2; }
.lp-looks-lead { font-size: 19px; max-width: 30em; }
.lp-looks-list { border: 2px solid var(--lp-ink); align-self: end; }
.lp-looks-cta { align-self: end; }
.lp-looks-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 2px solid var(--lp-ink); }
.lp .lp-looks-tile { flex: 0 0 48px; width: 48px; }
.lp-looks-name { flex: 1 1 auto; min-width: 0; }
.lp-looks-list li > span:last-child { white-space: nowrap; }
.lp-looks-list li:last-child { border-bottom: 0; }
.lp-looks-sum { background: var(--lp-ink); color: var(--lp-ground); font-weight: 700; text-transform: uppercase; }

/* bag */
.lp-split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 32px; }
.lp-bag-lead { font-size: 18px; max-width: 26em; }
.lp-bag-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
  padding-left: var(--lp-gutter); padding-right: var(--lp-gutter);
}
.lp-card { background: #fff; }
.lp-card img { aspect-ratio: 3 / 4; }
.lp-card-meta { padding: 14px 16px; font-weight: 600; }
.lp-card-meta a { text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 2px; align-self: center; }
.lp-card-add {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px;
  min-height: 320px; border: 2px dashed var(--lp-ink); padding: 24px; text-align: center; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.lp-card-plus { font-size: 72px; line-height: 0.8; }

/* comparison */
.lp-cmp-title { margin-bottom: 32px; }
.lp-cmp-table { border: 2px solid var(--lp-ink); }
.lp-cmp-table table { width: 100%; border-collapse: collapse; font-size: 18px; }
.lp-cmp-table th {
  text-align: left; padding: 14px 16px; width: 50%;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.lp-cmp-table th + th { background: var(--lp-ink); color: var(--lp-ground); }
.lp-cmp-table td { padding: 18px 16px; border-top: 2px solid var(--lp-ink); color: var(--lp-muted); vertical-align: top; }
.lp-cmp-table td + td { font-weight: 700; color: var(--lp-ink); }
.lp-cmp-pairs { display: none; }

/* pricing */
.lp-pricing { padding-bottom: var(--lp-gap); }
.lp-pricing .lp-muted { font-size: 15px; }
.lp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.lp-plan { border: 2px solid var(--lp-ink); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.lp-plan-dark { background: var(--lp-ink); color: var(--lp-ground); }
.lp-plan-name { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lp-plan-price { font-size: 88px; line-height: 0.95; text-transform: none; }
.lp-plan-price small { font-stretch: 100%; font-weight: 500; font-size: 20px; text-transform: none; }
.lp-plan-desc { color: var(--lp-muted); }
.lp-plan-dark .lp-plan-price { color: var(--lp-brand); }
.lp-plan-dark .lp-plan-desc { color: var(--lp-muted-dark); }
.lp-plan .lp-btn { margin-top: auto; }
.lp-plan-desc:not(:last-child) { margin-bottom: 16px; }
.lp-plan .lp-soon { align-self: flex-start; margin-bottom: 4px; }
.lp-pricing .lp-plans-note { margin-top: 16px; }

/* privacy */
.lp-privacy { background: var(--lp-ink); color: var(--lp-ground); padding-top: var(--lp-gap); padding-bottom: var(--lp-gap); }
.lp-privacy-title { font-size: clamp(60px, 9.4vw, 156px); line-height: 0.84; }
.lp-privacy ul { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 32px; font-size: 18px; }
.lp-privacy li { border-top: 2px solid var(--lp-ground); padding-top: 16px; }

/* your turn + footer */
.lp-turn {
  padding-top: var(--lp-gap); padding-bottom: var(--lp-gap);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px;
}
.lp-turn-title { font-size: clamp(64px, 10vw, 168px); line-height: 0.82; }
.lp .lp-turn-cta { font-size: 15px; padding: 22px 36px; }
.lp a.lp-turn-cta { color: var(--lp-brand); }
.lp a.lp-turn-cta:focus-visible { outline-color: var(--lp-ink); } /* the outline sits on ground, where currentColor teal would vanish */
/* large footer: full-bleed black; the wordmark is the outlined logo, so no web font and no overflow at any width */
.lp-foot {
  display: flex; flex-direction: column; gap: 48px; padding-top: 56px; padding-bottom: 28px;
  background: var(--lp-ink); color: var(--lp-ground);
}
.lp-foot :focus-visible { outline-color: var(--lp-ground); }
.lp-foot a { text-decoration: none; }
.lp .lp-foot a:hover { color: var(--lp-brand); opacity: 1; }
.lp-foot-top { display: grid; grid-template-columns: minmax(0, 320px) repeat(3, minmax(0, 1fr)); gap: 32px; }
.lp-foot-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.lp .lp-foot-lead { margin: 0; font-size: 18px; line-height: 1.4; }
.lp .lp-foot a.lp-foot-cta { padding: 16px 18px; background: var(--lp-brand); color: var(--lp-ink); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lp .lp-foot a.lp-foot-cta:hover { color: var(--lp-ink); opacity: 0.85; }
.lp-foot nav { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lp-foot h2 { margin: 0 0 6px; color: var(--lp-muted-dark); font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; }
.lp-foot nav a { font-size: 15px; line-height: 1.3; }
.lp-foot-bottom { display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding-top: 18px; border-top: 1px solid #4A4741; color: var(--lp-muted-dark); font-size: 13px; }
.lp-foot-bottom > .lp-foot-copyright { margin-right: auto; }
.lp-foot-lang:empty { display: none; }

/* ---------- mobile (< 900px) — C-Mobile ---------- */
@media (max-width: 899px) {
  .lp { --lp-gutter: 16px; --lp-gap: 56px; }
  .lp-only-d { display: none !important; }
  .lp-only-m { display: revert !important; }
  .lp [id] { scroll-margin-top: 72px; }

  .lp-head {
    position: sticky; top: 0; z-index: 6; flex-wrap: nowrap; gap: 8px;
    height: 60px; padding: 0 8px 0 16px;
  }
  .lp-logo { font-size: 28px; }
  .lp-head-actions { gap: 4px; }
  .lp .lp-head-cta { padding: 0 14px; }
  .lp-head-actions .lp-lang { display: none; }
  .lp-burger {
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border: 0; background: transparent; color: var(--lp-ground); cursor: pointer; padding: 0;
  }
  .lp-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; padding: 0 16px 8px;
    background: var(--lp-ink); border-top: 1px solid #4A4741;
  }
  .lp-head.is-open .lp-nav { display: flex; }
  .lp-nav a { display: block; padding: 14px 0; font-size: 15px; border-top: 1px solid #4A4741; }
  .lp-nav a:first-child { border-top: 0; }
  .lp-lang-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0 6px; border: 1px solid var(--lp-ground); }
  .lp .lp-nav .lp-lang-seg > * {
    appearance: none; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0; border: 0; border-radius: 0;
    background: transparent; color: var(--lp-ground); font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; cursor: pointer;
  }
  .lp .lp-nav .lp-lang-seg > [aria-current] { background: var(--lp-ground); color: var(--lp-ink); }

  .lp-h1 { font-size: min(76px, 18.5vw); line-height: 0.84; padding-top: 16px; white-space: normal; }
  .lp-h2 { font-size: min(60px, 15.4vw); line-height: 0.86; }

  .lp-hero { margin-top: 20px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .lp-hero-in { display: none; }
  .lp-hero-out { flex: none; }
    .lp-hero-out figcaption { padding: 8px 12px; font-size: 28px; }
  .lp-inset { display: block; position: absolute; right: 8px; top: 8px; width: 96px; padding: 4px 4px 6px; background: var(--lp-ground); }
  .lp-inset > img { aspect-ratio: 1; }
  .lp-inset-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-top: 4px; }
  .lp-inset span { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
  .lp-hero-panel { flex: none; padding: 28px 16px 32px; gap: 24px; }
  .lp-hero-lead { font-size: 19px; }
  .lp-hero-hook { font-size: 40px; line-height: 0.92; }
  .lp-form input { padding: 0 14px; }
  .lp-form button { font-size: 15px; }

  /* horizontal scroll-snap rails */
  .lp-rail {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 16px 8px; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch;
  }
  .lp-rail > * { scroll-snap-align: start; }
  .lp-rail:focus-visible { outline-offset: -2px; }
  .lp-eyebrow { font-size: 12px; }

  .lp .lp-eq-title { margin-bottom: 24px; }
  .lp .lp-eq-grid { display: flex; padding: 0 16px 8px; }
  .lp-eq-item { flex: 0 0 min(326px, calc(100vw - 32px)); }
  .lp-eq-op { font-size: 24px; }

  .lp-looks { display: flex; flex-direction: column; gap: 20px; }
  .lp-looks-title { order: 1; }
  .lp-looks-lead { order: 2; font-size: 17px; }
  .lp-looks-fig { order: 3; }
  .lp-looks-list { order: 4; font-size: 16px; }
  .lp-looks-cta { order: 5; font-size: 15px; align-self: stretch; }
  .lp-looks-list li { gap: 12px; padding: 12px 14px; }

  .lp-bag .lp-split { display: block; margin-bottom: 20px; }
  .lp-bag .lp-h2 { margin-bottom: 12px; }
  .lp-bag-lead { font-size: 17px; }
  .lp-bag-grid { display: flex; }
  .lp-card { flex: 0 0 220px; }
  .lp-card-meta { gap: 8px; padding: 10px 12px; font-size: 13px; }
  .lp-card-add { flex: 0 0 160px; min-height: 0; gap: 8px; padding: 16px; font-size: 13px; }
  .lp-card-plus { font-size: 56px; }

  .lp-cmp-title { font-size: min(52px, 13.3vw); margin-bottom: 20px; }
  .lp-cmp-table { display: none; }
  .lp-cmp-pairs { display: block; border: 2px solid var(--lp-ink); }
  .lp-cmp-pairs > div + div { border-top: 2px solid var(--lp-ink); }
  .lp-cmp-pairs dt { padding: 12px 14px 4px; font-size: 15px; color: var(--lp-muted); }
  .lp-cmp-pairs dd { padding: 4px 14px 14px; font-weight: 700; }
  .lp-cmp-pairs span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

  .lp-pricing { padding-bottom: 0; }
  .lp-pricing .lp-split { display: block; margin-bottom: 20px; }
  .lp-pricing .lp-h2 { margin-bottom: 4px; }
  .lp-plans { display: flex; flex-direction: column; gap: 12px; }
  .lp-plan {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "soon price" "name price" "desc price";
    align-items: center; column-gap: 12px; row-gap: 0; padding: 18px 16px;
  }
  .lp-plan-dark { padding: 20px 18px; }
  .lp-plan-name { grid-area: name; }
  .lp-plan-desc { grid-area: desc; font-size: 15px; }
  .lp-plan-price { grid-area: price; font-size: 56px; line-height: 0.9; }
  .lp-plan-price small { font-size: 16px; }
  .lp-plan-desc:not(:last-child) { margin-bottom: 0; }
  .lp-plan .lp-soon { grid-area: soon; justify-self: start; margin-bottom: 6px; }
  .lp-plan .lp-btn { display: none; }

  .lp-privacy { margin-top: 56px; padding-top: 48px; padding-bottom: 48px; }
  .lp-privacy-title { font-size: min(68px, 17.4vw); }
  .lp-privacy ul { display: block; margin-top: 28px; font-size: 17px; }
  .lp-privacy li { padding: 14px 0; }
  .lp .lp-privacy-link { display: block !important; border-top: 0; padding: 8px 0 0; }
  .lp-privacy-link a { display: inline-block; padding: 12px 0; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

  .lp-turn { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 20px; }
  .lp-turn-title { font-size: min(96px, 24.6vw); }
  .lp .lp-turn-cta { padding: 20px; }

  .lp-foot { gap: 32px; padding-top: 36px; }
  .lp-foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
  .lp-foot-intro { grid-column: 1 / -1; }
  .lp .lp-foot a.lp-foot-cta { display: none; } /* the sticky bar is the phone's CTA */
  .lp .lp-foot-lead { font-size: 17px; }
  .lp-foot nav { gap: 0; }
  .lp-foot h2 { font-size: 12px; }
  .lp-foot nav a { display: flex; align-items: center; min-height: 44px; line-height: 1.25; padding: 6px 0; }
  .lp-foot-bottom { flex-wrap: wrap; gap: 4px 16px; padding-top: 16px; }
  .lp-foot-bottom > a { display: flex; align-items: center; min-height: 44px; }
  /* Without JavaScript a tap can't open the panel: the choices are simply shown. */
  .lp-foot .lp-lang:not([data-ready]) { flex-direction: column; align-items: flex-end; }
  .lp-foot .lp-lang:not([data-ready]) .lp-lang-btn { display: none; }
  .lp-foot .lp-lang:not([data-ready]) .lp-lang-panel { display: flex; position: static; }

  .lp .lp-sticky {
    position: sticky; bottom: 0; z-index: 6; display: flex !important; gap: 8px; align-items: center;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--lp-ground); border-top: 2px solid var(--lp-ink);
  }
  .lp-sticky > span { flex: 1 1 auto; font-size: 14px; line-height: 1.3; }
  .lp-sticky .lp-btn { padding: 16px 20px; white-space: nowrap; }
}

/* ---------- tablet (700-899px): mobile header and hero, one-line H1, three-column #how ---------- */
@media (min-width: 700px) and (max-width: 899px) {
  .lp-h1 .lp-only-m { display: none !important; }
  .lp-h1 { font-size: calc((100vw - 2 * var(--lp-gutter)) / 7.3); line-height: 0.8; white-space: nowrap; }
  .lp-step-field { font-size: 12px; }
}

/* The Polish landing slogan is wider than the English source at the same font size. */
@media (min-width: 700px) {
  html[data-locale="pl"] #main > .lp-pad > .lp-h1 {
    font-size: min(calc((100vw - 2 * var(--lp-gutter)) / 10.7), 260px);
  }
}

/* ---------- phone (< 700px): #how as compact rows, content-sized in px (no vh, so toolbars don't matter).
   Heading to note fits between the sticky header and bottom bar at 390x664, 375x667 and 360x640. ---------- */
@media (max-width: 699px) {
  .lp .lp-how { margin-top: calc(var(--lp-gap) - 8px); padding-top: 8px; padding-bottom: 0; }
  .lp .lp-how-title { font-size: min(44px, calc((100vw - 32px) / 8.8)); margin-bottom: 10px; }
  .lp-steps { display: flex; flex-direction: column; gap: 10px; }
  .lp-step { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 12px; align-items: start; }
  .lp-step-media { height: auto; }
  .lp-step-bar { padding: 2px 4px; font-size: 10px; font-stretch: 75%; }
  .lp-step-bar::before { display: none; }
  .lp-step-meta { display: none; }
  .lp .lp-step-photo { flex: none; aspect-ratio: 4 / 3; }
  /* A working form needs usable controls instead of the illustration's miniature field. */
  .lp-step:has(.lp-step-paste) { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lp-step:has(.lp-step-paste) .lp-step-body { grid-row: 1; }
  .lp-step-paste { gap: 8px; padding: 12px; }
  .lp-step-label { font-size: 13px; }
  .lp-step-field { min-height: 44px; padding: 8px; font-size: 16px; }
  .lp-step-go { min-height: 44px; font-size: 13px; }
  .lp-step-choose { min-height: 44px; font-size: 13px; }
  .lp-step-paste .lp-form-photo-hint { font-size: 12px; line-height: 1.2; }
  .lp-step-once { gap: 4px; padding: 0 4px 4px; font-size: 10px; font-stretch: 75%; line-height: 1.1; }
  .lp .lp-step-selfie { width: 22px; }
  .lp .lp-step-whole { width: 112px; height: 148px; }
  .lp-step-body { padding-top: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; }
  .lp-step-body > div { display: contents; }
  .lp-step-n { font-size: 36px; }
  .lp-step h3 { font-size: 18px; }
  .lp-step p { grid-column: 1 / -1; margin-top: 0; font-size: 14px; line-height: 1.3; }
  .lp .lp-how-note { margin-top: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-rail { scroll-behavior: smooth; }
}

/* "Coming soon" tag above a section heading (the bag). */
.lp-soon {
  display: inline-block; margin-bottom: 16px; padding: 4px 10px; border: 1px solid currentColor; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ======================= site additions ======================= */
main:focus { outline: none; }

/* guides grid (home #guides + article "More guides") */
.lp-guides { padding-top: var(--lp-gap); }
.lp-guides-title { margin-bottom: 32px; }
.lp-guide-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.lp-guide-list a {
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px;
  border: 2px solid var(--lp-ink); text-decoration: none;
}
.lp-guide-list a:hover { opacity: 1; background: var(--lp-ink); color: var(--lp-ground); }
.lp-guide-list a:hover span { color: var(--lp-muted-dark); }
.lp-guide-list b { font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 0.95; }
.lp-guide-list span { color: var(--lp-muted); font-size: 16px; }

/* ---------- article template (.ar-*) ---------- */
.ar-crumbs { padding-top: 20px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ar-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; }
.ar-crumbs li { display: flex; align-items: center; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.ar-crumbs li + li::before { content: "›"; flex: none; padding: 0 10px; color: var(--lp-muted); }
.ar-crumbs a { text-decoration: none; display: inline-block; padding: 8px 0; }
.ar-crumbs [aria-current] { color: var(--lp-muted); }

.ar { font-size: 18px; line-height: 1.6; }
.ar-head { padding-top: 16px; padding-bottom: 32px; border-bottom: 2px solid var(--lp-ink); }
.ar-h1 {
  font-stretch: 62%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(56px, 8.4vw, 132px); line-height: 0.86; max-width: 14ch; margin: 12px 0 24px;
  overflow-wrap: break-word; hyphens: auto; /* long Polish words must not push a phone page sideways */
}
/* Comparison guides use compact article headings and quiet, single-line breadcrumbs. */
html[data-static-locale] .ar-crumbs {
  padding-top: 16px; color: #6C6962; font-size: 12px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
}
html[data-static-locale] .ar-crumbs ol { flex-wrap: nowrap; align-items: center; min-width: 0; }
html[data-static-locale] .ar-crumbs li { display: block; min-width: 0; white-space: nowrap; }
html[data-static-locale] .ar-crumbs li:not(:last-child) { flex: 0 0 auto; }
html[data-static-locale] .ar-crumbs li:last-child { overflow: hidden; text-overflow: ellipsis; }
html[data-static-locale] .ar-crumbs li + li::before { padding: 0 8px; color: inherit; }
html[data-static-locale] .ar-crumbs a { padding: 2px 0; }
html[data-static-locale] .ar-crumbs a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
html[data-static-locale] .ar-crumbs [aria-current] { color: inherit; }
html[data-static-locale] .ar-head { padding-top: 12px; padding-bottom: 20px; }
html[data-static-locale] .ar-h1 {
  font-size: clamp(32px, 3.6vw, 56px); line-height: 1.06; max-width: 28ch;
  margin: 8px 0 14px; letter-spacing: -0.02em; overflow-wrap: break-word; text-wrap: balance;
}
html[data-static-locale] .ar-top { padding-top: 24px; }
html[data-static-locale] .ar-h2 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.06; }
html[data-static-locale] .ar-related .lp-guides-title { font-size: clamp(30px, 3.5vw, 48px); line-height: 1.06; }
.ar-meta { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp-muted); }

.ar-wrap { max-width: 68ch; }
.ar-top { display: grid; grid-template-columns: minmax(0, 68ch) minmax(220px, 320px); gap: 32px clamp(32px, 5vw, 80px); padding-top: 40px; align-items: start; }
.ar-answer { background: var(--lp-ink); color: var(--lp-ground); padding: 24px clamp(20px, 3vw, 32px); }
.ar-answer h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-muted-dark); margin-bottom: 12px; }
.ar-answer p { font-size: 20px; line-height: 1.5; }
.ar-toc { border: 2px solid var(--lp-ink); padding: 20px; }
.ar-toc h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.ar-toc ol { counter-reset: toc; }
.ar-toc li { counter-increment: toc; border-top: 2px solid var(--lp-ink); }
.ar-toc li:first-child { border-top: 0; }
.ar-toc a { display: flex; gap: 10px; padding: 10px 0; font-size: 16px; line-height: 1.35; text-decoration: none; font-weight: 600; }
.ar-toc a::before { content: counter(toc, decimal-leading-zero); font-weight: 800; font-stretch: 62%; }

.ar-body { padding-top: 16px; }
.ar-body > section { padding-top: 56px; }
.ar-h2 {
  font-stretch: 62%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(40px, 4.4vw, 64px); line-height: 0.9; margin-bottom: 20px;
}
.ar h3 { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.25; margin: 32px 0 8px; }
.lp .ar-prose > * + * { margin-top: 16px; }
.lp .ar-prose > .ar-h2 + * { margin-top: 0; }
.ar-prose ul, .ar-prose ol { padding-left: 1.2em; }
.ar-prose ul { list-style: square; }
.ar-prose ol { list-style: decimal; }
.ar-prose li + li { margin-top: 6px; }
.ar-prose a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ar-prose strong { font-weight: 700; }
.ar-note { border-left: 4px solid var(--lp-ink); padding: 4px 0 4px 16px; color: var(--lp-muted); font-size: 16px; }

/* numbered steps inside an article */
.ar-steps { counter-reset: step; list-style: none !important; padding-left: 0 !important; }
.ar-steps > li { counter-increment: step; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 16px; padding: 20px 0; border-top: 2px solid var(--lp-ink); }
.ar-steps > li + li { margin-top: 0; }
.ar-steps > li::before { content: counter(step); font-stretch: 62%; font-weight: 800; font-size: 64px; line-height: 0.8; }
.ar-steps h3 { margin: 0 0 6px; }

/* figures */
.lp .ar-fig { margin: 32px 0 0; background: #fff; max-width: 440px; }
.ar-fig img { aspect-ratio: 4 / 5; }
.ar-fig figcaption { padding: 10px 14px; background: var(--lp-ground); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* tables: 2px rules, horizontal scroll on narrow screens */
.ar-table { margin-top: 24px; border: 2px solid var(--lp-ink); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ar-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; }
.ar-table th, .ar-table td { text-align: left; padding: 12px 14px; vertical-align: top; }
.ar-table thead th { background: var(--lp-ink); color: var(--lp-ground); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.ar-table tbody tr + tr td, .ar-table tbody tr + tr th { border-top: 2px solid var(--lp-ink); }
.ar-table caption { caption-side: top; text-align: left; padding: 12px 14px; font-weight: 700; border-bottom: 2px solid var(--lp-ink); }

/* inline CTA block (link form → app) */
.ar-cta {
  margin-top: 56px; background: var(--lp-ink); color: var(--lp-ground); padding: clamp(24px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end;
}
.ar-cta-title { font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: clamp(44px, 5vw, 72px); line-height: 0.88; }
.ar-cta-lead { margin-top: 12px; font-size: 18px; line-height: 1.5; color: var(--lp-muted-dark); }

/* FAQ + sources */
.ar-faq dl > div { border-top: 2px solid var(--lp-ink); padding: 20px 0; }
.ar-faq dt { font-size: 20px; font-weight: 700; line-height: 1.3; }
.lp .ar-faq dd { margin-top: 8px; }
.ar-sources ol { list-style: decimal; padding-left: 1.4em; font-size: 16px; }
.ar-sources li + li { margin-top: 6px; }
.ar-sources a { word-break: break-word; }
.ar-related { padding-bottom: var(--lp-gap); }

/* ---------- clothing size tool (.st-*) ---------- */
.st { margin-top: 32px; border: 2px solid var(--lp-ink); background: #fff; padding: clamp(16px, 3vw, 28px); font-size: 16px; line-height: 1.45; }
.st-controls { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 20px; }
.st-seg { display: inline-flex; gap: 2px; background: var(--lp-ink); border: 2px solid var(--lp-ink); }
.st-seg button {
  min-height: 44px; padding: 0 14px; border: 0; background: #fff; color: var(--lp-ink); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.st-seg button[aria-pressed="true"] { background: var(--lp-ink); color: var(--lp-ground); }
.st-fields { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.st-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-field label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.st input, .st select {
  height: 48px; padding: 0 12px; border: 2px solid var(--lp-ink); border-radius: 0; background: #fff; color: var(--lp-ink);
  font: inherit; font-size: 17px; min-width: 0;
}
.st input { width: 9em; }
.st-help { max-width: 30em; color: var(--lp-muted); font-size: 15px; }
.st-out { margin-top: 20px; }
.st-out > p { margin-bottom: 10px; }
.st-error { border-left: 4px solid var(--lp-ink); padding-left: 10px; font-weight: 700; }
.st-note { margin-top: 16px; color: var(--lp-muted); font-size: 14px; }
.st-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-muted); }
.st-match { display: inline-block; padding: 2px 8px; border: 2px solid var(--lp-ink); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.st-match-spot { background: var(--lp-ink); color: var(--lp-ground); }
.st-match-approx { border-style: dashed; }
.st-ref details { border: 2px solid var(--lp-ink); background: #fff; }
.st-ref details + details { margin-top: 12px; }
.st-ref summary { cursor: pointer; padding: 12px 14px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
.st-ref .ar-table { margin-top: 0; border-width: 2px 0 0; }

/* ---------- 404 ---------- */
.lp-404 { padding-bottom: var(--lp-gap); }
.lp-404 p { margin-top: 24px; font-size: 19px; max-width: 34em; }
.lp-404 .lp-btn { display: inline-block; margin-top: 32px; padding: 18px 28px; }

@media (max-width: 899px) {
  .lp-guides-title { margin-bottom: 20px; }
  .lp-guide-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lp-guide-list b { font-size: 26px; }
  .ar { font-size: 17px; }
  .ar-h1 { font-size: min(64px, 16.4vw); margin: 8px 0 16px; }
  .ar-head { padding-bottom: 24px; }
  .ar-top { display: flex; flex-direction: column; gap: 20px; padding-top: 24px; }
  .ar-answer p { font-size: 18px; }
  .ar-toc { width: 100%; }
  .ar-body > section { padding-top: 44px; }
  .ar-h2 { font-size: min(44px, 11.6vw); }
  .ar-steps > li { grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; }
  .ar-steps > li::before { font-size: 48px; }
  .ar-cta { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; margin-left: -16px; margin-right: -16px; }
  .ar-cta-title { font-size: min(48px, 12.8vw); }
  .lp .ar-fig { max-width: none; }
  .st-seg { flex: 1 1 100%; }
  .st-seg button { flex: 1 1 0; padding: 0 8px; }
  .st-ref .st-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-field, .st input, .st select { width: 100%; }
}

/* Visitor-state header (site.js / header-state.js). */
.lp-head-actions > .lp-lang { order: -1; }
html[data-visitor-pending] .lp-head-actions > a, html[data-visitor-pending] [data-state-cta] { visibility: hidden; }
html[data-visitor-pending] :is(.lp-form-note, .lp-sticky > span, .lp-pricing .lp-h2, .lp-plans-note, form.js-link-form button[type=submit], .lp-plan:has(.lp-btn-quiet)) { visibility: hidden; }

@media (max-width: 430px) {
  /* The count chip and the "Get more" label must fit beside the logo and the burger. */
  .lp-head:has(.lp-head-count, .lp-head-cta[data-empty]) { gap: 4px; }
  .lp-head:has(.lp-head-count, .lp-head-cta[data-empty]) .lp-logo { font-size: 23px; }
  .lp .lp-head:has(.lp-head-count, .lp-head-cta[data-empty]) .lp-head-cta { gap: 6px; padding: 0 8px; font-size: 12px; letter-spacing: 0.02em; }
  .lp-burger { flex-shrink: 0; }
}
@media (max-width: 340px) {
  .lp-head:has(.lp-head-count, .lp-head-cta[data-empty]) .lp-logo { font-size: 20px; }
}

@media (max-width: 599px) {
  .lp-foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .lp-foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-foot-intro { grid-column: 1 / -1; }
}

/* ======================= home page (.lp-home): one grid, one rhythm, hero fitted to the viewport ======================= */
.lp-home { --lp-h2: min(44px, calc((100vw - 32px) / 8.8)); }
.lp-home .lp-h2, .lp-home .lp-how-title, .lp-home .lp-cmp-title, .lp-home .lp-privacy-title, .lp-home .lp-turn-title { font-size: var(--lp-h2); line-height: 0.9; }
.lp-home .lp-eq-title, .lp-home .lp-how-title, .lp-home .lp-cmp-title, .lp-home .lp-guides-title, .lp-home .lp-split { margin-bottom: 32px; }
.lp-home .lp-privacy ul { margin-top: 32px; }
.lp-home .lp-card { display: flex; flex-direction: column; }
.lp-home .lp-card-meta { flex: 1 1 auto; }
.lp-home a.lp-form-more { color: var(--lp-muted-dark); }
.lp-home .lp-guide-list b { font-size: 24px; }
.lp-home .lp-guide-list span { font-size: 15px; line-height: 1.35; }
.lp-home .lp-guide-list a { padding: 16px; }

/* 700px up: two columns of guides; five from 1100px, so both rows are full */
@media (min-width: 700px) { .lp-home .lp-guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .lp-home .lp-guide-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

@media (min-width: 900px) {
  .lp-home {
    --lp-gutter: max(40px, calc((100vw - 1200px) / 2));
    --lp-gap: 96px;
    --lp-h2: clamp(48px, 5.6vw, 72px);
    --lp-h1-fs: min(calc((100vw - 2 * var(--lp-gutter)) / 7.3), 260px);
    --lp-hero-h: clamp(480px, calc(100vh - 94px - 0.88 * var(--lp-h1-fs)), 860px);
    --lp-hero-cap: 46px;
  }
  @supports (height: 100svh) {
    .lp-home { --lp-hero-h: clamp(480px, calc(100svh - 94px - 0.88 * var(--lp-h1-fs)), 860px); }
  }
  html[data-locale="pl"] .lp-home { --lp-h1-fs: min(calc((100vw - 2 * var(--lp-gutter)) / 10.7), 260px); }

  .lp-home .lp-hero {
    height: var(--lp-hero-h);
    --lp-hero-shot: min(calc((var(--lp-hero-h) - 4px - var(--lp-hero-cap)) * 0.558), 34vw);
    /* photos run to the page edge; the outer columns grow by a gutter so their text sits on it */
    grid-template-columns: calc(var(--lp-gutter) + (100% - 2 * var(--lp-gutter) - var(--lp-hero-shot) - 4px) / 2.2) var(--lp-hero-shot) minmax(0, 1fr);
  }
  .lp-home .lp-hero > * { min-height: 0; overflow: hidden; }
  /* left: the selfie takes what the tiles and caption leave */
  .lp-home .lp-hero-in > img { flex: 1 1 0; min-height: 0; aspect-ratio: auto; object-position: 50% 8%; }
  .lp-home .lp-hero-links { flex: 0 0 26%; min-height: 0; }
  .lp-home .lp-hero-links img { height: 100%; min-height: 0; aspect-ratio: auto; }
  .lp-home .lp-hero-links { grid-template-columns: calc(var(--lp-gutter) + 90px) repeat(2, minmax(0, 1fr)); }
  .lp-home .lp-hero-links-title { justify-content: center; padding: 8px; text-align: center; }
  .lp-home .lp-hero-in figcaption { flex: none; padding: 14px 16px 14px var(--lp-gutter); gap: 8px; }
  .lp-home .lp-hero-in-title { font-size: clamp(30px, 3.2vw, 44px); }
  .lp-home .lp-hero-in-note { font-size: 14px; line-height: 1.35; }
  /* centre: head to toe, never cropped */
  .lp-home .lp-hero-out > img { flex: 1 1 0; min-height: 0; aspect-ratio: auto; object-fit: contain; }
  .lp-home .lp-hero-out figcaption { flex: none; height: var(--lp-hero-cap); margin: 0; padding: 0 12px; display: flex; align-items: center; font-size: clamp(20px, 1.9vw, 26px); white-space: nowrap; }
  /* right: lead on top, hook at the bottom, the form group centred between them */
  .lp-home .lp-hero-panel { padding: clamp(16px, 2.6vh, 32px) var(--lp-gutter) clamp(16px, 2.6vh, 32px) clamp(20px, 2.4vw, 32px); gap: 12px; }
  .lp-home .lp-hero-panel .lp-form { margin-top: auto; gap: 8px; }
  .lp-home .lp-form-more { margin-bottom: auto; align-self: flex-start; }
  .lp-home .lp-hero-lead { font-size: clamp(16px, 2.2vh, 20px); line-height: 1.35; }
  .lp-home .lp-hero-hook { margin: 0; font-size: clamp(26px, 4.2vh, 44px); }
  .lp-home .lp-hero-panel .lp-form input, .lp-home .lp-hero-panel .lp-form button:not(.lp-form-pick) { height: clamp(44px, 6vh, 56px); }

  /* the same three columns as the examples, bag, plans and steps */
  .lp-home .lp-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
  .lp-home .lp-looks > :not(.lp-looks-fig) { grid-column: 2 / -1; margin-left: 16px; }
  .lp-home .lp-bag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-home .lp-plans { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
/* Short windows: a wide strip would crop the face and tiles, so selfie and tiles sit side by side above the caption. */
@media (min-width: 900px) and (max-height: 820px) {
  .lp-home .lp-hero-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; }
  .lp-home .lp-hero-in > img { height: 100%; object-position: 50% 50%; }
  .lp-home .lp-hero-links { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--lp-ink); }
  .lp-home .lp-hero-links-title { grid-column: 1 / -1; justify-content: center; padding: 8px; text-align: center; }
  .lp-home .lp-hero-links img { object-fit: contain; background: #fff; }
  .lp-home .lp-hero-in figcaption { grid-column: 1 / -1; border-top: 2px solid var(--lp-ink); }
}

@media (max-width: 899px) {
  /* first screen: H1, form, then the shot; the panel's children join the hero's own order */
  .lp-home .lp-h1-band { padding-bottom: 10px; }
  .lp-home .lp-h1 { padding-top: 10px; }
  .lp-home .lp-hero-panel { display: contents; }
  .lp-home .lp-hero-panel .lp-form { order: 1; padding: 12px 16px 12px; gap: 8px; color: var(--lp-ground); }
  .lp-home .lp-hero-panel .lp-form input, .lp-home .lp-hero-panel .lp-form button:not(.lp-form-pick) { height: 50px; }
  .lp-home .lp-hero-out { order: 2; background: var(--lp-ink); }
  .lp-home .lp-hero-out figcaption { padding-left: 16px; padding-right: 16px; }
  .lp-home .lp-hero-out > img { max-height: calc(100vh - 130px); object-fit: contain; }
  .lp-home .lp-hero-lead { order: 3; padding: 24px 16px 0; color: var(--lp-ground); }
  .lp-home a.lp-form-more { order: 4; align-self: flex-start; display: flex; align-items: center; min-height: 44px; margin: 8px 16px 0; padding: 0; }
  .lp-home .lp-hero-hook { order: 5; margin: 12px 16px 28px; color: var(--lp-ground); font-size: 36px; }
  .lp-home .lp-hero-panel .lp-form-photo-hint { display: none; }
  .lp-home .lp-sticky:not(.is-shown) { display: none !important; }

  .lp-home .lp-eq-title, .lp-home .lp-how-title, .lp-home .lp-cmp-title, .lp-home .lp-guides-title, .lp-home .lp-split { margin-bottom: 20px; }
  .lp-home .lp-eq-item { flex-basis: min(326px, calc(100vw - 56px)); }
  .lp-home .lp-privacy { padding-top: var(--lp-gap); padding-bottom: var(--lp-gap); }
  .lp-home .lp-looks-fig { align-self: flex-start; width: min(280px, 72%); }

  /* the plan buttons are the way to a paid pack */
  .lp-home .lp-plan { grid-template-areas: "soon price" "name price" "desc price" "cta cta"; }
  .lp-home .lp-plan .lp-btn { display: block; grid-area: cta; margin-top: 12px; padding: 14px; }
  .lp-home .lp-plan a.lp-btn-line { padding: 12px; }
}
@media (min-width: 500px) and (max-width: 899px) {
  .lp-home .lp-hero-panel .lp-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .lp-home .lp-hero-panel .lp-form > :not(input, button) { grid-column: 1 / -1; }
  .lp-home .lp-hero-panel .lp-form > input { grid-row: 2; }
  .lp-home .lp-hero-panel .lp-form > button { grid-row: 2; padding: 0 20px; }
  .lp-home .lp-hero-panel .lp-form-error { grid-row: 3; }
}
/* phones: guides as a compact list of titles, all links stay in the HTML */
@media (max-width: 699px) {
  .lp-home .lp-guide-list { gap: 0; border-top: 1px solid var(--lp-ink); }
  .lp-home .lp-guide-list a { flex-direction: row; align-items: center; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--lp-ink); }
  .lp-home .lp-guide-list b { font-stretch: 100%; font-size: 15px; font-weight: 700; line-height: 1.25; text-transform: none; }
  .lp-home .lp-guide-list span { display: none; }
}

/* plans: Plus first and featured, as in the app; Free's button is the quiet one */
.lp-plan { position: relative; }
.lp-plan-flag { position: absolute; top: 24px; right: 24px; padding: 4px 10px; border: 1px solid currentColor; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.lp a.lp-btn-quiet { border-width: 1px; border-color: var(--lp-muted); font-weight: 600; }
@media (max-width: 899px) {
  .lp-plan-flag { position: static; grid-area: soon; justify-self: start; margin-bottom: 8px; }
}
.lp-plan-dark .lp-plan-price small { color: var(--lp-muted-dark); }
@media (max-width: 340px) { .lp-home .lp-hero-panel .lp-form-note { font-size: 13px; } }

/* Home header CTA: white while the hero button is on screen, brand once it has gone (.is-cta-main, site.js). */
.lp-home .lp-head-cta { background: #fff; }
.lp-home .lp-head.is-cta-main .lp-head-cta { background: var(--lp-brand); }
.lp-home .lp-head-cta[data-empty] { background: var(--lp-brand); } /* none left: brand in both home states */
@media (hover: hover) {
  .lp-home .lp-head:not(.is-cta-main) .lp-head-cta:hover { background: var(--lp-brand); }
  .lp-home .lp-head:not(.is-cta-main) .lp-head-cta[data-empty]:hover { background: var(--lp-ground); }
  .lp-home .lp-head.is-cta-main .lp-head-cta:hover { background: var(--lp-ground); }
}
@media (prefers-reduced-motion: no-preference) { .lp-home .lp-head-cta { transition: background-color 0.15s; } }

/* Examples: cards share two rows, so bodies and captions match the tallest whatever the text length. */
.lp-home .lp-eq-grid { grid-template-rows: auto auto; row-gap: 0; }
.lp-home .lp-eq-item { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.lp-currency { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.lp-currency select { min-height: 44px; padding: 8px 12px; border: 1px solid currentColor; background: var(--lp-ground); color: inherit; font: inherit; }
@media (max-width: 899px) {
  .lp-home .lp-eq-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(326px, calc(100vw - 56px)); column-gap: 12px; }
}

/* Home: the header stays on screen from 900 px too, so its CTA can take over when the hero's button has gone. Phones already stick. */
@media (min-width: 900px) {
  .lp-home .lp-head { position: sticky; top: 0; z-index: 20; }
  html:has(body.lp-home) { scroll-padding-top: 80px; }
}