/* --------------------------------------------------------- local reset */
.dp8,.dp8 *,.dp8 *::before,.dp8 *::after{box-sizing:border-box}

/* ---------------------------------------------------------------- tokens */
.dp8{
  /* brand — sampled from the SUNDI3 logo */
  --dp8-orange:#ea6624;
  --dp8-orange-deep:#d1550f;
  --dp8-orange-soft:#fdf1e9;
  --dp8-ink:#242424;
  --dp8-muted:#6b6461;

  /* structure */
  --dp8-bg:#ffffff;
  --dp8-card:#ffffff;
  --dp8-line:#e9e4df;
  --dp8-line-soft:#f6f3f1;
  --dp8-card-w:460px;
  --dp8-radius:10px;
  --dp8-gap:clamp(26px,4vw,58px);
  --dp8-page-pad:clamp(16px,4vw,40px);

  /* type */
  --dp8-display:"Sora","Helvetica Neue",Arial,sans-serif;
  --dp8-text:"Inter","Helvetica Neue",Arial,sans-serif;

  background:var(--dp8-bg);
  color:var(--dp8-ink);
  padding:clamp(52px,8vw,120px) var(--dp8-page-pad);
  font-family:var(--dp8-text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.dp8 .dp8__inner{max-width:1120px;margin:0 auto}

/* ---------------------------------------------------------------- header */
.dp8__header{max-width:800px;margin:0 auto;text-align:center}
.dp8__eyebrow{
  position:relative;display:inline-block;margin:0 0 26px;
  font-family:var(--dp8-display);
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dp8-orange);
}
/* the logo's accent rule, echoed under the kicker */
.dp8__eyebrow::after{
  content:"";position:absolute;left:50%;bottom:-12px;
  width:26px;height:2px;margin-left:-13px;background:var(--dp8-orange);
}
.dp8__title{
  margin:0 0 20px;
  font-family:var(--dp8-display);
  font-size:clamp(28px,4.5vw,50px);line-height:1.1;
  letter-spacing:-.02em;font-weight:700;text-wrap:balance;
}
.dp8__title em{font-style:normal;color:var(--dp8-orange)}
.dp8__subtitle{
  margin:0 auto;max-width:650px;
  font-size:clamp(15px,1.4vw,17px);line-height:1.72;color:var(--dp8-muted);
}

/* ----------------------------------------------------------------- track */
.dp8__track{position:relative;margin-top:clamp(46px,7vw,104px)}
.dp8__svg{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:0;
}
.dp8__path-base,.dp8__path-progress{
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.dp8__path-base{stroke:var(--dp8-line);stroke-width:1.6}
.dp8__path-progress{stroke:var(--dp8-orange);stroke-width:2}
.dp8__dot{
  fill:var(--dp8-bg);stroke:var(--dp8-line);stroke-width:1.6;
  transition:fill .3s ease,stroke .3s ease;
}
.dp8__dot.is-on{fill:var(--dp8-orange);stroke:var(--dp8-orange)}

/* ----------------------------------------------------------------- nodes */
.dp8__nodes{
  position:relative;z-index:1;
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--dp8-gap);
}
.dp8__node{display:flex;width:100%}
.dp8__node:nth-child(odd){justify-content:flex-start}
.dp8__node:nth-child(even){justify-content:flex-end}

.dp8__card{
  position:relative;
  width:min(var(--dp8-card-w),100%);
  background:var(--dp8-card);
  border:1px solid var(--dp8-line);
  border-radius:var(--dp8-radius);
  padding:clamp(20px,2.4vw,30px);
  box-shadow:0 1px 2px rgba(36,36,36,.03),0 14px 32px -24px rgba(36,36,36,.28);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1),
             border-color .35s ease,box-shadow .35s ease;
}
.dp8--js .dp8__card{opacity:0;transform:translateY(20px)}
.dp8--js .dp8__card.is-in{opacity:1;transform:none}
.dp8__card.is-active{
  border-color:rgba(234,102,36,.55);
  box-shadow:0 1px 2px rgba(36,36,36,.04),0 18px 38px -26px rgba(234,102,36,.5);
}

.dp8__meta{display:flex;align-items:center;gap:8px;margin:0 0 16px}
/* thin squares, not pills: the logo is built from crisp squared strokes */
.dp8__chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:6px;
  font-family:var(--dp8-display);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:var(--dp8-orange);background:transparent;
  border:1px solid rgba(234,102,36,.42);
}
.dp8__chip--icon{color:var(--dp8-ink);border-color:var(--dp8-line);background:transparent}
.dp8__chip svg{
  width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;
}
.dp8__card-title{
  margin:0 0 8px;
  font-family:var(--dp8-display);
  font-size:clamp(17px,1.5vw,19.5px);line-height:1.35;
  letter-spacing:-.012em;font-weight:600;text-wrap:pretty;
}
.dp8__card-text{margin:0;font-size:15px;line-height:1.72;color:var(--dp8-muted)}

/* ------------------------------------------------------------------- cta */
.dp8__cta{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:clamp(42px,6vw,74px);
}
.dp8__btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 26px;border-radius:10px;
  font-family:var(--dp8-display);
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  line-height:1;text-decoration:none;
  color:var(--dp8-ink);background:#fff;border:1px solid var(--dp8-ink);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.dp8__btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px -14px rgba(36,36,36,.55)}
.dp8__btn--primary{
  color:#fff;background:var(--dp8-orange);border-color:var(--dp8-orange);
  box-shadow:0 12px 24px -16px rgba(234,102,36,.95);
}
.dp8__btn--primary:hover{background:var(--dp8-orange-deep);border-color:var(--dp8-orange-deep)}
.dp8__btn svg{
  width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.dp8__btn:focus-visible{outline:2px solid var(--dp8-orange);outline-offset:3px}
.dp8__note{
  margin:18px 0 0;text-align:center;
  font-size:13.5px;line-height:1.65;color:var(--dp8-muted);
}

/* -------------------------------------------------------------- stacked */
@media (max-width:860px){
  .dp8__node{justify-content:flex-start;padding-left:34px}
  .dp8__card{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .dp8 *,.dp8 *::before,.dp8 *::after{
    transition-duration:.001ms !important;animation-duration:.001ms !important;
  }
}