/* The guides: /vinted-bot, /vinted-auto-buy, /vinted-sniper, /vinted-alerts.
   They load landing.css for the tokens, buttons, cards, FAQ and closing band,
   and this for a dark top that states the page's one idea and a reading column
   for the rest. Written for someone who searched a phrase, so the answer comes
   first and the page is prose, not a poster. */

.guide-top { background: var(--night); }
.guide-top .wrap { padding-block: 16px; display: flex; align-items: center; gap: 24px; }
.guide-top nav { display: flex; gap: 20px; margin-left: auto; font-size: 14px; font-weight: 500; }
.guide-top nav a { color: rgba(255, 255, 255, .75); white-space: nowrap; }
.guide-top .cta { display: flex; gap: 8px; align-items: center; }

.guide-hero {
  background: radial-gradient(900px 480px at 82% -20%, rgba(188, 210, 176, .15), transparent 62%), var(--night);
  color: #fff;
}
.guide-hero .inner { max-width: 820px; padding: 36px 24px 72px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.crumbs { display: flex; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.crumbs a { color: rgba(255, 255, 255, .75); }
.guide-hero h1 { font-weight: 700; font-size: clamp(36px, 5.6vw, 62px); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.guide-hero h1 em { color: var(--glow); font-style: normal; }
.guide-hero .sub { font-size: 19px; color: rgba(255, 255, 255, .74); max-width: 640px; }
.guide-hero .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.guide-hero .facts { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.guide-hero .facts b { color: var(--second); font-weight: 600; }

/* minmax(0, 1fr) on these grids: an implicit column grows to its widest
   child's min-content, wider than a small phone (see landing.css .section). */
.guide { max-width: 820px; margin: 0 auto; padding: 64px 24px 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; }
.guide h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; margin-bottom: 14px; }
.guide p, .guide li { color: var(--ink-2); font-size: 17px; }
.guide p + p { margin-top: 12px; }
.guide p a, .guide li a { text-decoration: underline; text-underline-offset: 2px; }
.guide ul { padding-left: 22px; margin: 14px 0 0; display: grid; gap: 8px; }
.guide strong { color: var(--ink); }
.guide .features { margin-top: 20px; }
.guide .note { margin-top: 18px; background: var(--accent-bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; font-size: 15px; }
/* landing.css's .note is a one-line mono tag; a guide's is a paragraph (19 Oct 2026:
   every guide's note ran off the page in one unbroken line). */
.guide .note { font-family: inherit; white-space: normal; color: var(--ink-2); }

/* Numbered steps, drawn rather than listed: a reader skims the four bold lines. */
.steps { counter-reset: step; list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.steps li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px 18px 62px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 18px; top: 17px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: var(--accent-bg); color: var(--accent-ink);
}
.steps li b { display: block; color: var(--ink); margin-bottom: 2px; }

.guide-faq { max-width: 820px; margin: 0 auto; padding: 64px 24px 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.guide-faq h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; }

.related { max-width: 1160px; margin: 0 auto; padding: 72px 24px 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.related h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; }
.related .features a.feature { color: inherit; transition: border-color .15s, transform .15s; }
.related .features a.feature:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
.related .features a.feature span { font-size: 14px; color: var(--accent-ink); font-weight: 600; }

/* The landing's v11 redesign (1 Oct 2026) renamed its tokens and dropped the
   card styles these pages were built on, so the hero's accent, the cards and the
   notes had gone flat. The guides keep their own names for them here. */
:root {
  --surface: #ffffff; --ink-2: #363a38; --accent: var(--green); --accent-ink: #2c5524;
  --accent-bg: var(--mint); --second: #d9a63c; --glow: var(--lime);
}
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.feature { display: grid; gap: 6px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.feature h3 { font-size: 18px; font-weight: 700; margin: 0; }
.feature p { font-size: 15px; color: var(--ink-2); margin: 0; }

/* Who wrote a guide and when, under its lead. */
.guide-hero .byline { font-size: 13px; color: rgba(255, 255, 255, .5); margin-top: -10px; }

/* Longer guides: sub-heads, numbered lists that are not steps, and tables. */
.guide h3 { font-size: 20px; font-weight: 700; margin: 24px 0 8px; }
.guide ol:not(.steps) { padding-left: 22px; margin: 14px 0 0; display: grid; gap: 8px; }
.guide .table-wrap { overflow-x: auto; margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.guide table { width: 100%; border-collapse: collapse; font-size: 15px; }
.guide th, .guide td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.guide tr:last-child td { border-bottom: 0; }
.guide th { color: var(--ink); font-weight: 600; background: var(--mint-2); white-space: nowrap; }

/* The fee calculator on /vinted-fees: the words are the page's (and so each
   language's), web/js/fee-calc.js only does the sums. */
.calc { margin-top: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: grid; gap: 14px; }
.calc-row { display: grid; gap: 6px; }
.calc-row label { font-weight: 600; color: var(--ink); font-size: 15px; }
.calc-row input, .calc-row select { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line-3); border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
.calc-row input:focus, .calc-row select:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.calc-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.calc-out > div { background: var(--accent-bg); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; }
.calc-out span { font-size: 14px; color: var(--ink-2); }
.calc-out b { font-size: 26px; color: var(--ink); }
.guide .calc-note { font-size: 14px; color: var(--muted); margin: 0; }

@media (max-width: 760px) {
  .guide-top nav { display: none; }
  .guide-top .wrap { gap: 12px; }
  .guide-top .cta { margin-left: auto; }
  .btn-quiet { padding: 8px 4px; white-space: nowrap; }
  .guide-hero .inner { padding: 24px 16px 56px; }
  .guide, .guide-faq, .related { padding-inline: 16px; }
  .crumbs a { display: inline-block; padding-block: 6px; }
}

/* What things sell for on Vinted (/vinted-prices/...): the figures are the
   server's (services/api/price_pages.py), right-aligned so they read down. */
.guide .prices td.num, .guide .prices th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide .prices td b { color: var(--ink); font-weight: 600; }
.guide .prices td small { display: block; font-size: 12px; color: var(--muted); }
.guide .prices sup { color: var(--muted); }
.guide .prices tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--mint-2) 35%, transparent); }
.guide .method { list-style: none; padding: 0; }
.guide .method li { padding-left: 0; }
.guide .method b { color: var(--ink); }