/* ============================================================
   WHAT IT HANDS BACK — the rotating benefit line, and the two dials
   that turn it into a number. Section-scoped; every selector .dk-.

   Bone ground, so the accent is --signal-ink-bone (Signal Moss on this
   build). Signal itself is 1.19:1 on Bone and is never used here.

   The cards and bars this section used to carry are gone at the client's
   request. What replaced them is smaller and says more: one static
   promise, one rotating payoff, and two sliders whose output is computed
   from them rather than typed underneath.
   ============================================================ */
.dk{padding:88px 0;background:var(--bone,#F2F0E9);color:var(--carbon,#171918);
  border-top:1px solid var(--nv-border-alt,#C8C6BE)}
.dk *,.dk *::before,.dk *::after{box-sizing:border-box}

.dk-head{display:flex;flex-direction:column;gap:18px}
.dk-k{font-family:var(--mono,"Geist Mono",monospace);font-weight:500;font-size:.6875rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--nv-slate,#3A3D3B)}
/* Three steps, not two. The rotating slot is an atomic inline that has to fit
   beside "Now they can" on one line, and the longest phrase needs ~825px at
   2.75rem — so the top step only applies where there is room for it. Below
   1240 the headline drops to the standard v3 h2 and the slot wraps instead of
   being clipped. */
.dk-head h2{margin:0;font-weight:600;font-size:1.6875rem;line-height:1.18;
  letter-spacing:-.02em;color:var(--carbon,#171918)}
@media(min-width:769px){  .dk-head h2{font-size:2.375rem} }
@media(min-width:1240px){ .dk-head h2{font-size:2.75rem} }

/* ---- the rotating slot -------------------------------------------------
   The box resizes to the incoming phrase, measured off a hidden span in the
   slot's own font so the width is exact rather than eased into. Motion is
   suspended while the section is off-screen and removed entirely under
   prefers-reduced-motion, which keeps it inside the v3 §4 carve-out. */
/* Base: a plain inline highlight that wraps with the headline. No fixed width,
   nothing clipped — the phrase simply cross-fades in place. */
.dk-rot{display:inline;color:var(--signal-ink-bone,#41630F);
  background:rgba(65,99,15,.085);box-shadow:0 0 0 1px rgba(65,99,15,.30);
  border-radius:5px;padding:.04em .3em;-webkit-box-decoration-break:clone;
  box-decoration-break:clone}
.dk-rot > i{font-style:normal;transition:opacity .2s ease}
.dk-rot.out > i{opacity:0}

/* Wide only: the box resizes to the incoming phrase, measured off a hidden span
   in the slot's own font so the width is exact rather than eased into. */
@media(min-width:1240px){
  .dk-rot{display:inline-block;text-align:left;white-space:nowrap;overflow:hidden;
    vertical-align:-.16em;background:rgba(65,99,15,.085);
    border:1px solid rgba(65,99,15,.30);box-shadow:none;border-radius:7px;
    padding:.02em .34em .1em;transition:width .44s cubic-bezier(.22,.61,.36,1)}
  .dk-rot > i{display:inline-block;transition:opacity .2s ease,transform .26s ease}
  .dk-rot.out > i{transform:translateY(-.16em)}
}
/* Motion is suspended while the section is off-screen and removed entirely
   under prefers-reduced-motion, which keeps it inside the v3 §4 carve-out. */
@media(prefers-reduced-motion:reduce){ .dk-rot,.dk-rot > i{transition:none} }

/* ---- the two dials, and what they add up to ---------------------------- */
/* Three across at full width: the two dials take a column each and the answer
   sits at the container's right edge, so the row fills rather than leaving a
   void between a narrow control stack and a right-aligned figure. The footnote
   runs under the dials only — it explains them, not the number. */
.dk-calc{margin-top:40px;padding-top:26px;border-top:1px solid var(--nv-border-alt,#C8C6BE);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,auto);
  column-gap:44px;row-gap:20px;align-items:start}
.dk-calc .dk-field{grid-row:1}
.dk-calc .dk-out{grid-row:1 / 3;grid-column:3}
.dk-calc .dk-fine{grid-row:2;grid-column:1 / 3}

.dk-field{margin-bottom:0}
.dk-flabel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:9px}
.dk-flabel .n{font-size:.875rem;color:var(--carbon,#171918)}
.dk-flabel .v{font-family:var(--mono,"Geist Mono",monospace);font-weight:500;
  font-size:.875rem;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:var(--carbon,#171918)}

.dk-range{-webkit-appearance:none;appearance:none;width:100%;height:18px;min-height:0;
  background:transparent;cursor:pointer;display:block;margin:0}
.dk-range:focus-visible{outline:2px solid var(--carbon,#171918);outline-offset:3px}
.dk-range::-webkit-slider-runnable-track{height:2px;background:#C8C6BE}
.dk-range::-moz-range-track{height:2px;background:#C8C6BE}
.dk-range::-moz-range-progress{height:2px;background:var(--carbon,#171918)}
.dk-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;
  margin-top:-6px;border-radius:999px;background:var(--carbon,#171918);border:0}
.dk-range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:999px;
  background:var(--carbon,#171918)}

.dk-fine{margin:0;font-size:.8125rem;line-height:1.55;color:var(--ink3-bone,#555956);max-width:70ch}

.dk-out{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:12px}
.dk-big{font-family:var(--mono,"Geist Mono",monospace);font-weight:500;
  font-size:clamp(2.25rem,5.4vw,3.5rem);line-height:1;letter-spacing:-.035em;
  color:var(--signal-ink-bone,#41630F);font-variant-numeric:tabular-nums;white-space:nowrap}
.dk-big span{display:block;margin-top:10px;font-size:.6875rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--nv-slate,#3A3D3B)}
.dk-sub{font-family:var(--mono,"Geist Mono",monospace);font-size:.6875rem;letter-spacing:.04em;
  line-height:1.8;color:var(--ink3-bone,#555956);font-variant-numeric:tabular-nums;max-width:52ch}
.dk-sub b{color:var(--carbon,#171918);font-weight:500}

.dk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

@media(max-width:1100px){
  .dk-calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:26px}
  .dk-calc .dk-out{grid-row:2;grid-column:1 / 3;align-items:flex-start;text-align:left}
  .dk-calc .dk-fine{grid-row:3;grid-column:1 / 3}
}
@media(max-width:900px){
  .dk{padding:64px 0}
  .dk-calc{grid-template-columns:1fr;row-gap:22px}
  .dk-calc .dk-field:nth-of-type(2){grid-row:2}
  .dk-calc .dk-out{grid-row:3;grid-column:1}
  .dk-calc .dk-fine{grid-row:4;grid-column:1}
}
@media(max-width:768px){ .dk-head h2{line-height:1.25} }