/* Demo-kit campaign — a self-contained stylesheet.
 *
 * Loaded INSTEAD of site.css, never alongside it, and every selector is
 * prefixed `dk-` or scoped under `body.dk`. Nothing here can reach the 46
 * guides, and nothing in site.css reaches this page. That is the reason the
 * campaign has its own layout rather than a variant of the guide one.
 *
 * The colours are not invented. They are sampled from the flyer that ships
 * inside the box (src/assets/img/campaign/flyer-da.pdf), so the printed piece
 * on the counter and the page the electrician opens are the same object:
 *
 *   #0a2647  the dark band at the foot of the flyer
 *   #112c54  the hero gradient where it is darkest
 *   #1f61a2  the hero gradient at its light edge, top right
 *   #4495d1  the card edge and the numbered circles
 *   #aae1fa  the accent half of the headline, and the eyebrow
 *   #f1f7fc  the card fill
 *   #122a4f  body text
 *
 * Manrope is already self-hosted for the rest of the site, and the flyer sets
 * one family too, so there is no second typeface to load or to justify.
 */

:root {
  --dk-navy-deep: #0a2647;
  --dk-navy:      #112c54;
  --dk-blue-mid:  #1f61a2;
  --dk-edge:      #4495d1;
  --dk-edge-dark: #2f7cb8;
  --dk-sky:       #aae1fa;
  --dk-card:      #f1f7fc;
  --dk-ink:       #122a4f;
  --dk-ink-soft:  #4a5f7d;
  --dk-line:      #d7e4f0;
  --dk-paper:     #ffffff;
  --dk-page:      #f7fafd;
  --dk-warn:      #b7791f;
  --dk-warn-bg:   #fff8e8;
  --dk-warn-line: #f0d199;
  --dk-demo:      #b2361f;
  --dk-demo-bg:   #fdefec;

  --dk-r:    14px;
  --dk-r-sm: 9px;
  --dk-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* The flyer's own rhythm: 18 pt headline over 8.2 pt body, about 2.2:1.
   * Held here so the scale is one decision rather than forty. */
  --dk-h1: clamp(30px, 6vw, 52px);
  --dk-h2: clamp(23px, 3.4vw, 32px);
  --dk-h3: 19px;
  --dk-body: 16.5px;
}

*, *::before, *::after { box-sizing: border-box; }

body.dk {
  margin: 0;
  font-family: var(--dk-font);
  font-size: var(--dk-body);
  line-height: 1.62;
  color: var(--dk-ink);
  background: var(--dk-page);
  -webkit-font-smoothing: antialiased;
  /* Nothing on this page may push the viewport sideways. The one guarantee
   * that survives a card, a table or a long word being wrong. */
  overflow-x: hidden;
}

body.dk img { max-width: 100%; height: auto; }

.dk-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--dk-paper); color: var(--dk-ink);
  padding: 10px 16px; z-index: 50; border-radius: 0 0 var(--dk-r-sm) 0;
}
.dk-skip:focus { left: 0; }

body.dk :focus-visible {
  outline: 3px solid var(--dk-edge);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- Shell ------------------------------------------------------------ */
.dk-wrap { width: min(1080px, 100% - 40px); margin-inline: auto; }
@media (max-width: 480px) { .dk-wrap { width: min(1080px, 100% - 32px); } }

.dk-section { padding-block: clamp(48px, 7vw, 88px); }
.dk-section--tight { padding-block: clamp(36px, 5vw, 56px); }

/* ---- Top bar ---------------------------------------------------------- */
.dk-top { background: var(--dk-navy-deep); color: #fff; }
.dk-top__in {
  width: min(1080px, 100% - 40px); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 56px;
}
.dk-top__brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.01em; }
.dk-top__mark { display: inline-flex; width: 20px; color: var(--dk-sky); }
.dk-top__mark svg { width: 20px; height: 20px; }
.dk-top__name { font-size: 15px; }
.dk-top__langs { display: flex; gap: 4px; }
.dk-top__langs a {
  color: #cfe0f0; text-decoration: none; font-size: 13px; font-weight: 700;
  padding: 5px 9px; border-radius: var(--dk-r-sm);
}
.dk-top__langs a[aria-current="true"] { background: rgba(255,255,255,.14); color: #fff; }
.dk-top__langs a:hover { color: #fff; }

/* ---- Hero ------------------------------------------------------------- */
/* The flyer's hero is a navy gradient running dark at the left to a lighter
 * blue at the top right, with one large soft arc behind it. Same here. */
.dk-hero {
  position: relative;
  background:
    radial-gradient(120% 130% at 88% 0%, #2a6ea8 0%, rgba(42,110,168,0) 58%),
    linear-gradient(118deg, var(--dk-navy) 0%, #0d3a72 52%, var(--dk-blue-mid) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* The arc. Decoration, so it is a pseudo-element and never in the a11y tree. */
.dk-hero::after {
  content: "";
  position: absolute; z-index: -1;
  right: -14%; top: -46%;
  width: min(820px, 92vw); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 64%, rgba(255,255,255,.10), rgba(255,255,255,0) 66%);
  /* campaign.js writes --dk-par from the scroll position. Unset it is 0, so
     the arc simply sits still when the script never runs. */
  transform: translate3d(0, var(--dk-par, 0px), 0);
  will-change: transform;
}
.dk-hero__in {
  width: min(1080px, 100% - 40px); margin-inline: auto;
  padding-block: clamp(44px, 7vw, 86px);
  display: grid; gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) {
  .dk-hero__in { grid-template-columns: 1.08fr .92fr; }
}

.dk-eyebrow {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 800;
  letter-spacing: .18em;
  color: var(--dk-sky);
}

.dk-hero h1 {
  margin: 0 0 18px;
  font-size: var(--dk-h1);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.022em;
  text-wrap: balance;
}
/* The flyer sets the second half of its headline in the light blue. It is the
 * flyer's signature move, so it is kept rather than avoided. */
.dk-hero h1 em { font-style: normal; color: var(--dk-sky); }

.dk-hero__lead {
  margin: 0 0 20px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: #d8e6f4;
  max-width: 54ch;
}
.dk-hero__note {
  margin: 0;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 7px 16px;
}

/* The box is an object sitting in the hero, not a backdrop. It is 1227x1027
 * with transparency; stretched it goes soft, so it is capped at its own width
 * and centred. */
.dk-hero__box { justify-self: center; max-width: 460px; width: 100%; }
.dk-hero__box img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 44px rgba(3, 20, 45, .46));
  will-change: transform;
}

/* ---- Cards ------------------------------------------------------------ */
.dk-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .dk-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) { .dk-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* The flyer's card: white to very pale blue, a hairline all round, and a
 * heavier blue edge along the bottom. The bottom edge is the whole identity of
 * the shape — without it this is any card on any site. */
.dk-card {
  background: linear-gradient(180deg, var(--dk-paper) 0%, var(--dk-card) 100%);
  border: 1px solid var(--dk-line);
  border-bottom: 3px solid var(--dk-edge);
  border-radius: var(--dk-r);
  padding: 26px 24px;
}
.dk-card h3 { margin: 0 0 8px; font-size: var(--dk-h3); font-weight: 800; letter-spacing: -.01em; }
.dk-card p  { margin: 0; color: var(--dk-ink-soft); }

.dk-h2 {
  margin: 0 0 8px;
  font-size: var(--dk-h2); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15;
  text-wrap: balance;
}
.dk-h2 em { font-style: normal; color: var(--dk-edge-dark); }
.dk-lead { margin: 0 0 30px; color: var(--dk-ink-soft); max-width: 62ch; }

/* ---- Numbered steps --------------------------------------------------- */
/* The flyer's circle straddles the card's top edge. It earns the number here:
 * the four steps are a real sequence — pick a branch, fill in, get the mail,
 * collect — not three unrelated features wearing 01/02/03. */
.dk-steps { display: grid; gap: 30px 18px; grid-template-columns: 1fr; margin-top: 34px; }
@media (min-width: 680px) { .dk-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .dk-steps { grid-template-columns: repeat(4, 1fr); } }

.dk-step { position: relative; padding-top: 22px; }
.dk-step__card {
  background: var(--dk-paper);
  border: 1px solid var(--dk-line);
  border-bottom: 3px solid var(--dk-edge);
  border-radius: var(--dk-r);
  padding: 30px 20px 22px;
  height: 100%;
}
.dk-step__n {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dk-paper);
  border: 2px solid var(--dk-edge);
  color: var(--dk-edge-dark);
  font-weight: 800; font-size: 17px;
  z-index: 1;
}
.dk-step h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; text-align: center; }
.dk-step p  { margin: 0; color: var(--dk-ink-soft); font-size: 15px; text-align: center; }

/* ---- The sticky device section ---------------------------------------- */
/* The one bold moment on the page. Four devices, presented in turn against a
 * pane that stays put while the descriptions move past it. Everything else on
 * the page is quiet so that this is the thing that is remembered.
 *
 * It is built out of ordinary sticky positioning and block flow, so with
 * JavaScript blocked it degrades to four headings and four paragraphs in
 * order — which is the content, complete. */
.dk-devices { background: var(--dk-navy-deep); color: #fff; }
.dk-devices .dk-h2 { color: #fff; }
.dk-devices .dk-lead { color: #b9cde2; }

.dk-dev { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 30px; }
@media (min-width: 900px) { .dk-dev { grid-template-columns: 300px 1fr; gap: 56px; align-items: start; } }

.dk-dev__pane {
  position: sticky; top: 24px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--dk-r);
  background: rgba(255,255,255,.05);
  padding: 22px;
}
.dk-dev__count { font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--dk-sky); }
.dk-dev__now { margin: 10px 0 0; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; min-height: 2.4em; }
.dk-dev__bars { display: flex; gap: 6px; margin-top: 16px; }
.dk-dev__bar { height: 3px; flex: 1; background: rgba(255,255,255,.2); border-radius: 2px; }
.dk-dev__bar[data-on] { background: var(--dk-sky); }

.dk-dev__list { display: grid; gap: 14px; }
.dk-dev__item {
  border: 1px solid rgba(255,255,255,.14);
  border-left: 3px solid var(--dk-edge);
  border-radius: var(--dk-r);
  background: rgba(255,255,255,.04);
  padding: 24px 24px;
  /* Phone: one column, picture above text, because the picture is first in the
     source. A 640px square squeezed beside prose in a 348px card makes both
     unreadable. */
  display: grid;
  gap: 18px;
}

/* The product shot. No background and no frame: the files carry an alpha
   channel and the card is already a light panel on navy — a box behind a
   cut-out object is the one thing that would make it look pasted on. */
.dk-dev__shot { display: flex; align-items: center; justify-content: center; }

/* Scoped under body.dk deliberately. `body.dk img { max-width: 100% }` near the
   top of this file is (0,1,2) and beats a bare `.dk-dev__shot img` at (0,1,1) —
   same class count, one more element — so the rules below were being silently
   overridden. They happened to agree on the values that mattered, which is the
   worst version of that bug: it looks like it works. */
body.dk .dk-dev__shot img {
  display: block;
  width: 100%;      /* phone: full width of the card, centred, as briefed */
  height: auto;
}

/* 620px is where this page already goes to two columns — `.dk-grid--2` uses
   it. Reusing it rather than inventing a fifth breakpoint keeps the page
   changing shape at the widths it already changes shape at. */
@media (min-width: 620px) {
  .dk-dev__item {
    grid-template-columns: 1fr minmax(0, 32%);
    gap: 22px;
    align-items: stretch;
  }
  /* Text first in the visual order, picture second — the source order is the
     other way round for the phone layout, so it is named explicitly here
     rather than left to flow. */
  .dk-dev__text { grid-column: 1; grid-row: 1; }
  .dk-dev__shot { grid-column: 2; grid-row: 1; }
  /* The picture must not be able to set the row height — the text must.
     `max-height: 100%` did not do that: a grid row is sized by its TALLEST
     item, so the image set the height and the text stretched to match, which
     is the opposite of what was wanted. Measured: with the description cut to
     a single line the image stayed 215px and the text grew to 215px.

     Taking it out of flow is what actually works. The row is then sized by the
     text alone, and the picture fills whatever that leaves. It also removes any
     chance of a load-time jump in this cell: an absolutely positioned image
     contributes nothing to layout before or after it loads. */
  .dk-dev__shot { position: relative; min-height: 0; }
  body.dk .dk-dev__shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.dk-dev__role { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--dk-sky); }
.dk-dev__item h3 { margin: 8px 0 10px; font-size: 21px; font-weight: 800; letter-spacing: -.015em; }
.dk-dev__item p { margin: 0; color: #c5d7e8; }
.dk-dev__try {
  margin-top: 14px !important; padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 14.5px; color: #9fc6e6 !important;
}

/* On a phone the pane would eat the screen, so it is hidden and the items
 * stand on their own. Sticky with nowhere to stick is just clutter. */
@media (max-width: 899px) { .dk-dev__pane { display: none; } }

/* ---- Links out -------------------------------------------------------- */
.dk-out {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 16px; padding-top: 15px;
  border-top: 1px solid var(--dk-line);
  font-weight: 800; color: var(--dk-edge-dark); text-decoration: none;
}
.dk-out:hover { color: var(--dk-navy); }
.dk-out span:last-child { flex: none; }

.dk-avail { display: grid; gap: 10px; margin-top: 22px; max-width: 520px; }
.dk-avail a, .dk-avail span {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-radius: var(--dk-r-sm);
  border: 1px solid var(--dk-line); background: var(--dk-paper);
  font-weight: 700; text-decoration: none; color: var(--dk-ink);
}
.dk-avail a { border-bottom: 3px solid var(--dk-edge); }
.dk-avail span { color: var(--dk-ink-soft); font-weight: 600; background: transparent; }
.dk-avail em { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--dk-ink-soft); }

/* ---- Form ------------------------------------------------------------- */
/* No animation, no reveal, no hover lift, nothing observed. This is where the
 * conversion happens and it is supposed to be fast and boring. */
.dk-form-band { background: var(--dk-page); border-top: 1px solid var(--dk-line); }
.dk-form-card {
  background: var(--dk-paper);
  border: 1px solid var(--dk-line);
  border-top: 4px solid var(--dk-edge);
  border-radius: var(--dk-r);
  padding: clamp(22px, 3.4vw, 36px);
  max-width: 680px;
}
.dk-form-card h2 { margin: 0 0 6px; font-size: var(--dk-h2); font-weight: 800; letter-spacing: -.02em; }
.dk-form-card > p { margin: 0 0 24px; color: var(--dk-ink-soft); }

.dk-field { margin-bottom: 17px; }
.dk-row { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .dk-row { grid-template-columns: 1fr 1fr; } }

.dk-field label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.dk-field .dk-req { color: var(--dk-edge-dark); }

.dk-field input,
.dk-field select {
  width: 100%;
  font: inherit; font-size: 16px; /* 16px or iOS zooms the page on focus */
  color: var(--dk-ink);
  background: var(--dk-paper);
  border: 1px solid #b9cbdd;
  border-radius: var(--dk-r-sm);
  padding: 11px 13px;
  appearance: none;
}
.dk-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a5f7d' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px;
  padding-right: 38px;
}
.dk-field input:focus, .dk-field select:focus { border-color: var(--dk-edge); }
.dk-field input:user-invalid { border-color: #b2361f; }
.dk-field optgroup { font-weight: 800; }
.dk-field option:disabled { color: #93a5b8; }

/* The branch picker.
   A listbox built by demo-form.js, sitting where the native select was and
   looking exactly like it — the same border, radius, height and caret — so
   the form does not suddenly have one control that belongs to another page.
   The native select is still in the DOM, still carrying the value, and comes
   back the moment JavaScript does not run. */
.dk-combo { position: relative; }
.dk-combo__native { display: none; }

.dk-combo__button {
  width: 100%;
  font-size: 16px; /* 16px or iOS zooms the page on focus */
  color: var(--dk-ink-soft);
  background: var(--dk-paper);
  border: 1px solid #b9cbdd;
  border-radius: var(--dk-r-sm);
  padding: 11px 38px 11px 13px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a5f7d' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px;
  /* A long branch name wraps rather than pushing the page sideways. */
  overflow-wrap: anywhere;
}
.dk-combo__button.is-chosen { color: var(--dk-ink); }
.dk-combo__button:focus-visible {
  outline: 3px solid var(--dk-edge);
  outline-offset: 1px;
  border-color: var(--dk-edge);
}

.dk-combo__list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 5px; list-style: none;
  background: var(--dk-paper);
  border: 1px solid #b9cbdd; border-radius: var(--dk-r-sm);
  box-shadow: 0 14px 34px rgba(10, 38, 71, .18);
  /* Its own scroller. The page behind it never moves, and on a phone the list
     is never taller than the screen. */
  max-height: min(300px, 50vh); overflow-y: auto; overscroll-behavior: contain;
}
.dk-combo__group {
  padding: 9px 11px 5px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--dk-ink-soft);
}
.dk-combo__option {
  padding: 10px 11px; border-radius: 6px; cursor: pointer;
  font-size: 15.5px; line-height: 1.35; color: var(--dk-ink);
  overflow-wrap: anywhere;
}
.dk-combo__option.is-active { background: var(--dk-card); }
.dk-combo__option[aria-selected="true"] { font-weight: 700; }

/* Out of stock is marked, not greyed. The branch is real and the kits are on
   their way — grey would say "ignore this", and the note under the field says
   the opposite. #b2361f on white is 6.1:1, well past the 4.5:1 it needs. */
.dk-combo__option--out { cursor: default; }
.dk-combo__out { color: var(--dk-demo); font-weight: 700; }

/* The note under a field. Quiet, and only rendered when it has something to
   explain — a note about a label nobody can see teaches people to skip notes. */
.dk-field__note {
  margin: 7px 0 0;
  font-size: 13.5px; line-height: 1.5;
  color: var(--dk-ink-soft);
}

.dk-check {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  align-items: start;
  padding: 15px 16px; margin-bottom: 13px;
  border: 1px solid var(--dk-line); border-radius: var(--dk-r-sm);
  background: var(--dk-card);
}
.dk-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--dk-edge-dark); }
.dk-check label { font-size: 15px; line-height: 1.5; }
.dk-check__note { display: block; margin-top: 5px; font-size: 13.5px; color: var(--dk-ink-soft); }

.dk-btn {
  font: inherit; font-weight: 800; font-size: 16.5px;
  color: #fff; background: var(--dk-navy);
  border: 0; border-radius: var(--dk-r-sm);
  padding: 14px 26px; cursor: pointer;
  width: 100%;
}
@media (min-width: 560px) { .dk-btn { width: auto; min-width: 230px; } }
.dk-btn:hover { background: #0d3a72; }
.dk-btn[disabled] { background: #7f93ab; cursor: default; }
.dk-btn--ghost {
  background: transparent; color: var(--dk-navy);
  border: 1px solid var(--dk-navy); padding: 11px 20px; font-size: 15px;
}
.dk-btn--ghost:hover { background: var(--dk-card); }

.dk-note {
  border: 1px solid var(--dk-warn-line); background: var(--dk-warn-bg);
  border-radius: var(--dk-r-sm); padding: 15px 17px; margin-bottom: 17px;
}
.dk-note h4 { margin: 0 0 5px; font-size: 15px; font-weight: 800; color: var(--dk-warn); }
.dk-note p { margin: 0 0 12px; font-size: 15px; }
.dk-note p:last-child { margin-bottom: 0; }

.dk-error {
  border: 1px solid #e8b5a9; background: var(--dk-demo-bg);
  border-radius: var(--dk-r-sm); padding: 15px 17px; margin-bottom: 17px;
  font-size: 15px; color: #7d2414;
}

.dk-ok { border-bottom-color: #3f9a4f; }
.dk-ok h2 { color: #1f6b30; }
.dk-ok dl { display: grid; gap: 4px 16px; grid-template-columns: auto 1fr; margin: 20px 0 0; font-size: 15px; }
.dk-ok dt { font-weight: 700; color: var(--dk-ink-soft); }
.dk-ok dd { margin: 0; }

/* ---- Footer ----------------------------------------------------------- */
.dk-foot { background: var(--dk-navy-deep); color: #a8bfd6; }
.dk-foot__in {
  width: min(1080px, 100% - 40px); margin-inline: auto;
  padding-block: 34px; font-size: 14px;
}
.dk-foot p { margin: 0 0 8px; max-width: 74ch; }
.dk-foot__data { color: #d3e2f0; font-weight: 600; }
.dk-foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px !important; }
.dk-foot a { color: var(--dk-sky); }

/* ---- Prose (the privacy page) ----------------------------------------- */
.dk-prose { max-width: 68ch; }
.dk-prose h2 { margin: 34px 0 10px; font-size: 21px; font-weight: 800; letter-spacing: -.015em; }
.dk-prose h2:first-child { margin-top: 0; }
.dk-prose p, .dk-prose li { color: var(--dk-ink-soft); }
.dk-prose ul { padding-left: 20px; }
.dk-prose li { margin-bottom: 7px; }
.dk-prose a { color: var(--dk-edge-dark); }

/* ---- Reveal on scroll -------------------------------------------------- */
/* Opt-in, and only once JavaScript has said so. Without the class on <html>
 * nothing is hidden, so a blocked or failed script leaves the page fully
 * visible rather than blank — the failure mode that makes this pattern
 * dangerous is the one it must not have. */
.dk-js .dk-reveal { opacity: 0; transform: translateY(16px); }
.dk-js .dk-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}

/* ---- Reduced motion ---------------------------------------------------- */
/* Everything off. Not softened — off. The content stands still and is fully
 * readable, including the reveal, which means no opacity and no transform. */
@media (prefers-reduced-motion: reduce) {
  .dk-js .dk-reveal,
  .dk-js .dk-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dk-hero::after, .dk-hero__box img { transform: none !important; }
  .dk-dev__pane { position: static; }
  body.dk * { animation: none !important; }
}

/* "(optional)" beside a label. Quieter than the label, louder than nothing —
   a field nobody is required to fill in should say so where they read it. */
.dk-optional { font-weight: 600; color: var(--dk-ink-soft); }

/* The delivery-contact line. Outside the consent boxes and styled apart from
   them, so it cannot be read as a third thing to agree to. */
.dk-delivery {
  margin: 4px 0 20px;
  padding-left: 16px;
  border-left: 2px solid var(--dk-edge);
  font-size: 14.5px;
  color: var(--dk-ink-soft);
}

/* The spam warning on the receipt. Amber rather than red: nothing has gone
   wrong, but it is the one thing that stops somebody concluding the form
   failed when the mail does not appear. */
.dk-spam {
  margin: 0 0 18px;
  padding: 13px 15px;
  background: var(--dk-warn-bg);
  border: 1px solid var(--dk-warn-line);
  border-radius: var(--dk-r-sm);
  font-size: 14.5px;
  line-height: 1.55;
  color: #7a5310;
}