/* Disruptive Templates - How It Works. */

/* --------------------------------------------------------------------------
   1. Hero. Black ground, a neon floor grid in perspective, and a stack of
   cards standing in real 3D space that leans towards the pointer.
   -------------------------------------------------------------------------- */
.dt-hw {
  position: relative; overflow: hidden; isolation: isolate;
  background: #090908; color: #fff;
  padding-block: clamp(28px, 4vw, 60px) clamp(56px, 7vw, 104px);
}
.dt-hw__floor {
  position: absolute; left: -25%; right: -25%; bottom: -30px; height: 62%;
  z-index: 0; pointer-events: none; transform: perspective(520px) rotateX(74deg);
  transform-origin: bottom center; opacity: .4;
  background-image:
    repeating-linear-gradient(to right, rgba(0,224,80,.32) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(to bottom, rgba(0,224,80,.22) 0 1px, transparent 1px 84px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 42%, transparent 78%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 42%, transparent 78%);
}
.dt-hw__glow {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(140px);
}
.dt-hw__glow--a { top: -260px; left: -180px; width: 660px; height: 660px; background: rgba(0,153,51,.28); }
.dt-hw__glow--b { bottom: -220px; right: -140px; width: 560px; height: 560px; background: rgba(0,224,80,.12); }
.dt-hw__inner { position: relative; z-index: 1; }

.dt-hw__crumbs { margin: 0 0 clamp(20px, 2.6vw, 34px); font-size: .8125rem; }
.dt-hw__crumbs, .dt-hw__crumbs * { color: rgba(255,255,255,.5); }
.dt-hw .dt-hw__crumbs a { color: rgba(255,255,255,.72); text-decoration: none; }
.dt-hw .dt-hw__crumbs a:hover { color: #00e050; text-decoration: none; }

.dt-hw__grid {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(30px, 4vw, 68px); align-items: center;
}
.dt-hw__copy { min-width: 0; }
.dt-hw__eyebrow {
  margin: 0 0 14px; font-family: var(--dt-font-body); font-size: .75rem;
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #00e050;
}
.dt-hw .dt-hw__h {
  font-size: clamp(2.1rem, 1.35rem + 2.8vw, 3.5rem); font-weight: 700;
  letter-spacing: -.032em; line-height: 1.06; margin: 0 0 20px; color: #fff;
  max-width: 17ch;
}
.dt-hw__sub {
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem); line-height: 1.68;
  color: rgba(255,255,255,.66); margin: 0 0 28px; max-width: 54ch;
}
/* Marker highlight, same hand as the homepage. */
.dt-hw .dt-hl, .dt-jr .dt-hl, .dt-fs .dt-hl, .dt-qb .dt-hl {
  position: relative; display: inline-block; white-space: nowrap;
}
.dt-hw .dt-hl > span, .dt-jr .dt-hl > span,
.dt-fs .dt-hl > span, .dt-qb .dt-hl > span { position: relative; z-index: 1; }
.dt-hw .dt-hl::before, .dt-jr .dt-hl::before,
.dt-fs .dt-hl::before, .dt-qb .dt-hl::before {
  content: ''; position: absolute; z-index: 0;
  left: -.08em; right: -.08em; bottom: .04em; height: .4em;
  background: var(--dt-accent); opacity: .58; border-radius: .2em;
  transform: rotate(-1.1deg);
}
.dt-jr .dt-hl::before, .dt-qb .dt-hl::before { opacity: .42; }

/* Buttons */
.dt-hw__acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 30px; }
.dt-hw a.dt-hw__btn, .dt-hw a.dt-hw__btn:hover {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 13px 26px; border-radius: var(--dt-r-full);
  font-family: var(--dt-font-body); font-size: .9375rem; font-weight: 700;
  text-decoration: none; border: 1.5px solid rgba(255,255,255,.24); color: #fff;
  transition: background 180ms var(--dt-ease), border-color 180ms var(--dt-ease),
              color 180ms var(--dt-ease), gap 200ms var(--dt-ease);
}
.dt-hw a.dt-hw__btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.dt-hw a.dt-hw__btn--primary {
  background: var(--dt-accent); border-color: var(--dt-accent); color: #fff;
  box-shadow: 0 14px 40px -18px rgba(0,224,80,.9);
}
.dt-hw a.dt-hw__btn--primary:hover { background: #00b33c; border-color: #00b33c; gap: 13px; }
.dt-hw__btn svg { flex: 0 0 auto; }

/* Fact chips */
.dt-hw__chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 9px;
}
.dt-hw__chips li {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 8px 15px; border-radius: var(--dt-r-full);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  font-size: .8125rem; font-weight: 600; color: rgba(255,255,255,.82);
}
.dt-hw__chips svg { flex: 0 0 auto; color: #00e050; }
/* The 3D stack. Four real planes in Z, not a flat picture of one. */
.dt-hw__scene {
  position: relative; min-height: 470px;
  perspective: 1200px; perspective-origin: 50% 45%;
}
.dt-hw__stack {
  position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 16deg)) rotateY(var(--ry, -22deg));
  transition: transform 420ms cubic-bezier(.2,.6,.3,1);
}
.dt-hw__layer {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: 300px; padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(158deg, rgba(46,46,43,.97), rgba(22,22,21,.97));
  border: 1px solid rgba(0,224,80,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09),
              0 0 0 1px rgba(0,0,0,.6),
              0 34px 64px -28px rgba(0,224,80,.5);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: 13px; row-gap: 2px;
  transform: translate(-50%, -50%)
             translate3d(calc(var(--i) * 20px), calc(var(--i) * 96px - 144px), calc(var(--i) * 56px));
  animation: dt-hw-float 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.6s);
}
@keyframes dt-hw-float {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -9px; }
}
.dt-hw__layerico {
  grid-column: 1; grid-row: 1 / 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(0,224,80,.12); border: 1px solid rgba(0,224,80,.34); color: #00e050;
}
.dt-hw__layert {
  grid-column: 2; grid-row: 1;
  font-family: var(--dt-font-body); font-size: 1rem; font-weight: 800;
  color: #fff; letter-spacing: -.01em; align-self: end;
}
.dt-hw__layerd { grid-column: 2; grid-row: 2; font-size: .8125rem; color: rgba(255,255,255,.56); align-self: start; }
.dt-hw__layern {
  grid-column: 3; grid-row: 1 / 3; font-family: var(--dt-font-display); font-size: 1.5rem;
  font-weight: 700; color: rgba(0,224,80,.34); letter-spacing: -.02em;
}
/* Connective thread between the planes. */
.dt-hw__layer::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,224,80,.85), transparent);
  border-radius: 18px 18px 0 0;
}

/* --------------------------------------------------------------------------
   3. What you download. Dark again, three panels, one file per row.
   -------------------------------------------------------------------------- */
.dt-fs { position: relative; overflow: hidden; isolation: isolate; background: #0d0d0c; color: #fff; }
.dt-fs__glow {
  position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 520px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: rgba(0,153,51,.2); filter: blur(150px);
}
.dt-fs__inner { position: relative; z-index: 1; }
.dt-fs__head { max-width: 66ch; margin: 0 0 clamp(32px, 4vw, 52px); }
.dt-fs .dt-fs__h {
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.08; margin: 0 0 14px; color: #fff;
}
.dt-fs__sub { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.62); margin: 0; }

.dt-fsb__set { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.dt-fl {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  margin: 0; padding: 13px 10px 13px 0; border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background 200ms var(--dt-ease), padding-left 200ms var(--dt-ease);
}
.dt-fsb__set .dt-fl:last-child { border-bottom: 0; }
.dt-fl:hover { background: rgba(255,255,255,.04); padding-left: 10px; border-radius: 10px; }
.dt-fl__ext {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; padding: 5px 8px; margin-top: 1px; border-radius: 7px;
  font-family: var(--dt-font-mono); font-size: .625rem; font-weight: 700;
  letter-spacing: .02em; border: 1px solid transparent;
}
.dt-fl__ext--docx { background: rgba(0,224,80,.13); border-color: rgba(0,224,80,.34); color: #00e050; }
.dt-fl__ext--pdf  { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.78); }
.dt-fl__ext--xlsx { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.78); }
.dt-fl__ext--zip  { background: rgba(0,224,80,.13); border-color: rgba(0,224,80,.34); color: #00e050; }
.dt-fl__body { min-width: 0; }
.dt-fl__body strong {
  display: block; font-family: var(--dt-font-body); font-size: .875rem;
  font-weight: 700; color: #fff; margin-bottom: 3px; letter-spacing: -.005em;
}
.dt-fl__body span { display: block; font-size: .78125rem; line-height: 1.55; color: rgba(255,255,255,.56); }
.dt-fs__foot { margin: clamp(26px, 3vw, 38px) 0 0; font-size: .8125rem; color: rgba(255,255,255,.5); }
.dt-fs a { color: #00e050; text-decoration: none; }
.dt-fs a:hover { color: #fff; text-decoration: none; }
/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .dt-fsb__set { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .dt-hw__grid { grid-template-columns: 1fr; gap: 34px; }
  .dt-hw .dt-hw__h { max-width: none; }
  .dt-hw__scene { min-height: 380px; order: 2; }
}
@media (max-width: 640px) {
  .dt-hw { padding-block: 22px 44px; }
  .dt-hw .dt-hw__h { font-size: 1.9rem; line-height: 1.1; }
  .dt-hw__sub { font-size: .9375rem; margin-bottom: 22px; }
  .dt-hw__acts { gap: 9px; }
  .dt-hw a.dt-hw__btn { flex: 1 1 100%; min-height: 48px; padding: 12px 18px; font-size: .875rem; }
  .dt-hw__chips li { font-size: .75rem; padding: 7px 12px; }
  /* On a phone the stack reads as a list with a slight tilt. Deep perspective
     at this width just overlaps the labels. */
  .dt-hw__scene { min-height: 360px; }
  .dt-hw__stack { transform: rotateX(9deg) rotateY(-7deg) !important; }
  .dt-hw__layer {
    width: min(292px, 82vw); padding: 14px 16px; column-gap: 11px;
    transform: translate(-50%, -50%)
               translate3d(0, calc(var(--i) * 82px - 123px), calc(var(--i) * 14px));
  }
  .dt-hw__layerico { width: 36px; height: 36px; border-radius: 10px; }
  .dt-hw__layert { font-size: .9375rem; }
  .dt-hw__layerd { font-size: .75rem; }
  .dt-hw__layern { font-size: 1.25rem; }
  .dt-hw__glow--b { opacity: .45; }

  .dt-fl__ext { min-width: 46px; font-size: .5625rem; }
}
@media (prefers-reduced-motion: reduce) {
  /* Only the movement goes. The resting tilt is set per breakpoint above. */
  .dt-hw__stack { transition: none !important; }
  .dt-hw__layer { animation: none !important; }
  .dt-jr__panel, .dt-jr__fill, .dt-fl,
  .dt-fsb__tab, .dt-qb__tab, .dt-qb__q, .dt-qb__q summary svg { transition: none !important; }
}
/* Group heading inside a file list. */
.dt-fl__grp {
  margin: 18px 0 4px; padding: 0 0 8px; list-style: none;
  border-bottom: 1px solid rgba(0,224,80,.22);
  font-family: var(--dt-font-body); font-size: .6875rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: #00e050;
}
.dt-fsb__set > .dt-fl__grp:first-child { margin-top: 6px; }

/* --------------------------------------------------------------------------
   Journey. A tall scroll track with a sticky stage: one step on screen at a
   time, sides alternating, progress filling underneath. Phones get a swipe
   rail instead, because sticky scrolljacking on a touch screen is horrible.
   -------------------------------------------------------------------------- */
.dt-jr { background: var(--dt-paper); padding-block: 0; }
.dt-jr__track3 { position: relative; height: 360vh; }
.dt-jr__sticky {
  position: sticky; top: 76px; height: calc(100vh - 76px);
  min-height: 620px; display: flex; align-items: center; overflow: hidden;
}
.dt-jr__inner { width: 100%; }
.dt-jr__head { max-width: 60ch; margin: 0 0 clamp(18px, 2.4vw, 34px); }
.dt-jr .dt-jr__h {
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.08; margin: 0 0 10px; color: var(--dt-black);
}
.dt-jr__sub { font-size: .9375rem; line-height: 1.65; color: var(--dt-text-3); margin: 0; }

/* All four panels share one grid cell, so the stage is as tall as the tallest
   of them and nothing can ever be clipped. */
.dt-jr__stage { position: relative; display: grid; }
.dt-jr__panel {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 70px); align-items: center;
  opacity: 0; visibility: hidden; transform: translateY(26px);
  transition: opacity 520ms var(--dt-ease), transform 620ms var(--dt-ease), visibility 0s linear 520ms;
}
.dt-jr__panel.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 520ms var(--dt-ease), transform 620ms var(--dt-ease), visibility 0s;
}
/* Even steps put the words first, odd steps put the picture first. */
.dt-jr__panel:nth-child(even) { direction: rtl; }
.dt-jr__panel:nth-child(even) > * { direction: ltr; }

.dt-jr__copy { min-width: 0; }
.dt-jr__k {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-family: var(--dt-font-body); font-size: .6875rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dt-text-3);
}
.dt-jr__k span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--dt-black); color: #00e050; font-size: .75rem; letter-spacing: 0;
}
.dt-jr .dt-jr__t {
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); font-weight: 700;
  letter-spacing: -.026em; line-height: 1.14; margin: 0 0 14px; color: var(--dt-black);
}
.dt-jr__d { font-size: 1rem; line-height: 1.68; color: var(--dt-text-2); margin: 0 0 16px; max-width: 46ch; }
.dt-jr__tip {
  margin: 0; padding: 13px 16px; border-radius: 12px;
  background: var(--dt-bg-alt); border-left: 3px solid var(--dt-accent);
  font-size: .875rem; line-height: 1.6; color: var(--dt-text-3); max-width: 46ch;
}.dt-jr__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.dt-jr .dt-jr__links a {
  display: inline-flex; align-items: center; padding: 7px 14px;
  border-radius: var(--dt-r-full); background: var(--dt-black); color: #00e050;
  font-size: .78125rem; font-weight: 700; text-decoration: none;
  transition: background 180ms var(--dt-ease), color 180ms var(--dt-ease);
}
.dt-jr .dt-jr__links a:hover { background: var(--dt-accent); color: #fff; text-decoration: none; }

.dt-jr__art {
  position: relative; min-width: 0; border-radius: 22px; overflow: hidden;
  background: linear-gradient(158deg, #f7f7f5, #ecebe6);
  border: 1px solid var(--dt-rule); padding: clamp(14px, 2vw, 26px);
}
.dt-jr__svg { width: 100%; height: auto; display: block; }

/* Progress. Four segments that fill, and each is a button. */
.dt-jr__prog {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(20px, 2.6vw, 36px);
}
.dt-jr .dt-jr__dot {
  display: flex; flex-direction: column; gap: 9px; align-items: flex-start;
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
}
.dt-jr__track {
  display: block; width: 100%; height: 3px; border-radius: 2px;
  background: var(--dt-rule); overflow: hidden;
}
.dt-jr__fill {
  display: block; height: 100%; width: 0; background: var(--dt-accent);
  transition: width 260ms linear;
}
.dt-jr__lab {
  font-family: var(--dt-font-body); font-size: .75rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dt-grey-light);
  transition: color 240ms var(--dt-ease);
}
.dt-jr__dot.is-done .dt-jr__lab { color: var(--dt-text-3); }
.dt-jr__dot.is-on .dt-jr__lab { color: var(--dt-black); }
.dt-jr .dt-jr__dot:hover .dt-jr__lab { color: var(--dt-black); }
/* --------------------------------------------------------------------------
   Package tabs inside the dark files section.
   -------------------------------------------------------------------------- */
.dt-fsb__bar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-bottom: clamp(18px, 2.2vw, 28px);
}
.dt-fs .dt-fsb__tab {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 16px 18px; cursor: pointer; text-align: left;
  border-radius: 16px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12); color: #fff;
  transition: background 220ms var(--dt-ease), border-color 220ms var(--dt-ease);
}
.dt-fs .dt-fsb__tab:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.26); }
.dt-fs .dt-fsb__tab[aria-selected="true"] {
  background: rgba(0,224,80,.07); border-color: rgba(0,224,80,.5);
  box-shadow: inset 0 0 0 1px rgba(0,224,80,.16), 0 22px 50px -32px rgba(0,224,80,.8);
}
.dt-fsb__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; width: 100%; }
.dt-fsb__n { font-family: var(--dt-font-body); font-size: 1rem; font-weight: 800; letter-spacing: -.015em; }
.dt-fsb__b {
  padding: 3px 9px; border-radius: var(--dt-r-full); background: #00e050;
  color: var(--dt-black); font-size: .5625rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}
.dt-fsb__p {
  margin-left: auto; font-family: var(--dt-font-display);
  font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em;
}
.dt-fsb__c { font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.5); }
.dt-fs .dt-fsb__tab[aria-selected="true"] .dt-fsb__c { color: #00e050; }

.dt-fsb__pane {
  padding: clamp(20px, 2.4vw, 30px); border-radius: 20px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.12);
  animation: dt-fade 320ms var(--dt-ease);
}
@keyframes dt-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dt-fsb__lede {
  margin: 0 0 4px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .9375rem; line-height: 1.6; color: rgba(255,255,255,.72);
}
.dt-fsb__set {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 44px);
}
.dt-fl__grp { grid-column: 1 / -1; }
.dt-fsb__note {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .78125rem; line-height: 1.55; color: rgba(255,255,255,.5);
}
/* --------------------------------------------------------------------------
   Question bank. Five categories, eight each, one answer open at a time.
   -------------------------------------------------------------------------- */
.dt-qb { background: var(--dt-bg-alt); }
.dt-qb__head { max-width: 60ch; margin: 0 0 clamp(22px, 2.8vw, 34px); }
.dt-qb .dt-qb__h {
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.5rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.08; margin: 0 0 12px; color: var(--dt-black);
}
.dt-qb__sub { font-size: .9375rem; line-height: 1.65; color: var(--dt-text-3); margin: 0; }

.dt-qb__bar {
  display: flex; gap: 8px; margin-bottom: clamp(18px, 2.2vw, 26px);
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.dt-qb__bar::-webkit-scrollbar { display: none; }
.dt-qb .dt-qb__tab {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  padding: 11px 17px; border-radius: var(--dt-r-full); cursor: pointer;
  background: var(--dt-paper); border: 1px solid var(--dt-rule); color: var(--dt-text-2);
  font-family: var(--dt-font-body); font-size: .875rem; font-weight: 700;
  transition: background 200ms var(--dt-ease), border-color 200ms var(--dt-ease), color 200ms var(--dt-ease);
}
.dt-qb__tab svg { flex: 0 0 auto; color: var(--dt-text-3); transition: color 200ms var(--dt-ease); }
.dt-qb__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--dt-r-full);
  background: var(--dt-bg-alt); font-size: .6875rem; font-weight: 800; color: var(--dt-text-3);
}
.dt-qb .dt-qb__tab:hover { border-color: var(--dt-grey-mid); color: var(--dt-black); }
.dt-qb .dt-qb__tab[aria-selected="true"] {
  background: var(--dt-black); border-color: var(--dt-black); color: #fff;
}
.dt-qb__tab[aria-selected="true"] svg { color: #00e050; }
.dt-qb__tab[aria-selected="true"] .dt-qb__n { background: rgba(255,255,255,.14); color: #00e050; }

.dt-qb__pane { display: flex; flex-direction: column; gap: 9px; animation: dt-fade 300ms var(--dt-ease); }
/* A class that sets display beats the browser rule for [hidden]. Put it back. */
.dt-qb__pane[hidden], .dt-fsb__pane[hidden] { display: none; }
.dt-qb__q {
  background: var(--dt-paper); border: 1px solid var(--dt-rule); border-radius: 14px;
  transition: border-color 200ms var(--dt-ease), box-shadow 200ms var(--dt-ease);
}
.dt-qb__q[open] { border-color: var(--dt-black); box-shadow: var(--dt-shadow-raised); }
.dt-qb .dt-qb__q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; cursor: pointer; list-style: none;
  font-family: var(--dt-font-body); font-size: .9375rem; font-weight: 700; color: var(--dt-black);
}
.dt-qb__q summary::-webkit-details-marker { display: none; }
.dt-qb__q summary svg { flex: 0 0 auto; color: var(--dt-text-3); transition: transform 240ms var(--dt-ease); }
.dt-qb__q[open] summary svg { transform: rotate(45deg); color: var(--dt-accent); }
.dt-qb__q > div { padding: 0 20px 18px; }
.dt-qb__q p { margin: 0; font-size: .9375rem; line-height: 1.74; color: var(--dt-text-2); max-width: 78ch; }
.dt-qb__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
  margin-top: clamp(26px, 3vw, 38px); padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--dt-rule);
}
.dt-qb a.dt-qb__cta, .dt-qb a.dt-qb__cta:hover {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 13px 26px; border-radius: var(--dt-r-full);
  background: var(--dt-black); color: #fff; border: 1.5px solid var(--dt-black);
  font-family: var(--dt-font-body); font-size: .9375rem; font-weight: 700; text-decoration: none;
  transition: background 180ms var(--dt-ease), border-color 180ms var(--dt-ease), gap 200ms var(--dt-ease);
}
.dt-qb a.dt-qb__cta:hover { background: var(--dt-accent); border-color: var(--dt-accent); gap: 13px; }
.dt-qb__note { margin: 0; flex: 1 1 320px; font-size: .8125rem; line-height: 1.6; color: var(--dt-text-3); }
.dt-qb .dt-qb__note a { color: var(--dt-black); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dt-qb .dt-qb__note a:hover { color: var(--dt-accent); }

/* --------------------------------------------------------------------------
   Journey and tabs, narrow screens.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .dt-fsb__bar { grid-template-columns: 1fr; }
  .dt-fsb__set { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* No sticky, no scrolljacking. The steps become a swipe rail. */
  .dt-jr { padding-block: var(--dt-section-y); }
  .dt-jr__track3 { height: auto; }
  .dt-jr__sticky { position: static; height: auto; min-height: 0; display: block; overflow: visible; }
  .dt-jr__stage {
    min-height: 0; display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--dt-gutter) * -1); padding-inline: var(--dt-gutter);
  }
  .dt-jr__stage::-webkit-scrollbar { display: none; }
  .dt-jr__panel {
    flex: 0 0 86%; max-width: 460px;
    scroll-snap-align: center; grid-template-columns: 1fr; gap: 18px;
    opacity: 1; visibility: visible; transform: none; transition: none;
    direction: ltr !important;
  }
  .dt-jr__panel:nth-child(even) { direction: ltr; }
  .dt-jr__panel .dt-jr__art { order: -1; }
  .dt-jr__d, .dt-jr__tip { max-width: none; }
  .dt-jr__prog { gap: 8px; }
  .dt-jr__lab { font-size: .625rem; letter-spacing: .06em; }
}
@media (max-width: 640px) {
  .dt-jr__panel { flex-basis: 88%; }
  .dt-jr .dt-jr__t { font-size: 1.25rem; }
  .dt-jr__d { font-size: .9375rem; }
  .dt-qb .dt-qb__q summary { padding: 14px 16px; font-size: .875rem; }
  .dt-qb__q > div { padding: 0 16px 16px; }
  .dt-qb__q p { font-size: .875rem; }
  .dt-qb a.dt-qb__cta { width: 100%; }
  .dt-fs .dt-fsb__tab { padding: 13px 15px; }
  .dt-fsb__p { font-size: 1.25rem; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .dt-jr__sticky { min-height: 0; }
  .dt-jr__head { margin-bottom: 14px; }
  .dt-jr__d { font-size: .9375rem; margin-bottom: 12px; }
  .dt-jr__tip { padding: 10px 14px; font-size: .8125rem; }
}