/* Disruptive Templates - What Is Included, About, FAQs, Tools.
   The hero, the package tabs and the question bank come from dt-hiw.css. Only
   the parts unique to these four pages live here. */

/* ---------- What is included: per package context ---------- */
.dt-inc__meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px); margin-bottom: 22px;
  padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.dt-inc__lab {
  margin: 0 0 7px; font-family: var(--dt-font-body); font-size: .625rem;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #00e050;
}
.dt-inc__meta p { margin: 0; font-size: .8125rem; line-height: 1.6; color: rgba(255,255,255,.68); }
.dt-inc__not { list-style: none; margin: 0; padding: 0; }
.dt-inc__not li {
  position: relative; margin: 0 0 6px; padding-left: 16px;
  font-size: .8125rem; line-height: 1.55; color: rgba(255,255,255,.55);
}
.dt-inc__not li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1px; background: rgba(255,255,255,.4);
}

/* ---------- Comparison grid ---------- */
.dt-cmp { background: var(--dt-bg-alt); }
.dt-cmp__head { max-width: 56ch; margin: 0 0 clamp(24px, 3vw, 36px); }
.dt-cmp .dt-cmp__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-cmp__sub { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--dt-text-3); }
.dt-cmp__grid {
  background: var(--dt-paper); border: 1px solid var(--dt-rule);
  border-radius: 18px; overflow: hidden;
}
.dt-cmp__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 108px 108px 108px;
  align-items: center; border-top: 1px solid var(--dt-rule);
}
.dt-cmp__grid > .dt-cmp__row:first-child { border-top: 0; }
.dt-cmp__row--head { background: var(--dt-black); color: #fff; }
.dt-cmp__what { padding: 14px 20px; font-size: .875rem; line-height: 1.5; color: var(--dt-text-2); }
.dt-cmp__row--head .dt-cmp__what { color: #fff; font-weight: 700; }
.dt-cmp__c {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 14px 8px; align-self: stretch;
  border-left: 1px solid var(--dt-rule);
}
.dt-cmp__row--head .dt-cmp__c { border-left-color: rgba(255,255,255,.16); }
.dt-cmp__row--head .dt-cmp__c strong { font-size: .8125rem; font-weight: 800; }
.dt-cmp__row--head .dt-cmp__c span { font-family: var(--dt-font-display); font-size: 1.125rem; font-weight: 700; color: #00e050; }
.dt-cmp__c--lead { background: rgba(0,224,80,.12); }
.dt-cmp__row:not(.dt-cmp__row--head) .dt-cmp__c:nth-child(3) { background: var(--dt-green-wash, rgba(0,153,51,.05)); }
.dt-cmp__y { width: 19px; height: 19px; color: var(--dt-accent); display: block; }
.dt-cmp__n { display: block; width: 12px; height: 2px; border-radius: 1px; background: var(--dt-grey-light); }
.dt-cmp__foot { margin: 20px 0 0; font-size: .8125rem; color: var(--dt-text-3); }
.dt-cmp .dt-cmp__foot a { color: var(--dt-black); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dt-cmp .dt-cmp__foot a:hover { color: var(--dt-accent); }
/* ---------- About: the numbers ---------- */
.dt-pf__sec { background: var(--dt-paper); }
.dt-pf__head { max-width: 62ch; margin: 0 0 clamp(26px, 3vw, 40px); }
.dt-pf .dt-pf__h, .dt-pf__sec .dt-pf__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-pf__sub { margin: 0; font-size: .9375rem; line-height: 1.68; color: var(--dt-text-3); }
.dt-pf__set {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px);
}
.dt-pf {
  margin: 0; padding: 24px 22px; border-radius: 18px;
  background: var(--dt-bg-alt); border: 1px solid var(--dt-rule);
  transition: border-color 240ms var(--dt-ease), transform 240ms var(--dt-ease);
}
.dt-pf:hover { border-color: var(--dt-accent); transform: translateY(-4px); }
.dt-pf__n {
  margin: 0 0 6px; font-family: var(--dt-font-display);
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.625rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1; color: var(--dt-black);
}
.dt-pf__stars { display: inline-flex; gap: 2px; margin-bottom: 8px; }
.dt-pf__stars svg { width: 15px; height: 15px; fill: var(--dt-accent); display: block; }
.dt-pf__l { margin: 0 0 8px; font-family: var(--dt-font-body); font-size: .875rem; font-weight: 800; color: var(--dt-black); }
.dt-pf__d { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--dt-text-3); }

/* ---------- About: brand marquee ---------- */
.dt-br { background: var(--dt-bg-alt); border-block: 1px solid var(--dt-rule); overflow: hidden; }
.dt-br__head { max-width: 58ch; margin: 0 0 clamp(26px, 3vw, 40px); }
.dt-br .dt-br__h {
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.375rem); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.1; margin: 0 0 12px; color: var(--dt-black);
}
.dt-br__sub { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--dt-text-3); }
.dt-br__rows {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.dt-br__row { overflow: hidden; }
.dt-br__track {
  display: flex; gap: 14px; width: max-content; list-style: none; margin: 0; padding: 0;
  animation: dt-br-slide 64s linear infinite; will-change: transform;
}
@keyframes dt-br-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.dt-br__rows:hover .dt-br__track { animation-play-state: paused; }
.dt-br__tile {
  margin: 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 148px; height: 96px; padding: 18px; background: var(--dt-paper);
  border: 1px solid var(--dt-rule); border-radius: 14px;
  transition: border-color 240ms var(--dt-ease), box-shadow 240ms var(--dt-ease);
}
.dt-br__tile img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1) opacity(.45); transition: filter 260ms var(--dt-ease);
}
.dt-br__tile:hover { border-color: var(--dt-accent); box-shadow: 0 14px 30px -18px rgba(0,153,51,.6); }
.dt-br__tile:hover img { filter: none; }
.dt-br__note { margin: clamp(24px, 3vw, 34px) 0 0; font-size: .75rem; line-height: 1.55; color: var(--dt-grey-light); max-width: 78ch; }
/* ---------- About: story and rules ---------- */
.dt-st2 { background: var(--dt-paper); }
.dt-st2__grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.dt-st2 .dt-st2__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 18px; color: var(--dt-black);
}
.dt-st2__copy p { font-size: 1rem; line-height: 1.75; color: var(--dt-text-2); margin: 0 0 16px; max-width: 52ch; }
.dt-st2__copy p:last-child { margin-bottom: 0; }
.dt-rl__set { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dt-rl {
  margin: 0; padding: 22px; border-radius: 18px;
  background: var(--dt-bg-alt); border: 1px solid var(--dt-rule);
  transition: border-color 240ms var(--dt-ease), background 240ms var(--dt-ease);
}
.dt-rl:hover { border-color: var(--dt-accent); background: var(--dt-paper); }
.dt-rl__i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 13px; border-radius: 12px;
  background: var(--dt-paper); border: 1px solid rgba(0,153,51,.24); color: var(--dt-accent);
}
.dt-st2 .dt-rl__t { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.018em; margin: 0 0 8px; color: var(--dt-black); }
.dt-rl__d { margin: 0; font-size: .875rem; line-height: 1.66; color: var(--dt-text-3); }

/* ---------- About: what we will not do ---------- */
.dt-nt__sec { background: var(--dt-bg-alt); }
.dt-nt__head { max-width: 58ch; margin: 0 0 clamp(24px, 3vw, 36px); }
.dt-nt__sec .dt-nt__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-nt__sub { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--dt-text-3); }
.dt-nt__set {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.dt-nt {
  display: flex; gap: 14px; margin: 0; padding: 22px; border-radius: 16px;
  background: var(--dt-paper); border: 1px solid var(--dt-rule);
}
.dt-nt__x {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fdecea; border: 1px solid rgba(179,38,30,.2); color: #b3261e;
}
.dt-nt__x svg { width: 16px; height: 16px; }
.dt-nt strong { display: block; font-family: var(--dt-font-body); font-size: .9375rem; font-weight: 800; color: var(--dt-black); margin-bottom: 6px; }
.dt-nt span { display: block; font-size: .84375rem; line-height: 1.62; color: var(--dt-text-3); }
.dt-nt__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
  margin-top: clamp(26px, 3vw, 36px); padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--dt-rule);
}
/* ---------- FAQs: search across every category ---------- */
.dt-fb__search {
  position: relative; display: flex; align-items: center;
  margin: 0 0 14px; background: var(--dt-paper);
  border: 1px solid var(--dt-rule); border-radius: var(--dt-r-full);
  transition: border-color 200ms var(--dt-ease), box-shadow 200ms var(--dt-ease);
}
.dt-fb__search:focus-within { border-color: var(--dt-black); box-shadow: var(--dt-shadow-raised); }
.dt-fb__search > svg { flex: 0 0 auto; margin-left: 20px; color: var(--dt-text-3); }
.dt-fb .dt-fb__search input {
  flex: 1 1 auto; min-width: 0; padding: 16px 18px; border: 0; background: none;
  font-family: var(--dt-font-body); font-size: .9375rem; color: var(--dt-black);
}
.dt-fb .dt-fb__search input:focus { outline: none; }
.dt-fb .dt-fb__search input::-webkit-search-cancel-button { display: none; }
.dt-fb .dt-fb__clear {
  flex: 0 0 auto; margin-right: 8px; padding: 9px 18px; cursor: pointer;
  border: 0; border-radius: var(--dt-r-full); background: var(--dt-black); color: #fff;
  font-family: var(--dt-font-body); font-size: .8125rem; font-weight: 700;
}
.dt-fb .dt-fb__clear:hover { background: var(--dt-accent); }
.dt-fb__count { margin: 0 0 16px; padding-left: 20px; font-size: .8125rem; font-weight: 600; color: var(--dt-text-3); }
.dt-fb__none { margin: 24px 0 0; padding: 22px; border-radius: 14px; background: var(--dt-paper); border: 1px dashed var(--dt-rule); font-size: .9375rem; color: var(--dt-text-3); }
.dt-fb__cathead {
  margin: 0 0 4px; font-family: var(--dt-font-body); font-size: .6875rem;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dt-text-3);
}
/* While a search is running the tabs step aside and every hit is listed. */
.dt-fb.is-finding .dt-qb__bar { display: none; }
.dt-fb.is-finding .dt-qb__pane[hidden] { display: flex; }
.dt-fb.is-finding .dt-qb__q[data-miss] { display: none; }
.dt-fb.is-finding .dt-qb__pane[data-empty] { display: none; }
.dt-fb__body--gap { display: grid; gap: 22px; }

/* ---------- Tools ---------- */
.dt-tl__sec { background: var(--dt-paper); }
.dt-tl__head { max-width: 62ch; margin: 0 0 clamp(26px, 3vw, 40px); }
.dt-tl__sec .dt-tl__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-tl__sub { margin: 0; font-size: .9375rem; line-height: 1.68; color: var(--dt-text-3); }
.dt-tl__set {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px);
}
.dt-tl { margin: 0; }
.dt-tl__card {
  height: 100%; display: flex; flex-direction: column; padding: 26px 24px;
  border-radius: 20px; background: var(--dt-bg-alt); border: 1px solid var(--dt-rule);
  transition: border-color 260ms var(--dt-ease), transform 260ms var(--dt-ease), box-shadow 260ms var(--dt-ease);
}
.dt-tl__card:hover { border-color: var(--dt-accent); transform: translateY(-5px); box-shadow: 0 28px 56px -34px rgba(24,23,22,.5); }
.dt-tl__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dt-tl__i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 15px;
  background: var(--dt-paper); border: 1px solid rgba(0,153,51,.24); color: var(--dt-accent);
}
.dt-tl__badge {
  padding: 5px 12px; border-radius: var(--dt-r-full);
  background: var(--dt-black); color: #00e050;
  font-family: var(--dt-font-body); font-size: .625rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.dt-tl__sec .dt-tl__t { font-size: 1.25rem; font-weight: 700; letter-spacing: -.022em; margin: 0 0 10px; color: var(--dt-black); }
.dt-tl__d { margin: 0 0 14px; font-size: .9375rem; line-height: 1.62; color: var(--dt-text-2); }
.dt-tl__why {
  margin: 0 0 18px; padding: 13px 15px; border-radius: 12px;
  background: var(--dt-paper); border-left: 3px solid var(--dt-accent);
  font-size: .84375rem; line-height: 1.6; color: var(--dt-text-3);
}
.dt-tl__lab {
  margin: auto 0 10px; font-family: var(--dt-font-body); font-size: .625rem;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dt-text-3);
}
.dt-tl__out { list-style: none; margin: 0; padding: 0; }
.dt-tl__out li {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px;
  font-size: .84375rem; line-height: 1.5; color: var(--dt-text-2);
}
.dt-tl__dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: .45em; border-radius: 50%; background: var(--dt-accent); }
.dt-tl__note { margin: clamp(24px, 3vw, 34px) 0 0; font-size: .875rem; line-height: 1.65; color: var(--dt-text-3); max-width: 76ch; }
.dt-tl__sec .dt-tl__note a { color: var(--dt-black); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dt-tl__sec .dt-tl__note a:hover { color: var(--dt-accent); }
/* ---------- Shared closing action ---------- */
.dt-pcta { background: var(--dt-paper); }
.dt-pcta__box {
  text-align: center; padding-block: clamp(34px, 4vw, 54px);
  border-radius: 24px; background: var(--dt-bg-alt); border: 1px solid var(--dt-rule);
  max-width: var(--dt-w-base);
}
.dt-pcta .dt-pcta__h {
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.375rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1; margin: 0 0 12px; color: var(--dt-black);
}
.dt-pcta__sub { margin: 0 auto 24px; max-width: 56ch; font-size: .9375rem; line-height: 1.68; color: var(--dt-text-3); }
.dt-pcta__acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.dt-pcta .dt-hw__btn, .dt-pcta .dt-hw__btn:hover {
  border-color: var(--dt-rule); color: var(--dt-black); background: var(--dt-paper);
}
.dt-pcta .dt-hw__btn:hover { border-color: var(--dt-black); background: var(--dt-paper); }
.dt-pcta .dt-hw__btn--primary, .dt-pcta .dt-hw__btn--primary:hover { background: var(--dt-black); border-color: var(--dt-black); color: #fff; box-shadow: none; }
.dt-pcta .dt-hw__btn--primary:hover { background: var(--dt-accent); border-color: var(--dt-accent); }
.dt-pcta__note { margin: 20px 0 0; font-size: .8125rem; color: var(--dt-text-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .dt-inc__meta { grid-template-columns: 1fr; gap: 16px; }
  .dt-pf__set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-tl__set { grid-template-columns: 1fr; }
  .dt-tl__lab { margin-top: 4px; }
}
@media (max-width: 900px) {
  .dt-st2__grid { grid-template-columns: 1fr; gap: 30px; }
  .dt-st2__copy p { max-width: none; }
  .dt-nt__set { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* The comparison grid becomes three labelled cells per row. */
  .dt-cmp__row { grid-template-columns: 1fr; }
  .dt-cmp__row--head { display: none; }
  .dt-cmp__what { padding: 16px 16px 8px; font-weight: 700; color: var(--dt-black); }
  .dt-cmp__row { padding-bottom: 12px; }
  .dt-cmp__c {
    flex-direction: row; justify-content: flex-start; gap: 10px;
    padding: 5px 16px; border-left: 0; background: none !important;
  }
  .dt-cmp__c::before {
    content: attr(data-t); font-family: var(--dt-font-body); font-size: .75rem;
    font-weight: 800; color: var(--dt-text-3); min-width: 34px;
  }
  .dt-cmp__row--head .dt-cmp__c::before { content: none; }
}
@media (max-width: 640px) {
  .dt-pf__set { grid-template-columns: 1fr; }
  .dt-pf { padding: 20px 18px; }
  .dt-br__tile { width: 118px; height: 82px; padding: 14px; }
  .dt-tl__card { padding: 22px 20px; }
  .dt-fb .dt-fb__search input { padding: 14px 14px; font-size: .875rem; }
  .dt-fb__search > svg { margin-left: 16px; }
  .dt-fb .dt-fb__clear { padding: 8px 14px; }
  .dt-pcta__box { border-radius: 20px; }
  .dt-pcta .dt-hw__btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-br__track { animation: none; }
  .dt-br__row { overflow-x: auto; }
  .dt-pf, .dt-rl, .dt-tl__card, .dt-br__tile, .dt-br__tile img { transition: none !important; }
}
/* ---------- Policy documents ---------- */
.dt-hw--slim { padding-block: clamp(24px, 3vw, 44px) clamp(40px, 5vw, 72px); }
.dt-hw--slim .dt-hw__grid { grid-template-columns: 1fr; }
.dt-hw--slim .dt-hw__scene { display: none; }
.dt-hw--slim .dt-hw__h { max-width: 22ch; }
.dt-hw--slim .dt-hw__sub { max-width: 66ch; }

.dt-lg { background: var(--dt-paper); }
.dt-lg__grid {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.dt-lg__side { position: sticky; top: 96px; }
.dt-lg__sidelab {
  margin: 0 0 12px; font-family: var(--dt-font-body); font-size: .625rem;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dt-text-3);
}
.dt-lg__toc { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: none; }
.dt-lg__toc li { margin: 0; }
.dt-lg .dt-lg__toc a {
  display: flex; gap: 10px; padding: 8px 0;
  font-size: .84375rem; line-height: 1.45; color: var(--dt-text-3); text-decoration: none;
  transition: color 180ms var(--dt-ease);
}
.dt-lg .dt-lg__toc a:hover { color: var(--dt-black); }
.dt-lg__toc a span { flex: 0 0 auto; width: 18px; font-weight: 800; color: var(--dt-accent); }
.dt-lg__ask {
  margin: 0; padding: 16px; border-radius: 14px;
  background: var(--dt-bg-alt); border: 1px solid var(--dt-rule);
  font-size: .8125rem; line-height: 1.6; color: var(--dt-text-3);
}
.dt-lg .dt-lg__ask a { color: var(--dt-black); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.dt-lg .dt-lg__ask a:hover { color: var(--dt-accent); }

.dt-lg__body { min-width: 0; max-width: 74ch; }
.dt-lg__updated {
  display: inline-block; margin: 0 0 20px; padding: 6px 14px;
  border-radius: var(--dt-r-full); background: var(--dt-bg-alt); border: 1px solid var(--dt-rule);
  font-size: .75rem; font-weight: 700; color: var(--dt-text-3);
}
.dt-lg__intro { font-size: 1.0625rem; line-height: 1.72; color: var(--dt-text-2); margin: 0 0 16px; }
.dt-lg__sec { padding-top: clamp(28px, 3.4vw, 44px); scroll-margin-top: 96px; }
.dt-lg .dt-lg__h2 {
  display: flex; gap: 12px; align-items: baseline;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); font-weight: 700;
  letter-spacing: -.024em; line-height: 1.2; margin: 0 0 14px; color: var(--dt-black);
}
.dt-lg__h2 span { flex: 0 0 auto; font-family: var(--dt-font-body); font-size: .875rem; font-weight: 800; color: var(--dt-accent); }
.dt-lg__sec p { margin: 0 0 14px; font-size: .9375rem; line-height: 1.75; color: var(--dt-text-2); }
.dt-lg__list { list-style: none; margin: 0 0 14px; padding: 0; }
.dt-lg__list li {
  position: relative; margin: 0 0 10px; padding-left: 24px;
  font-size: .9375rem; line-height: 1.7; color: var(--dt-text-2);
}
.dt-lg__list li::before {
  content: ''; position: absolute; left: 4px; top: .72em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--dt-accent);
}
.dt-lg__note {
  padding: 14px 16px; border-radius: 12px;
  background: var(--dt-green-wash, rgba(0,153,51,.06)); border-left: 3px solid var(--dt-accent);
  font-size: .875rem !important; color: var(--dt-text-2);
}
.dt-lg__who { margin: clamp(30px, 3.4vw, 44px) 0 0; padding-top: 22px; border-top: 1px solid var(--dt-rule); font-size: .8125rem; color: var(--dt-text-3); }
.dt-lg .dt-lg__sec a, .dt-lg .dt-lg__intro a { color: var(--dt-black); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dt-lg .dt-lg__sec a:hover, .dt-lg .dt-lg__intro a:hover { color: var(--dt-accent); }
/* ---------- Contact routes ---------- */
.dt-ct__sec { background: var(--dt-bg-alt); }
.dt-ct__head { max-width: 62ch; margin: 0 0 clamp(26px, 3vw, 40px); }
.dt-ct__sec .dt-ct__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-ct__sub { margin: 0; font-size: .9375rem; line-height: 1.68; color: var(--dt-text-3); }
.dt-ct__sec .dt-ct__sub a { color: var(--dt-black); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dt-ct__sec .dt-ct__sub a:hover { color: var(--dt-accent); }
.dt-ct__set {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px);
}
.dt-ct {
  margin: 0; padding: 24px 22px; border-radius: 18px;
  background: var(--dt-paper); border: 1px solid var(--dt-rule);
  transition: border-color 240ms var(--dt-ease), transform 240ms var(--dt-ease);
}
.dt-ct:hover { border-color: var(--dt-accent); transform: translateY(-4px); }
.dt-ct__i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px;
  background: var(--dt-bg-alt); border: 1px solid rgba(0,153,51,.22); color: var(--dt-accent);
}
.dt-ct__sec .dt-ct__t { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.018em; margin: 0 0 9px; color: var(--dt-black); }
.dt-ct__d { margin: 0 0 12px; font-size: .875rem; line-height: 1.62; color: var(--dt-text-3); }
.dt-ct__w {
  margin: 0; padding-top: 12px; border-top: 1px solid var(--dt-rule);
  font-size: .8125rem; line-height: 1.55; color: var(--dt-text-2);
}
.dt-ct__sec .dt-ct__w a { color: var(--dt-black); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dt-ct__sec .dt-ct__w a:hover { color: var(--dt-accent); }

/* ---------- The Elementor form, dressed to match ---------- */
.dt-form { background: var(--dt-paper); }
.dt-form .elementor-form { max-width: 760px; }
.dt-form .elementor-field-group > label {
  font-family: var(--dt-font-body); font-size: .8125rem; font-weight: 700;
  color: var(--dt-black); margin-bottom: 7px;
}
.dt-form .elementor-field-textual {
  min-height: 52px; padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--dt-rule); background: var(--dt-paper);
  font-family: var(--dt-font-body); font-size: .9375rem; color: var(--dt-black);
  transition: border-color 180ms var(--dt-ease), box-shadow 180ms var(--dt-ease);
}
.dt-form textarea.elementor-field-textual { min-height: 148px; }
.dt-form .elementor-field-textual:focus { border-color: var(--dt-black); box-shadow: var(--dt-shadow-raised); outline: none; }
.dt-form .elementor-field-type-acceptance .elementor-field-option label { font-size: .8125rem; font-weight: 400; color: var(--dt-text-3); line-height: 1.6; }
.dt-form .elementor-button[type="submit"] {
  min-height: 52px; padding: 14px 28px; border-radius: var(--dt-r-full);
  background: var(--dt-black); color: #fff; border: 0;
  font-family: var(--dt-font-body); font-size: .9375rem; font-weight: 700;
  transition: background 180ms var(--dt-ease);
}
.dt-form .elementor-button[type="submit"]:hover { background: var(--dt-accent); }
.dt-form .elementor-message { font-size: .875rem; }
.dt-form__head { max-width: 60ch; margin: 0 0 clamp(22px, 2.6vw, 32px); }
.dt-form .dt-form__h {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.12; margin: 0 0 12px; color: var(--dt-black);
}
.dt-form__sub { margin: 0; font-size: .9375rem; line-height: 1.68; color: var(--dt-text-3); }
.dt-form__note { margin: 20px 0 0; font-size: .8125rem; line-height: 1.6; color: var(--dt-text-3); max-width: 68ch; }
.dt-form .dt-form__note a { color: var(--dt-black); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1080px) { .dt-ct__set { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .dt-lg__grid { grid-template-columns: 1fr; gap: 26px; }
  .dt-lg__side { position: static; }
  .dt-lg__toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
}
@media (max-width: 640px) {
  .dt-ct__set { grid-template-columns: 1fr; }
  .dt-lg__toc { grid-template-columns: 1fr; }
  .dt-lg__body { max-width: none; }
}
/* ---------- Tool pages ---------- */
/* The sticker. Rotated and dashed so it reads as something stuck on top of a
   finished page, rather than as another button. */
.dt-tp__head { position: relative; }
.dt-tp__sticker {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 7px 16px;
  border-radius: var(--dt-r-full);
  background: rgba(0, 224, 80, .1);
  border: 1px dashed rgba(0, 224, 80, .6);
  color: #00e050;
  font-family: var(--dt-font-body); font-size: .6875rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-1.6deg);
}
.dt-tp__dot {
  width: 7px; height: 7px; border-radius: 50%; background: #00e050;
  animation: dt-tp-pulse 2s ease-in-out infinite;
}
@keyframes dt-tp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.dt-tp .dt-hw__h { margin-bottom: 14px; }

/* How it will work */
.dt-tw__sec { background: var(--dt-paper); }
.dt-tw__head { max-width: 62ch; margin: 0 0 clamp(26px, 3vw, 38px); }
.dt-tw__sec .dt-tw__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-tw__sub { margin: 0; font-size: .9375rem; line-height: 1.68; color: var(--dt-text-3); }
.dt-tw__set {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px);
}
.dt-tw {
  margin: 0; padding: 24px 22px; border-radius: 18px;
  background: var(--dt-bg-alt); border: 1px solid var(--dt-rule);
}
.dt-tw__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%;
  background: var(--dt-black); color: #00e050;
  font-family: var(--dt-font-body); font-size: .875rem; font-weight: 800;
}
.dt-tw__sec .dt-tw__t { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.018em; margin: 0 0 9px; color: var(--dt-black); }
.dt-tw__d { margin: 0; font-size: .875rem; line-height: 1.64; color: var(--dt-text-3); }

/* Why it matters, on the dark ground, with the examples beside it */
.dt-wy { position: relative; overflow: hidden; isolation: isolate; background: #0d0d0c; color: #fff; }
.dt-wy__grid {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
.dt-wy .dt-wy__h {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.12; margin: 0 0 16px; color: #fff;
}
.dt-wy__copy p { margin: 0 0 15px; font-size: .9375rem; line-height: 1.75; color: rgba(255,255,255,.68); }
.dt-wy__copy p:last-child { margin-bottom: 0; }
.dt-wy__exh {
  margin: 0 0 6px; font-family: var(--dt-font-body); font-size: .6875rem;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #00e050;
}
.dt-wy__exs { margin: 0 0 18px; font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.55); }.dt-ex__set { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dt-ex {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px; align-items: center; margin: 0; padding: 16px;
  border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  transition: border-color 220ms var(--dt-ease);
}
.dt-ex:hover { border-color: rgba(0,224,80,.4); }
.dt-ex__bad, .dt-ex__good { display: block; min-width: 0; font-size: .84375rem; line-height: 1.55; }
.dt-ex__bad { color: rgba(255,255,255,.45); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.dt-ex__good { color: #fff; font-weight: 600; }
.dt-ex__lab {
  display: block; margin-bottom: 5px; font-family: var(--dt-font-body); font-size: .5625rem;
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.dt-ex__bad .dt-ex__lab { color: rgba(255,255,255,.3); }
.dt-ex__good .dt-ex__lab { color: #00e050; }
.dt-ex__arrow { flex: 0 0 auto; color: rgba(0,224,80,.7); display: flex; }

/* Do it by hand */
.dt-mn__sec { background: var(--dt-bg-alt); }
.dt-mn__grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(26px, 3.4vw, 52px); align-items: start;
}
.dt-mn__sec .dt-mn__h {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.12; margin: 0 0 12px; color: var(--dt-black);
}
.dt-mn__sub { margin: 0 0 22px; font-size: .9375rem; line-height: 1.68; color: var(--dt-text-3); }
.dt-mn__set { list-style: none; margin: 0; padding: 0; }
.dt-mn__set li {
  display: flex; gap: 14px; margin: 0 0 10px; padding: 18px;
  border-radius: 14px; background: var(--dt-paper); border: 1px solid var(--dt-rule);
}
.dt-mn__n {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--dt-black); color: #00e050;
  font-family: var(--dt-font-body); font-size: .75rem; font-weight: 800;
}
.dt-mn__set strong { display: block; font-family: var(--dt-font-body); font-size: .9375rem; font-weight: 700; color: var(--dt-black); margin-bottom: 6px; }
.dt-mn__set span { display: block; font-size: .875rem; line-height: 1.66; color: var(--dt-text-3); }
.dt-mn__side {
  padding: 24px 22px; border-radius: 18px;
  background: var(--dt-black); color: #fff; position: sticky; top: 96px;
}
.dt-mn__sidelab {
  margin: 0 0 10px; font-family: var(--dt-font-body); font-size: .625rem;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #00e050;
}
.dt-mn__sidep { margin: 0 0 18px; font-size: .875rem; line-height: 1.7; color: rgba(255,255,255,.72); }
.dt-mn__side .dt-mn__sidep a { color: #00e050; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dt-mn__side .dt-qb__cta { background: #00e050; border-color: #00e050; color: var(--dt-black); width: 100%; }
.dt-mn__side .dt-qb__cta:hover { background: #fff; border-color: #fff; color: var(--dt-black); }

@media (max-width: 1080px) {
  .dt-tw__set { grid-template-columns: 1fr; }
  .dt-wy__grid, .dt-mn__grid { grid-template-columns: 1fr; }
  .dt-mn__side { position: static; }
}
@media (max-width: 640px) {
  .dt-ex { grid-template-columns: 1fr; gap: 10px; }
  .dt-ex__arrow { transform: rotate(90deg); justify-content: center; }
  .dt-tp__sticker { font-size: .625rem; padding: 6px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-tp__dot { animation: none; }
  .dt-ex, .dt-tw { transition: none !important; }
}

/* ==========================================================================
   Blog index.
   ========================================================================== */
.dt-bl__eyebrow { margin: 0 0 10px; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dt-accent); }
.dt-bl__h { margin: 0 0 14px; max-width: 20ch; font-family: var(--dt-font-display); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; color: var(--dt-black); }
.dt-bl__lede { margin: 0 0 40px; max-width: 66ch; font-size: 1.0625rem; line-height: 1.65; color: var(--dt-text-2, #43413e); }

.dt-bl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.dt-bl__link { display: block; height: 100%; border: 1px solid var(--dt-rule, #e6e6e3); border-radius: 18px; background: var(--dt-paper, #fff); overflow: hidden; text-decoration: none; color: inherit; transition: transform 200ms var(--dt-ease, ease), box-shadow 200ms var(--dt-ease, ease); }
.dt-bl__link:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(24, 23, 22, .3); }
.dt-bl__media { display: block; aspect-ratio: 16 / 10; background: var(--dt-bg-alt, #fafaf9); overflow: hidden; }
.dt-bl__img { width: 100%; height: 100%; object-fit: cover; }
.dt-bl__ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--dt-green-wash, #f2f8f4), var(--dt-bg-alt, #fafaf9)); }
.dt-bl__body { display: block; padding: 22px; }
.dt-bl__date { display: block; margin-bottom: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dt-text-3, #77746e); }
.dt-bl__t { display: block; margin-bottom: 8px; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--dt-black); }
.dt-bl__x { display: block; margin-bottom: 14px; font-size: .875rem; line-height: 1.6; color: var(--dt-text-2, #43413e); }
.dt-bl__more { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 800; color: var(--dt-accent); }
.dt-bl__more svg { width: 15px; height: 15px; transition: transform 180ms var(--dt-ease, ease); }
.dt-bl__link:hover .dt-bl__more svg { transform: translateX(3px); }

.dt-bl__wait { max-width: 640px; padding: clamp(30px, 4vw, 52px); border: 1px solid var(--dt-rule, #e6e6e3); border-radius: 22px; background: var(--dt-paper, #fff); text-align: center; margin-inline: auto; }
.dt-bl__waitico { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 16px; background: var(--dt-green-wash, #f2f8f4); color: var(--dt-accent); }
.dt-bl__waitico svg { width: 24px; height: 24px; }
.dt-bl__waith { margin: 0 0 12px; font-family: var(--dt-font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; color: var(--dt-black); }
.dt-bl__waitx { margin: 0 0 24px; font-size: .9375rem; line-height: 1.7; color: var(--dt-text-2, #43413e); }
.dt-bl__waitacts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

@media (max-width: 1000px) { .dt-bl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dt-bl__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contact form: the attachment, and the phone ----------
   iOS zooms the whole page when a focused input is smaller than 16px, so the
   type goes up on small screens rather than holding the desktop 15px. The
   consent box was 13px square, well under the 24px a fingertip needs. */

.dt-form .elementor-field-type-upload .elementor-field {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px dashed var(--dt-rule);
  border-radius: 12px;
  background: var(--dt-bg-alt);
  font-family: var(--dt-font-body);
  font-size: .875rem;
  color: var(--dt-text-2);
  cursor: pointer;
}

.dt-form .elementor-field-type-upload .elementor-field:hover {
  border-color: var(--dt-text-3);
}

.dt-form .elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
}

.dt-form .elementor-field-type-acceptance input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--dt-accent);
  cursor: pointer;
}

.dt-form .elementor-field-type-acceptance .elementor-field-option label {
  padding-top: 2px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .dt-form .elementor-field-textual,
  .dt-form select.elementor-field-textual,
  .dt-form .elementor-field-type-upload .elementor-field {
    font-size: 16px;
  }

  /* The desktop rule above uses the attribute selector, so match it. */
  .dt-form .elementor-button,
  .dt-form .elementor-button[type="submit"] {
    width: 100%;
    min-height: 52px;
    justify-content: center;
    font-size: 16px;
  }
}

/* ==========================================================================
   Contact
   One screen. Who we are and how to reach us on the left, the form on the
   right, and nothing else. The six routing cards that used to sit above the
   form are gone: the subject select does the same job inside the form, and
   their .dt-ct class collided with the cart's.
   ========================================================================== */

/* Elementor's .e-con carries max-width:100%, so the class has to be doubled
   up to out-specify it. Without this the section ran the full window and the
   h1 sat 36px left of the header logo on a 1366 laptop. The wide container
   plus the standard gutter puts both at the same x. */
.dt-cf,
.dt-cf.e-con {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
  width: 100%;
  max-width: var(--dt-w-wide);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--dt-gutter) clamp(56px, 7vw, 96px);
  grid-template-areas:
    'intro form'
    'aside form';
  grid-template-rows: auto 1fr;
}

.dt-cf__left,
.dt-cf__left.e-con { grid-area: intro; }

.dt-cf__right,
.dt-cf__right.e-con { grid-area: form; }

.dt-cf__aside,
.dt-cf__aside.e-con {
  grid-area: aside;
  padding: 0;
  align-self: start;
}

/* Elementor gives every child container 10px of padding of its own, which
   pushed the h1 ten pixels right of the header logo. */
.dt-cf__left,
.dt-cf__left.e-con {
  padding: 0;
}

.dt-cf__eyebrow {
  margin: 0 0 var(--dt-4);
  font-family: var(--dt-font-body);
  font-size: var(--dt-fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dt-accent);
}

.dt-cf__h {
  margin: 0 0 var(--dt-5);
  font-family: var(--dt-font-display);
  font-size: var(--dt-fs-h1);
  line-height: var(--dt-lh-tight);
  color: var(--dt-text);
}

.dt-cf__lede {
  margin: 0 0 var(--dt-6);
  max-width: 40ch;
  font-size: var(--dt-fs-body);
  line-height: var(--dt-lh-base);
  color: var(--dt-text-2);
}

.dt-cf__mail {
  display: inline-block;
  font-size: var(--dt-fs-body);
  font-weight: 600;
  color: var(--dt-text);
  text-decoration: none;
  border-bottom: 2px solid var(--dt-accent);
  padding-bottom: 2px;
  transition: color .15s ease;
}

.dt-cf__mail:hover,
.dt-cf__mail:focus-visible {
  color: var(--dt-accent);
  text-decoration: none;
}

.dt-cf__note {
  margin: var(--dt-6) 0 0;
  max-width: 38ch;
  font-size: var(--dt-fs-sm);
  line-height: var(--dt-lh-base);
  color: var(--dt-text-3);
}

.dt-cf__right,
.dt-cf__right.e-con {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--dt-rule);
  border-radius: var(--dt-r-lg);
  background: var(--dt-paper);
  box-shadow: var(--dt-shadow-raised);
}

.dt-cf__right .elementor-form {
  max-width: none;
}

@media (max-width: 900px) {
  /* Must repeat the doubled class, or the base rule above out-specifies this
     one and the page stays in two columns on a phone. */
  .dt-cf,
  .dt-cf.e-con {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'intro'
      'form'
      'aside';
    grid-template-rows: auto auto auto;
    gap: var(--dt-8);
  }

  .dt-cf__left,
  .dt-cf__left.e-con {
    position: static;
  }

  .dt-cf__lede,
  .dt-cf__note {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .dt-cf__right,
  .dt-cf__right.e-con {
    padding: var(--dt-5);
    border-radius: var(--dt-r-md);
  }

  .dt-cf__panel {
    padding: var(--dt-5);
  }
}

/* The native file input cannot be replaced, but its button can be dressed. */
.dt-form input[type="file"] {
  padding: 9px 12px;
}

.dt-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid var(--dt-rule);
  border-radius: 8px;
  background: var(--dt-paper);
  font-family: var(--dt-font-body);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--dt-text);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.dt-form input[type="file"]::file-selector-button:hover {
  border-color: var(--dt-accent);
  color: var(--dt-accent);
}

/* The brand panel under the address. The page was white type on white with a
   green underline and nothing else; this is where the brand actually lands. */
.dt-cf__panel {
  margin: var(--dt-8) 0 0;
  padding: var(--dt-6);
  border-radius: var(--dt-r-lg);
  background: var(--dt-black);
  color: var(--dt-paper);
}

.dt-cf__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--dt-5);
  border-radius: var(--dt-r-md);
  background: var(--dt-accent);
  color: var(--dt-black);
  font-family: var(--dt-font-body);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}

.dt-cf__promise {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--dt-4);
}

.dt-cf__promise li {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-3);
  font-size: var(--dt-fs-sm);
  line-height: var(--dt-lh-snug);
  color: rgba(255, 255, 255, .82);
}

.dt-cf__promise svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  color: var(--dt-accent);
}

.dt-cf__promise strong {
  color: var(--dt-paper);
  font-weight: 600;
}