/* reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* tokens */
:root{
  /* color (from brief) */
  --dyp84-ink:#16181D;
  --dyp84-ink-soft:#2A2D36;
  --dyp84-bg:#F7F6F3;
  --dyp84-surface:#FFFFFF;
  --dyp84-accent:#6C4DF6;
  --dyp84-accent-2:#0FB6A8;
  --dyp84-muted:#5B5F6B;
  --dyp84-line:#E2E0DA;
  --dyp84-placeholder:#ECEAE3;
  /* type */
  --dyp84-font-display:"Bodoni Moda",Georgia,serif;
  --dyp84-font-body:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  /* spacing */
  --dyp84-space-1:0.5rem;
  --dyp84-space-2:1rem;
  --dyp84-space-3:1.5rem;
  --dyp84-space-4:2.5rem;
  --dyp84-space-5:4rem;
  --dyp84-space-6:6rem;
  --dyp84-maxw:1140px;
  /* radius / shadow / transition / z */
  --dyp84-radius:14px;
  --dyp84-radius-sm:8px;
  --dyp84-shadow:0 18px 50px -24px rgba(22,24,29,.45);
  --dyp84-shadow-sm:0 6px 20px -12px rgba(22,24,29,.4);
  --dyp84-trans:200ms cubic-bezier(.2,.7,.3,1);
  --dyp84-z-header:100;
  --dyp84-z-menu:200;
  --dyp84-z-cookie:300;
  /* fixed structural */
  --header-h:64px;
  --logo-w:178px;
  --logo-h:30px;
}

/* base */
html,body{background:var(--dyp84-bg);color:var(--dyp84-ink)}
body{font-family:var(--dyp84-font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--dyp84-font-display);font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--dyp84-ink)}
h1{font-size:clamp(2.6rem,6vw,4.4rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
h4{font-size:1.15rem}
p{margin:0 0 var(--dyp84-space-2)}
strong{font-weight:600}
main{padding-top:var(--header-h)}
::selection{background:var(--dyp84-accent);color:#fff}
:focus-visible{outline:3px solid var(--dyp84-accent);outline-offset:2px;border-radius:2px}

/* layout */
.container{width:100%;max-width:var(--dyp84-maxw);margin-inline:auto;padding-inline:var(--dyp84-space-3)}
.dyp84-section{padding-block:var(--dyp84-space-6)}
.dyp84-section--tight{padding-block:var(--dyp84-space-5)}
.dyp84-eyebrow{font-family:var(--dyp84-font-body);font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dyp84-accent);display:inline-block;margin-bottom:var(--dyp84-space-2)}
.dyp84-lede{font-size:clamp(1.1rem,2vw,1.35rem);color:var(--dyp84-ink-soft);max-width:60ch}
.dyp84-grid{display:grid;gap:var(--dyp84-space-3)}
.dyp84-grid--2{grid-template-columns:repeat(2,1fr)}
.dyp84-grid--3{grid-template-columns:repeat(3,1fr)}
.dyp84-prose{max-width:68ch}
.dyp84-prose p,.dyp84-prose li{color:var(--dyp84-ink-soft)}
.dyp84-prose h2{margin:var(--dyp84-space-5) 0 var(--dyp84-space-2)}
.dyp84-prose h3{margin:var(--dyp84-space-4) 0 var(--dyp84-space-1)}
.dyp84-prose ul{margin:0 0 var(--dyp84-space-2) 1.1rem;list-style:disc}
.dyp84-prose ul li{margin-bottom:.4rem}
.dyp84-divider{height:1px;background:var(--dyp84-line);border:0;margin-block:var(--dyp84-space-4)}

/* buttons */
.dyp84-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.3rem;border-radius:var(--dyp84-radius-sm);font-weight:600;font-size:.98rem;cursor:pointer;border:1.5px solid var(--dyp84-ink);transition:transform var(--dyp84-trans),background var(--dyp84-trans),color var(--dyp84-trans)}
.dyp84-btn--solid{background:var(--dyp84-ink);color:var(--dyp84-bg)}
.dyp84-btn--solid:hover{background:var(--dyp84-accent);border-color:var(--dyp84-accent);transform:translateY(-2px)}
.dyp84-btn--ghost{background:transparent;color:var(--dyp84-ink)}
.dyp84-btn--ghost:hover{background:var(--dyp84-ink);color:var(--dyp84-bg);transform:translateY(-2px)}
.dyp84-btn--accent{background:var(--dyp84-accent);border-color:var(--dyp84-accent);color:#fff}
.dyp84-btn--accent:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* header -> see header.css */
/* site-specific component: verdict rail + fit check */
.dyp84-verdict{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--dyp84-font-body);font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:.3rem .6rem;border-radius:4px;border:1.5px solid currentColor}
.dyp84-verdict::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.dyp84-verdict--good{color:var(--dyp84-accent-2)}
.dyp84-verdict--depends{color:var(--dyp84-accent)}
.dyp84-verdict--no{color:#C24A3C}

.dyp84-fitcheck{background:var(--dyp84-ink);color:var(--dyp84-bg);border-radius:var(--dyp84-radius);padding:clamp(1.5rem,4vw,3rem);box-shadow:var(--dyp84-shadow)}
.dyp84-fitcheck__q{font-family:var(--dyp84-font-display);font-size:clamp(1.4rem,3vw,2rem);margin-bottom:var(--dyp84-space-3);color:var(--dyp84-bg)}
.dyp84-fitcheck__options{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:var(--dyp84-space-3)}
.dyp84-fitcheck__opt{padding:.6rem 1rem;border-radius:999px;border:1.5px solid rgba(247,246,243,.3);background:transparent;color:var(--dyp84-bg);cursor:pointer;font-size:.95rem;transition:all var(--dyp84-trans)}
.dyp84-fitcheck__opt:hover{border-color:var(--dyp84-accent-2)}
.dyp84-fitcheck__opt[aria-pressed="true"]{background:var(--dyp84-accent);border-color:var(--dyp84-accent)}
.dyp84-fitcheck__result{border-top:1px solid rgba(247,246,243,.18);padding-top:var(--dyp84-space-3);min-height:120px}
.dyp84-fitcheck__result[hidden]{display:none}
.dyp84-fitcheck__verdict{margin-bottom:var(--dyp84-space-2)}
.dyp84-fitcheck__note{color:#D7D5CF;max-width:58ch}
.dyp84-fitcheck__meta{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:var(--dyp84-space-2);font-size:.92rem;color:var(--dyp84-accent-2)}
.dyp84-fitcheck__meta span strong{color:var(--dyp84-bg);font-family:var(--dyp84-font-display)}

/* mobile menu -> see header.css */
/* content card type -> see cards.css */

/* unique component: estimator + compare */
.dyp84-estimator{background:var(--dyp84-surface);border:1px solid var(--dyp84-line);border-radius:var(--dyp84-radius);padding:clamp(1.5rem,4vw,2.5rem)}
.dyp84-estimator__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:var(--dyp84-space-2) 0;border-bottom:1px solid var(--dyp84-line)}
.dyp84-estimator__row:last-of-type{border-bottom:0}
.dyp84-estimator__label{font-weight:600}
.dyp84-estimator__hint{display:block;font-size:.85rem;color:var(--dyp84-muted);font-weight:400}
.dyp84-estimator__choices{display:flex;flex-wrap:wrap;gap:.4rem}
.dyp84-chip{padding:.45rem .85rem;border-radius:999px;border:1.5px solid var(--dyp84-line);background:var(--dyp84-bg);cursor:pointer;font-size:.9rem;transition:all var(--dyp84-trans)}
.dyp84-chip[aria-pressed="true"]{background:var(--dyp84-ink);color:var(--dyp84-bg);border-color:var(--dyp84-ink)}
.dyp84-estimator__out{margin-top:var(--dyp84-space-3);background:var(--dyp84-ink);color:var(--dyp84-bg);border-radius:var(--dyp84-radius-sm);padding:var(--dyp84-space-3)}
.dyp84-estimator__figure{font-family:var(--dyp84-font-display);font-size:clamp(1.8rem,4vw,2.6rem)}
.dyp84-estimator__sub{color:var(--dyp84-accent-2);font-size:.95rem}

.dyp84-compare{display:block}
.dyp84-compare__tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--dyp84-space-3)}
.dyp84-compare__tab{padding:.55rem 1rem;border-radius:var(--dyp84-radius-sm);border:1.5px solid var(--dyp84-line);background:var(--dyp84-surface);cursor:pointer;font-size:.92rem;font-weight:600;transition:all var(--dyp84-trans)}
.dyp84-compare__tab[aria-selected="true"]{background:var(--dyp84-accent);color:#fff;border-color:var(--dyp84-accent)}
.dyp84-compare__panel{display:grid;grid-template-columns:1fr 1fr;gap:var(--dyp84-space-3)}
.dyp84-compare__panel[hidden]{display:none}
.dyp84-compare__cell{background:var(--dyp84-surface);border:1px solid var(--dyp84-line);border-radius:var(--dyp84-radius);padding:var(--dyp84-space-3)}
.dyp84-compare__cell h4{margin-bottom:.5rem}
.dyp84-compare__cell--us{border-color:var(--dyp84-accent);border-width:1.5px}
.dyp84-compare__cell p{color:var(--dyp84-ink-soft);margin:0}

/* counters */
.dyp84-counters{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--dyp84-space-3);text-align:center}
.dyp84-counter__num{font-family:var(--dyp84-font-display);font-size:clamp(2.4rem,6vw,3.6rem);color:var(--dyp84-accent)}
.dyp84-counter__label{color:var(--dyp84-muted);font-size:.95rem}

/* faq */
.dyp84-faq{display:block}
.dyp84-faq__item{border-bottom:1px solid var(--dyp84-line)}
.dyp84-faq__q{width:100%;text-align:left;background:none;border:0;padding:var(--dyp84-space-3) 0;cursor:pointer;font-family:var(--dyp84-font-display);font-size:1.2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--dyp84-ink)}
.dyp84-faq__icon{flex-shrink:0;transition:transform var(--dyp84-trans);color:var(--dyp84-accent)}
.dyp84-faq__q[aria-expanded="true"] .dyp84-faq__icon{transform:rotate(45deg)}
.dyp84-faq__a{max-height:0;overflow:hidden;transition:max-height var(--dyp84-trans)}
.dyp84-faq__a p{padding-bottom:var(--dyp84-space-3);color:var(--dyp84-ink-soft);margin:0}

/* page-specific */
.dyp84-hero{padding-block:var(--dyp84-space-5) var(--dyp84-space-6)}
.dyp84-hero h1{max-width:16ch}
.dyp84-hero__mark{font-family:var(--dyp84-font-display);font-style:italic;color:var(--dyp84-accent)}
.dyp84-pagehead{padding-block:var(--dyp84-space-5) var(--dyp84-space-4);border-bottom:1px solid var(--dyp84-line)}
.dyp84-figure{border-radius:var(--dyp84-radius);overflow:hidden;border:1px solid var(--dyp84-line);background:var(--dyp84-placeholder)}
.dyp84-figure img{width:100%;height:auto;object-fit:cover}
.dyp84-postmeta{display:flex;flex-wrap:wrap;gap:1rem;color:var(--dyp84-muted);font-size:.92rem;margin-bottom:var(--dyp84-space-3)}
.dyp84-toc{background:var(--dyp84-surface);border:1px solid var(--dyp84-line);border-radius:var(--dyp84-radius);padding:var(--dyp84-space-3);margin-bottom:var(--dyp84-space-4)}
.dyp84-toc h4{margin-bottom:.6rem;font-family:var(--dyp84-font-body);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--dyp84-muted)}
.dyp84-toc a{color:var(--dyp84-ink-soft);font-size:.95rem;display:block;padding:.2rem 0}
.dyp84-toc a:hover{color:var(--dyp84-accent)}
.dyp84-cta-band{background:var(--dyp84-ink);color:var(--dyp84-bg);border-radius:var(--dyp84-radius);padding:clamp(2rem,5vw,3.5rem);text-align:center}
.dyp84-cta-band h2{color:var(--dyp84-bg)}
.dyp84-cta-band p{color:#D7D5CF;max-width:52ch;margin-inline:auto}
.dyp84-breadcrumb{padding-top:var(--dyp84-space-3)}
.dyp84-breadcrumb ol{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.88rem;color:var(--dyp84-muted)}
.dyp84-breadcrumb li{display:flex;gap:.5rem;align-items:center}
.dyp84-breadcrumb a:hover{color:var(--dyp84-accent)}
.dyp84-breadcrumb [aria-current="page"]{color:var(--dyp84-ink)}
.dyp84-disclaimer{font-size:.85rem;color:var(--dyp84-muted);max-width:60ch}
.dyp84-svgblock{width:100%;height:auto;border-radius:var(--dyp84-radius);overflow:hidden}

/* cookie */
#cookie-banner{position:fixed;left:50%;bottom:1rem;transform:translate(-50%,160%);width:min(640px,calc(100% - 2rem));background:var(--dyp84-ink);color:var(--dyp84-bg);border-radius:var(--dyp84-radius);padding:var(--dyp84-space-3);box-shadow:var(--dyp84-shadow);z-index:var(--dyp84-z-cookie);transition:transform 320ms cubic-bezier(.2,.7,.3,1)}
#cookie-banner.dyp84-is-visible{transform:translate(-50%,0)}
#cookie-banner p{color:#D7D5CF;font-size:.92rem;margin-bottom:var(--dyp84-space-2)}
#cookie-banner a{color:var(--dyp84-accent-2);text-decoration:underline}
.dyp84-cookie__actions{display:flex;gap:.6rem;flex-wrap:wrap}
.dyp84-cookie__actions button{padding:.5rem 1.1rem;border-radius:var(--dyp84-radius-sm);font-weight:600;font-size:.9rem;cursor:pointer;border:1.5px solid var(--dyp84-bg)}
#cookie-accept{background:var(--dyp84-accent);border-color:var(--dyp84-accent);color:#fff}
#cookie-decline{background:transparent;color:var(--dyp84-bg)}

/* back to top */
#back-to-top{position:fixed;right:1.2rem;bottom:1.2rem;width:46px;height:46px;border-radius:50%;background:var(--dyp84-ink);color:var(--dyp84-bg);border:0;cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(12px);transition:all var(--dyp84-trans);z-index:var(--dyp84-z-header)}
#back-to-top.dyp84-is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
#back-to-top:hover{background:var(--dyp84-accent)}

/* reading progress */
#reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--dyp84-accent);z-index:calc(var(--dyp84-z-header) + 1);transition:width 80ms linear}

/* animations */
.dyp84-reveal{opacity:0;transform:translateY(18px);transition:opacity 600ms ease,transform 600ms cubic-bezier(.2,.7,.3,1)}
.dyp84-reveal.dyp84-is-in{opacity:1;transform:none}
@keyframes dyp84-fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .dyp84-reveal{opacity:1;transform:none}
}

/* responsive */
@media (max-width:860px){
  .dyp84-grid--2,.dyp84-grid--3{grid-template-columns:1fr}
  .dyp84-counters{grid-template-columns:1fr;gap:var(--dyp84-space-4)}
  .dyp84-compare__panel{grid-template-columns:1fr}
  .dyp84-section{padding-block:var(--dyp84-space-5)}
}