/* Sådan virker det (/saadan-virker-det) — the timeline: one listing's journey down a mono clock rail (the check, then the price compared with the same model on DBA and Vinted) beside a sticky phone that shows the result, a five-station sign-up path with miniature screens, an ink band with advice for buying on DBA and Vinted, and one call to action. */

/* 1 · Journey: intro and rail on the left, sticky phone on the right */
.how-journey{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--space-2xl);padding-block:clamp(2rem,1rem + 4vw,4.5rem) var(--section)}
.how-intro__title{font-size:clamp(2.75rem,1.3rem + 5.4vw,5.75rem);line-height:.96;letter-spacing:-.055em;max-width:9em}
.how-intro .lede{margin-top:var(--space-m)}

@media (min-width:1000px){
  .how-journey{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(2.5rem,1rem + 4vw,6rem);row-gap:var(--space-2xl)}
  .how-intro,.how-rail{grid-column:1}
  .how-result{grid-column:2;grid-row:1/span 2;align-self:start;position:sticky;top:calc(var(--header-h) + var(--space-m))}
}

/* 2 · The clock rail ------------------------------------------------------ */
.how-rail__title{font-size:var(--fs-h3);letter-spacing:-.03em}
.how-rail__list{margin-top:var(--space-l)}

/* Phones: the rail runs down the left edge and the time sits above each event.
   From 560px the time gets its own mono column to the left of the rail. */
.how-event{--rail-x:8px;--dot:16px;position:relative;padding:0 0 var(--space-xl) 2.25rem}
.how-event::before{content:"";position:absolute;left:var(--rail-x);top:.9rem;bottom:-.9rem;width:2px;margin-left:-1px;background:var(--ink)}
.how-event:last-child::before{bottom:0;background:linear-gradient(var(--ink),rgba(22,36,71,0))}
.how-event::after{content:"";position:absolute;left:var(--rail-x);top:.3rem;width:var(--dot);height:var(--dot);margin-left:calc(var(--dot) / -2);border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 3px var(--ink)}
.how-event--land{--dot:22px}
.how-event--land::after{top:.05rem;background:var(--blue);box-shadow:0 0 0 4px var(--cream),0 0 0 6px var(--blue)}
.how-event--you::after{background:var(--mint)}

.how-event__time{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--muted);white-space:nowrap}
.how-event--land .how-event__time{color:var(--blue)}
.how-event__body h3{margin-top:.2rem;font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);line-height:1.2}
.how-event__body>p{margin-top:var(--space-2xs);max-width:34em;color:var(--muted)}
.how-event__body h3 .channel{font-size:.86em;letter-spacing:-.02em;color:var(--blue)}

@media (min-width:560px){
  .how-event{--rail-x:calc(7rem + 1.25rem);display:grid;grid-template-columns:7rem minmax(0,1fr);column-gap:2.5rem;padding-left:0}
  .how-event__time{padding-top:.3rem;text-align:right}
  .how-event__body h3{margin-top:0}
}

/* The checks in "Vi tjekker kategorien", then the two market prices and the worked example in "Vi sammenligner prisen" */
.how-rules{list-style:none;display:grid;gap:.45rem;margin:var(--space-s) 0 0;padding:0}
.how-markets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xs);max-width:30rem;margin:var(--space-s) 0 0}
.how-markets>div{padding:.6rem .8rem;border-radius:var(--r-m);background:var(--paper)}
.how-markets dt{font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.how-markets dd{margin:.1rem 0 0;font-size:var(--fs-h4);font-weight:700;letter-spacing:-.015em}
.how-rules li{position:relative;padding-left:1.75rem;line-height:1.45}
.how-rules li::before{content:"";position:absolute;left:.2rem;top:.28em;width:.45rem;height:.8rem;border:solid var(--blue);border-width:0 3px 3px 0;transform:rotate(45deg)}

.how-sieve{margin-top:var(--space-m);padding:var(--space-s) var(--space-s) var(--space-2xs);border-radius:var(--r-m);background:var(--paper)}
.how-sieve__cap{padding-bottom:var(--space-2xs);border-bottom:1px solid var(--line-strong);font-size:var(--fs-sm);font-weight:600;line-height:1.45;color:var(--muted)}
.how-sieve__cap .channel{color:var(--ink)}
.how-sieve__list{list-style:none;margin:0;padding:0;font-size:var(--fs-sm);line-height:1.4}
/* Each example reads like a listing line: title and price, then the verdict */
.how-sieve__list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem var(--space-s);align-items:baseline;padding-block:.65rem;border-bottom:1px solid var(--line)}
.how-sieve__list li:last-child{border-bottom:0}
.how-sieve__title{color:var(--muted)}
.is-in .how-sieve__title{color:var(--ink);font-weight:600}
.how-sieve__price{font-family:var(--font-mono);font-size:.8125rem;text-align:right}
.how-sieve__verdict{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem}
.how-verdict{display:inline-block;min-width:2.6rem;padding:.05rem .45rem;border-radius:var(--r-pill);background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--fs-xs);font-weight:700;text-align:center}
.is-in .how-verdict{background:var(--mint);box-shadow:none}
.how-why{font-size:var(--fs-xs);line-height:1.3;color:var(--muted)}

.how-rail__note{margin-top:var(--space-xs);padding:var(--space-s) var(--space-m);border-left:3px solid var(--mint);background:var(--mint-soft);border-radius:0 var(--r-m) var(--r-m) 0;max-width:40em}
@media (min-width:560px){.how-rail__note{margin-left:calc(7rem + 2.5rem)}}

/* 3 · The result: a phone showing the channel ----------------------------- */
.how-result{width:100%;max-width:372px;margin-inline:auto}
.how-phone{padding:9px;border-radius:48px;background:var(--ink);box-shadow:var(--shadow-mock),inset 0 0 0 1px rgba(255,254,250,.12)}
.how-phone__screen{overflow:hidden;border-radius:39px;background:#1A2242}
.how-phone__status{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:34px;padding:4px 24px 0;color:#E7E9F2;font-size:.8125rem;font-weight:700;font-variant-numeric:tabular-nums}
.how-phone__island{width:84px;height:22px;border-radius:var(--r-pill);background:#0B1128}
.how-phone__battery{justify-self:end;position:relative;width:22px;height:11px;border-radius:3px;box-shadow:inset 0 0 0 1.5px rgba(231,233,242,.6)}
.how-phone__battery::before{content:"";position:absolute;inset:2.5px 6px 2.5px 2.5px;border-radius:1.5px;background:#E7E9F2}
.how-phone__screen .dc{border-radius:0;box-shadow:none;font-size:.875rem}
.how-phone__screen .dc__feed{gap:var(--space-s);padding:var(--space-s) .75rem var(--space-m)}
.how-phone__screen .dc-msg{grid-template-columns:34px minmax(0,1fr);gap:0 .65rem}
.how-phone__screen .dc-avatar{width:34px;height:34px}
.how-phone__screen .dc-embed{padding:.6rem .75rem .7rem}
.how-phone__screen .dc-embed__fields{grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr) minmax(0,1fr)}
/* The typical-price field is a full-width row in Discord (inline: false) */
.how-phone__screen .dc-embed__fields .dc-field--wide{grid-column:1/-1}
.how-phone__screen .dc-embed__image{aspect-ratio:16/10}
.how-phone__screen .dc-embed__image img{height:100%;object-fit:cover}
.how-msg--earlier{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),#000 70%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),#000 70%)}
.how-result .mock-note{max-width:34em;margin-inline:auto;text-align:center}
@media (min-width:1000px){
  .how-result{margin-inline:auto 0}
  .how-result .mock-note{text-align:left;padding-inline:var(--space-s)}
}
/* Short laptop screens: keep the sticky phone inside the viewport */
@media (min-width:1000px) and (max-height:820px){
  .how-phone__screen .dc-embed__image{aspect-ratio:2/1}
  .how-msg--earlier .dc-embed{display:none}
}

/* 4 · The sign-up path: five stations on one line ------------------------- */
.how-path{padding-block:var(--section)}
.how-path__head{max-width:42rem}
.how-path__head .lede{margin-top:var(--space-s)}
.how-stations{list-style:none;margin:var(--space-xl) 0 0;padding:0}
.how-station{position:relative;display:flex;flex-direction:column;padding:0 0 var(--space-xl) 3.25rem}
.how-station::before{content:"";position:absolute;left:1.125rem;top:2.25rem;bottom:0;width:2px;margin-left:-1px;background:var(--ink)}
.how-station:last-child{padding-bottom:0}
.how-station:last-child::before{display:none}
.how-station__no{position:absolute;left:0;top:-.15rem;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 2px var(--ink);font-size:var(--fs-sm);font-weight:700}
.how-station:first-child .how-station__no{background:var(--blue);color:var(--cream);box-shadow:none}
.how-station:last-child .how-station__no{background:var(--mint)}
.how-station h3{font-size:var(--fs-h4);line-height:1.25}
.how-station>p:not(.how-station__no){margin-top:.35rem;max-width:30em;color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
.how-station__visual{width:100%;max-width:17rem;height:17.5rem;margin-top:var(--space-m)}

@media (min-width:640px) and (max-width:1179px){
  .how-station{display:grid;grid-template-columns:minmax(0,24rem) minmax(0,17rem);grid-template-rows:auto 1fr;column-gap:var(--space-2xl);align-items:start}
  .how-station h3,.how-station>p:not(.how-station__no){grid-column:1}
  .how-station__visual{grid-column:2;grid-row:1/span 2;margin-top:0}
}
@media (min-width:1180px){
  .how-stations{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-m)}
  .how-stations::before{content:"";position:absolute;left:0;right:0;top:1.125rem;height:2px;margin-top:-1px;background:var(--ink)}
  .how-station{padding:3.5rem 0 0}
  .how-station::before{display:none}
  .how-station__no{top:0}
  .how-station__visual{max-width:none;margin-top:auto;padding-top:var(--space-m);height:calc(17.5rem + var(--space-m))}
}
.how-path__note{margin-top:var(--space-xl);max-width:44em}

/* Miniature screens (decorative; the station text carries the meaning) */
.how-screen{position:relative;height:100%;overflow:hidden;border-radius:var(--r-m);font-size:.75rem;line-height:1.35}
.how-screen.dc{display:block;box-shadow:var(--shadow-float);font-size:.75rem}

/* Station 1: the site's own header and button, in miniature */
.how-site{display:flex;flex-direction:column;gap:.45rem;padding:0 .85rem .9rem;background:var(--cream);color:var(--ink);box-shadow:var(--shadow-float),inset 0 0 0 1px var(--line)}
.how-site__bar{display:flex;align-items:center;gap:.5rem;height:2.6rem;margin:0 -.85rem .5rem;padding:0 .7rem;border-bottom:1px solid var(--line)}
.how-site__logo{width:46px;aspect-ratio:664/194;background:url("/logo.svg") left center/contain no-repeat}
.how-site__menu{flex:1;height:4px;margin-inline:.4rem;background:radial-gradient(circle,rgba(22,36,71,.28) 1.6px,transparent 2px) 0 0/9px 4px repeat-x}
.how-site__pill{padding:.2rem .55rem;border-radius:var(--r-pill);background:var(--blue);color:var(--cream);font-size:.625rem;font-weight:700;white-space:nowrap}
.how-site__h{font-size:1.3125rem;font-weight:700;line-height:1;letter-spacing:-.05em}
.how-site__h span{display:block;color:var(--blue)}
.how-site__line{display:block;height:5px;margin-top:.2rem;border-radius:3px;background:rgba(22,36,71,.14)}
.how-site__line--short{width:62%;margin-top:0}
.how-site__btn{align-self:start;margin-top:auto;padding:.5rem .9rem;border-radius:var(--r-pill);background:var(--blue);color:var(--cream);font-size:.8125rem;font-weight:700;box-shadow:0 0 0 3px var(--cream),0 0 0 5px var(--mint)}
.how-site__fine{font-size:.6875rem;color:var(--muted)}


.how-auth{padding:1.5rem .85rem .85rem;text-align:center}
.how-auth__pair{display:flex;align-items:center;justify-content:center;gap:.45rem}
.how-auth__app,.how-auth__user{width:36px;height:36px;border-radius:50%}
.how-auth__app{background:var(--blue) url("/assets/kupp-avatar.svg") center/cover no-repeat}
.how-auth__user{display:grid;place-items:center;background:var(--mint);color:var(--ink);font-weight:700;font-size:.9375rem}
.how-auth__dots{width:26px;height:4px;background:radial-gradient(circle,var(--dc-muted) 1.6px,transparent 2px) 0 0/8.66px 4px repeat-x}
.how-auth__lead{margin-top:.6rem;font-size:.8125rem;line-height:1.3;color:var(--dc-muted)}
.how-auth__lead strong{color:var(--dc-text)}
.how-auth__scopes{list-style:none;margin:.65rem 0 0;padding:0;border-top:1px solid var(--dc-line);text-align:left}
.how-auth__scopes li{position:relative;padding:.4rem 0 .4rem 1.35rem;border-bottom:1px solid var(--dc-line);color:var(--dc-text)}
.how-auth__scopes li::before{content:"";position:absolute;left:0;top:.5rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--mint)}
.how-auth__scopes li::after{content:"";position:absolute;left:.3rem;top:.66rem;width:.2rem;height:.38rem;border:solid var(--ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.how-auth__btns{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;margin-top:.7rem;color:var(--dc-muted);font-weight:600}
.how-auth__ok{padding:.35rem .8rem;border-radius:6px;background:var(--blue);color:var(--cream)}

.how-pay{display:flex;flex-direction:column;gap:.38rem;padding:1rem .85rem .85rem;background:#FFFFFF;color:var(--ink);box-shadow:var(--shadow-float),inset 0 0 0 1px var(--line)}
.how-pay__name{font-size:.6875rem;color:var(--muted)}
.how-pay__big{margin-top:-.2rem;font-size:1.3125rem;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.how-pay__then{margin-top:-.25rem;font-size:.6875rem;color:var(--muted)}
.how-pay__wallet{display:grid;place-items:center;height:1.75rem;margin-top:.2rem;border-radius:6px;background:var(--ink);color:var(--cream);font-weight:700}
.how-pay__or{display:flex;align-items:center;gap:.4rem;font-size:.625rem;color:var(--muted)}
.how-pay__or::before,.how-pay__or::after{content:"";flex:1;border-top:1px solid var(--line)}
.how-pay__field{display:flex;align-items:center;height:1.6rem;padding:0 .5rem;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(22,36,71,.22);color:var(--muted);font-size:.6875rem}
.how-pay__field--split{padding:0}
.how-pay__field--split span{flex:1;padding:0 .5rem}
.how-pay__field--split span+span{border-left:1px solid rgba(22,36,71,.22);height:100%;display:flex;align-items:center}
.how-pay__terms{position:relative;padding-left:1.1rem;font-size:.625rem;line-height:1.3;color:var(--muted)}
.how-pay__terms::before{content:"";position:absolute;left:0;top:.05rem;width:.7rem;height:.7rem;border-radius:3px;background:var(--blue)}
.how-pay__btn{display:grid;place-items:center;height:1.9rem;margin-top:auto;border-radius:6px;background:var(--blue);color:var(--cream);font-weight:700}

.how-role{padding:0 .85rem .85rem}
.how-role__banner{display:block;height:3.5rem;margin:0 -.85rem;background:var(--blue)}
.how-role__avatar{display:grid;place-items:center;width:3.25rem;height:3.25rem;margin-top:-1.6rem;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--dc-bg);color:var(--ink);font-size:1.25rem;font-weight:700}
.how-role__name{margin-top:.45rem;font-size:.9375rem;font-weight:700}
.how-role__h{margin-top:.75rem;padding-top:.6rem;border-top:1px solid var(--dc-line);font-size:.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dc-muted)}
.how-role__chip{display:inline-flex;align-items:center;gap:.35rem;margin-top:.35rem;padding:.2rem .5rem;border-radius:6px;background:rgba(231,233,242,.08);box-shadow:inset 0 0 0 1px var(--dc-line);font-weight:600}
.how-role__chip::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--mint)}
.how-role__server{margin-top:.3rem;color:var(--dc-text)}

.how-chan{padding:.8rem .5rem .6rem;background:var(--dc-side)}
.how-chan .dc__channels li{padding:.2rem .5rem}
.how-chan .dc__channels .is-unread{position:relative;color:var(--dc-text);font-weight:700}
.how-chan .dc__channels .is-unread::after{content:"";position:absolute;left:-.5rem;top:50%;width:4px;height:8px;margin-top:-4px;border-radius:0 4px 4px 0;background:var(--dc-text)}

/* 5 · Buying on DBA: an ink band with the judgement call and four habits ---- */
.how-safe{padding-block:var(--section)}
.how-safe__grid{display:grid;gap:var(--space-xl)}
.how-safe__intro h2{max-width:8em}
.how-safe__intro p{margin-top:var(--space-m);max-width:28em;font-size:var(--fs-lead);line-height:1.5;color:var(--muted-dark)}
.how-tips{list-style:none;counter-reset:tip;margin:0;padding:0;border-bottom:1px solid rgba(255,254,250,.16)}
.how-tips li{counter-increment:tip;position:relative;padding:1rem 0 1rem 2.75rem;border-top:1px solid rgba(255,254,250,.16);color:var(--muted-dark)}
.how-tips li::before{content:counter(tip);position:absolute;left:0;top:.95rem;font-size:1.375rem;font-weight:700;line-height:1.2;color:var(--mint)}
.how-tips strong{display:block;color:var(--cream)}
@media (min-width:900px){
  .how-safe__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--space-2xl);align-items:start}
  .how-tips li{padding-block:1.15rem}
}

/* 6 · End: one call to action ------------------------------------------------ */
.how-end{padding-block:var(--section)}
.how-end__cta{display:grid;gap:var(--space-l)}
.how-end__cta h2{max-width:11em}
.how-end__actions .fine{margin-top:var(--space-s);max-width:30em}
.how-end__actions .fine a{color:inherit}
@media (min-width:1000px){
  .how-end__cta{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--grid-gap);align-items:end}
}