/* debumedia.com only: what the design system's components don't cover. Tokens only, no raw
   colours or sizes. The system itself is in assets/ds and is never edited here. */

html { background: var(--paper); }
body { margin: 0; }
main { display: block; }

/* In-page links ("See more") land below the sticky nav pill, not under it. */
main [id] { scroll-margin-top: var(--space-24); }

/* Skip link: hidden until focused. */
.dm-skip {
  position: absolute; left: var(--space-3); top: -100px; z-index: 100;
  background: var(--surface); color: var(--ink); border: var(--border-control) solid var(--border);
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); text-decoration: none;
}
.dm-skip:focus { top: var(--space-3); outline: 2px solid var(--focus); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* NavPill with five links and the button needs about 800px; the system collapses it only
   below 720px, so between 721 and 860px it would spill. Move this into the system's NavPill. */
@media (min-width: 721px) and (max-width: 860px) {
  .dm-nav__pill > .dm-nav__link, .dm-nav__pill > .dm-nav__cta { display: none; }
  .dm-nav__toggle { display: inline-flex; }
}

/* NavPill: the menu icon turns into a cross while the phone menu is open. */
.dm-nav__icon-close { display: none; }
.dm-nav[data-open] .dm-nav__icon-open { display: none; }
.dm-nav[data-open] .dm-nav__icon-close { display: block; }

/* The Weather clouds hang past the page edge. Here .dm-page is the body, and a body's overflow-x: clip passes to the
   viewport, where phones still widen the page and let it slide sideways; main clips them instead (no scroll container,
   so the sticky nav and the sun leaving through the top are untouched). The footer clips its own scene. */
main { overflow-x: clip; }

/* A page scene gives the hero its height, so a short card (a title alone) would stretch to fill it. */
.dm-hero:has(.dm-hero__backdrop--scene) { align-items: flex-start; }

/* On phones a page scene keeps its object low on the right, where the next section's cloud would hang into it.
   A form right under the hero has no room for one at all. */
@media (max-width: 720px) {
  .dm-hero:has(.dm-hero__backdrop--scene) + .dm-section > .dm-cloud { top: calc(var(--space-3) * -1); }
  .dm-section--near > .dm-cloud { display: none; }
}

/* Footer: the exali insurance seal, the badge under the copyright in the brand column. */
.dm-footer__seal img { display: block; width: 72px; height: auto; }

/* More room between a head and what follows it (the logo wall). */
.dm-stack--loose { gap: var(--space-20); }
@media (max-width: 720px) { .dm-stack--loose { gap: var(--space-16); } }

/* Steps, rail: no top rules, hairline dividers between columns, the number large in the
   display face. Number and drawing stand on one line of a fixed height, so every title
   starts level whatever the drawing's shape. The column count follows the system's Steps
   (4, 2 below 861px, 1 below 561px); each layout is set on its own so no rule overrides
   another. To move into the system's Steps. */
.dm-steps--rail { gap: 0; }
.dm-steps--rail .dm-step {
  border-top: 0; padding: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: calc(var(--space-24) + var(--space-3)) auto auto;
  grid-template-areas: "num art" "title title" "text text";
  column-gap: var(--space-3); row-gap: var(--space-3);
}
.dm-steps--rail .dm-step__num { grid-area: num; align-self: end; color: var(--ink); line-height: 1; }
.dm-steps--rail .dm-step > .dm-drawing { grid-area: art; margin: 0; }
.dm-steps--rail .dm-step > .dm-drawing img { height: 100%; object-fit: contain; object-position: right bottom; }
.dm-steps--rail .dm-step__title { grid-area: title; margin-top: var(--space-5); }
.dm-steps--rail .dm-step__text { grid-area: text; }
@media (min-width: 861px) {
  .dm-steps--rail .dm-step { padding-inline: var(--space-8); }
  .dm-steps--rail .dm-step + .dm-step { border-left: var(--border-hairline) solid var(--line); }
  .dm-steps--rail .dm-step:first-child { padding-left: 0; }
  .dm-steps--rail .dm-step:last-child { padding-right: 0; }
}
@media (min-width: 561px) and (max-width: 860px) {
  .dm-steps--rail { row-gap: var(--space-12); }
  .dm-steps--rail .dm-step:nth-child(odd) { padding-right: var(--space-8); }
  .dm-steps--rail .dm-step:nth-child(even) { padding-left: var(--space-8); border-left: var(--border-hairline) solid var(--line); }
}
@media (max-width: 560px) {
  .dm-steps--rail .dm-step { padding-block: var(--space-8); }
  .dm-steps--rail .dm-step:first-child { padding-top: 0; }
  .dm-steps--rail .dm-step:last-child { padding-bottom: 0; }
  .dm-steps--rail .dm-step + .dm-step { border-top: var(--border-hairline) solid var(--line); }
}

/* A full-bleed band in a tile colour, for one section that should stand apart. Text and
   lines take the band's own on-tile colour. */
.dm-band {
  padding-block: var(--section);
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
  background: var(--tile-stone); color: var(--on-tile-stone);
}
.dm-band--peach { background: var(--tile-peach); color: var(--on-tile-peach); }
.dm-band--blush { background: var(--tile-blush); color: var(--on-tile-blush); }
.dm-band--sage { background: var(--tile-sage); color: var(--on-tile-sage); }
@media (max-width: 720px) { .dm-band { padding-block: var(--section-phone); } }

/* Who this is really for: the head and the four lines side by side, then the line that
   turns it beside the answer. */
.dm-who { display: grid; gap: var(--space-8); }
.dm-who > * { margin: 0; }
.dm-who__title { max-width: 9em; }
.dm-who__lines > span {
  display: block; padding: var(--space-4) 0;
  border-top: var(--border-hairline) solid color-mix(in srgb, currentColor 22%, transparent);
}
.dm-who__lines > span:last-child { border-bottom: var(--border-hairline) solid color-mix(in srgb, currentColor 22%, transparent); }
.dm-who__turn { font-weight: 600; max-width: 16em; }
.dm-who__answer { display: grid; justify-items: start; gap: var(--space-8); }
.dm-who__big { margin: 0; max-width: 20em; }
@media (min-width: 961px) {
  .dm-who { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: var(--space-16); row-gap: var(--space-20); }
}

/* Testimonials with more than one paragraph. */
.dm-quote__text p { margin: 0; }
.dm-quote__text p + p { margin-top: var(--space-3); }

/* A whole tile as a link keeps its tile colours. */
a.dm-tile { text-decoration: none; }
a.dm-tile:hover .dm-tile__title { text-decoration: underline; text-underline-offset: 0.18em; }
a.dm-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Logo wall: client logos as one-colour masks in ink-muted, still. --ar is a logo's width over
   its height and --lh how much of the cell's height it takes, so wide and square logos read
   the same size. A candidate for the design system. */
.dm-logos {
  list-style: none; margin: 0; padding: 0; color: var(--ink-muted);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-8) var(--tile-gap);
}
.dm-logos__item { display: flex; align-items: center; justify-content: center; height: var(--space-16); }
@media (max-width: 560px) { .dm-logos { row-gap: var(--space-3); } }
.dm-logos__logo {
  display: block; height: calc(var(--space-16) * var(--lh)); aspect-ratio: var(--ar); max-width: 100%;
  background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* A head beside its content on wide screens (FAQ), stacked below. */
.dm-split { display: grid; gap: var(--space-12); }
@media (min-width: 961px) {
  .dm-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
}

/* Less room between the Switch and the plan cards it changes. */
.dm-stack--tight { gap: var(--space-6); }

/* Switch: small Buttons in a radiogroup (dm_switch), the chosen one solid. To move into the system. */
.dm-switch { gap: var(--space-2); }

/* Three plan cards in a row: prices, buttons and lists start level, however long the names are. Each card's
   five parts (name, price, summary, button, list) share the row's tracks. A candidate for the system. */
@media (min-width: 961px) {
  .dm-plans:not(.dm-plans--lite) .dm-plan { grid-row: span 5; grid-template-rows: subgrid; }
  .dm-plans:not(.dm-plans--lite) .dm-plan__list { align-content: start; }
}
/* Two cards side by side with different contents: spare height stays at the bottom, so the headings and rules line up. */
#support .dm-plans--lite .dm-plan { align-content: start; }

/* Lite Dedicated Hosting: one plan, with the two tiles that lead on from it stacked beside it. */
.dm-plans--lite { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.dm-plans--lite .dm-tiles { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
@media (max-width: 960px) { .dm-plans--lite { grid-template-columns: minmax(0, 1fr); } }

/* A plan's small print under a price that sits inside a billing view: the view has no gap to pull back from. */
.dm-plan__view .dm-plan__alt { margin-top: var(--space-2); }
.dm-plan__view .dm-plan__facts { margin-top: var(--space-4); }
.dm-plan__view .dm-plan__perk { margin-top: var(--space-3); }

/* A plan's name and badge share a line until a narrow phone runs out of room. */
.dm-plan__top { flex-wrap: wrap; }

/* Care: each row of the list sits level across the three cards, so a feature can be read straight across.
   17 rows: the seven every plan includes, then the ten that differ. */
@media (min-width: 961px) {
  .dm-plans.dm-plans--care .dm-plan { grid-row: span 21; }
  .dm-plans.dm-plans--care .dm-plan__list { grid-row: span 17; grid-template-rows: subgrid; row-gap: var(--space-3); align-content: stretch; }
  /* The rows and the box sit at the foot of the price block, so they stay level when one card's price wraps. */
  .dm-plans--care .dm-plan__view:not([hidden]) { display: flex; flex-direction: column; }
  .dm-plans--care .dm-plan__view .dm-plan__facts { margin-top: auto; padding-top: var(--space-4); }
}

/* A plan's button again under a long list, for phones, where the list is one long column. */
.dm-plan__end { display: none; }
@media (max-width: 720px) { .dm-plan__end { display: block; } }

/* Retainer: the hours under the price, what each card is really selling. */
.dm-plan__hours { margin: var(--space-4) 0 0; }

/* Hosting: five plans, three in a row and the two big ones below, the same total width. */
@media (min-width: 961px) {
  .dm-plans--hosting { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dm-plans--hosting .dm-plan { grid-column: span 2; }
  .dm-plans--hosting .dm-plan:nth-child(n + 4) { grid-column: span 3; }
}

/* Every hosting plan's list, in columns on one wide card. */
.dm-included .dm-plan { max-width: 100%; }
@media (min-width: 721px) { .dm-included .dm-plan__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Between 721 and 960px its two columns start where the stacked plan cards' columns start. */
@media (min-width: 721px) and (max-width: 960px) { .dm-included .dm-plan__list { column-gap: var(--space-8); } }
@media (min-width: 961px) { .dm-included .dm-plan__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A link inside a tile or the closing band takes the band's own colour. */
.dm-tile .dm-link, .dm-cta .dm-link { color: inherit; }

/* PlanCard prices per billing period: the Switch sets data-billing-view on the scope. */
[data-billing-view="monthly"] [data-billing-price]:not([data-billing-price="monthly"]),
[data-billing-view="quarterly"] [data-billing-price]:not([data-billing-price="quarterly"]),
[data-billing-view="yearly"] [data-billing-price]:not([data-billing-price="yearly"]) { display: none; }

/* Every care price is printed in three currencies; the Switch sets data-currency-view on the scope. */
[data-currency-view="gbp"] [data-cur]:not([data-cur="gbp"]),
[data-currency-view="usd"] [data-cur]:not([data-cur="usd"]),
[data-currency-view="eur"] [data-cur]:not([data-cur="eur"]) { display: none; }

/* Two Switches on one line, one at each end. */
.dm-switches { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.dm-switches--end { justify-content: flex-end; }

/* The section right after a hero whose page is one form: nearer, so the form starts on the first screen. */
.dm-section--near { padding-top: var(--space-8); }

/* A column as wide as the hero card, for one form or one list. */
.dm-narrow { max-width: var(--hero-max); }

/* Testimonials: when the last card is alone on its row, it takes the row. */
.dm-quotes > .dm-quote:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
@media (min-width: 861px) { .dm-quotes--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Table: hairline rows, the chosen plan's column on white. Below 721px each row becomes a block, plan names over
   the answers, and a row with one answer for every plan says so once. To move into the system. */
.dm-table { width: 100%; border-collapse: collapse; }
.dm-table th, .dm-table td { padding: var(--space-4); border-bottom: var(--border-hairline) solid var(--line); text-align: left; vertical-align: middle; }
.dm-table thead th { border-bottom: var(--border-control) solid var(--ink); }
.dm-table tbody th { width: 34%; padding-left: 0; font-weight: 600; }
.dm-table td { width: 22%; color: var(--ink-muted); }
.dm-table .is-featured { background: var(--surface); color: var(--ink); }
.dm-table thead .is-featured { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.dm-table .dm-icon { display: block; color: var(--ink); }
.dm-table .dm-table__no { color: var(--ink-muted); }
.dm-table__all { display: none; color: var(--ink-muted); font-weight: 400; white-space: nowrap; }
@media (max-width: 720px) {
  .dm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .dm-table, .dm-table tbody { display: block; }
  .dm-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-2); padding: var(--space-4) 0; border-bottom: var(--border-hairline) solid var(--line); }
  .dm-table tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 var(--space-3); border: 0; }
  .dm-table td { width: auto; padding: var(--space-2); border: 0; border-radius: var(--radius-sm); }
  .dm-table td::before { content: attr(data-plan); display: block; margin-bottom: var(--space-1); color: var(--ink-muted); font-family: var(--font-sans); font-weight: 600; }
  .dm-table tr.is-all td { display: none; }
  .dm-table tr.is-all th { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-bottom: 0; }
  .dm-table__all { display: inline; }
}

/* Contact: the live Bricks form in the system's Field classes (inc/bricks.php adds them), a large drawing beside it. */
.dm-contact { display: grid; gap: var(--space-12); justify-items: center; }
.dm-contact__form { width: 100%; max-width: 560px; }
.dm-contact__legal { margin: var(--space-5) 0 0; color: var(--ink-muted); }
.dm-contact__plan { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); padding: var(--space-4) var(--space-5); background: var(--surface); border: var(--border-control) solid var(--border); border-radius: var(--radius-sm); }
.dm-contact__plan p { margin: 0; }
.dm-contact__price { display: block; color: var(--ink-muted); }
@media (min-width: 961px) {
  .dm-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr); align-items: center; column-gap: var(--space-8); }
  .dm-contact__form { grid-column: 2; }
  .dm-contact > .dm-drawing { grid-column: 3; }
}
.dm-form .options-wrapper { margin: 0; padding: 0; list-style: none; }
.dm-form .dm-check label { cursor: pointer; }
.dm-form .dm-check a { color: inherit; }
.dm-form .form-group:not(:has(*)) { display: none; }
/* A hidden field between two visible ones (the care form's Billing) would leave a second gap there. */
.dm-form [role="group"]:not(.form-group):not(:first-child) { display: none; }
.dm-form .dm-field__select select { padding-right: var(--space-10); cursor: pointer; }
.dm-form .bricks-button .loading { display: none; }
.dm-form .bricks-button.sending .loading { display: inline-flex; }
.dm-form .bricks-button.sending .loading svg { width: var(--space-4); height: var(--space-4); animation: dm-spin 0.9s linear infinite; }
.dm-form .bricks-button[disabled] { opacity: 0.45; cursor: progress; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dm-form .bricks-button.sending .loading svg { animation: none; } }
/* What Bricks prints after a send: a success note, or an error line, each with its icon. */
.dm-form .message { display: flex; gap: var(--space-2); align-items: flex-start; }
.dm-form .message::before { content: ""; flex: none; width: var(--space-5); height: var(--space-5); margin-top: var(--space-1); background: currentColor; -webkit-mask: url(../ds/icons/close.svg) center / contain no-repeat; mask: url(../ds/icons/close.svg) center / contain no-repeat; }
.dm-form .message.success { color: var(--success); }
.dm-form .message.success::before { -webkit-mask-image: url(../ds/icons/check.svg); mask-image: url(../ds/icons/check.svg); }
.dm-form .message.error, .dm-form .message.danger, .dm-form .brxe-alert { color: var(--danger); }
/* Bricks prints its reCAPTCHA error up front and adds .show only when reCAPTCHA fails. */
.dm-form .recaptcha-hidden, .dm-form .recaptcha-error { display: none; }
.dm-form .recaptcha-error.show { display: block; }
.dm-form .form-group.captcha { display: none; }
.dm-form .form-group.captcha:has(.recaptcha-error.show) { display: grid; }
/* The form states the reCAPTCHA terms in its own line, so Google's badge can go. */
.grecaptcha-badge { visibility: hidden; }

/* Domains: the Hub plugin's search widget as the system's Field and Buttons. It sets its button colours inline,
   so those need !important. */
/* The drawing under the search sits in the middle of the column. */
.dm-domains + .dm-drawing { justify-self: center; }
.dm-domains .thc-domain-lookup { max-width: none; margin: 0; padding: 0; font-family: var(--font-sans); color: var(--ink); }
.dm-domains .thc-domain-lookup-search { gap: var(--space-2); }
.dm-domains .thc-domain-lookup-search__input { flex: 1 1 0; min-width: 0; width: auto; height: auto; padding: var(--space-3) var(--space-4); font: inherit; background: var(--surface); color: var(--ink); border: var(--border-control) solid var(--border); border-radius: var(--radius-sm); }
.dm-domains .thc-domain-lookup-search__input::placeholder { color: var(--ink-muted); opacity: 1; }
.dm-domains .thc-domain-lookup-search__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dm-domains .thc-domain-lookup-search__btn, .dm-domains .thc-domain-lookup-buy-btn, .dm-domains .thc-domain-lookup-result__load-more { font-family: var(--font-sans); font-weight: 600; line-height: 1; border-radius: var(--radius-pill); cursor: pointer; }
.dm-domains .thc-domain-lookup-search__btn:focus-visible, .dm-domains .thc-domain-lookup-buy-btn:focus-visible, .dm-domains .thc-domain-lookup-result__load-more:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dm-domains .thc-domain-lookup-search__btn { flex: none; width: auto; height: auto; margin: 0; padding: var(--space-4) var(--space-6); border: var(--border-control) solid var(--btn-primary); background: var(--btn-primary) !important; color: var(--on-btn-primary) !important; }
.dm-domains .thc-domain-lookup-buy-btn { padding: var(--space-2) var(--space-4); border: var(--border-control) solid var(--border); background: transparent !important; color: var(--ink) !important; }
.dm-domains .thc-domain-lookup-result__load-more { padding: var(--space-2) var(--space-4); border: var(--border-control) solid var(--border); color: var(--ink); text-decoration: none; }
.dm-domains .thc-domain-lookup-result__load-more svg { fill: currentColor; }
.dm-domains .thc-domain-lookup-result { margin-top: var(--space-10); }
.dm-domains .thc-domain-lookup-result__item + .thc-domain-lookup-result__item { margin-top: var(--space-8); }
.dm-domains .thc-domain-lookup-result__item-header { padding: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 600; text-align: left; color: var(--ink); }
.dm-domains .thc-domain-lookup-list { margin: 0; padding: 0; list-style: none; border-top: var(--border-hairline) solid var(--line); }
.dm-domains .thc-domain-lookup-list__item { flex-wrap: nowrap; margin: 0; padding: var(--space-3) 0; border-bottom: var(--border-hairline) solid var(--line); }
.dm-domains .thc-domain-lookup-list__item-title { flex-wrap: wrap; color: var(--ink); letter-spacing: 0; overflow-wrap: anywhere; }
.dm-domains .thc-domain-lookup-list__item-title-exact { font-weight: 400; color: var(--ink-muted); }
.dm-domains .thc-domain-lookup-list__item--unavailable .thc-domain-lookup-list__item-title span { color: var(--ink-muted); }
.dm-domains .thc-domain-lookup-list__item-actions { flex: none; width: auto; font-family: var(--font-mono); color: var(--ink); }
.dm-domains .thc-domain-lookup-buy-btn { font-family: var(--font-sans); }
.dm-domains .thc-domain-lookup-error--danger { margin-top: var(--space-3); font: inherit; color: var(--danger); }
.dm-domains .thc-domain-lookup-result--empty { font: inherit; text-align: left; color: var(--ink-muted); }
@media (max-width: 560px) {
  .dm-domains .thc-domain-lookup-search { display: flex; flex-direction: column; align-items: stretch; }
  .dm-domains .thc-domain-lookup-search__input, .dm-domains .thc-domain-lookup-search__btn { width: 100%; flex: none; }
  .dm-domains .thc-domain-lookup-list__item { flex-wrap: wrap; }
  .dm-domains .thc-domain-lookup-list__item-actions { width: 100%; justify-content: space-between; }
}

/* Prose: a text page at reading width. Pages still built in Bricks come through as plain sections and divs.
   Heading sizes are the system's title (24px) and title-sm (20px). */
.dm-prose { width: 100%; min-width: 0; max-width: var(--measure); margin-inline: auto; overflow-wrap: break-word; color: var(--ink); }
.dm-prose :where(section, [class^="brxe-"]) { display: block; margin: 0; padding: 0; }
.dm-prose :where(p, ul, ol, h2, h3, h4, blockquote, figure, pre, table) { margin: 0; }
.dm-prose > * + *, .dm-prose [class^="brxe-"] > * + *, .dm-prose .tos > * + * { margin-top: var(--space-4); }
.dm-prose h2, .dm-prose h3, .dm-prose h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.dm-prose > h2, .dm-prose > h3, .dm-prose > h4, .dm-prose [class^="brxe-"] > h2, .dm-prose [class^="brxe-"] > h3, .dm-prose .tos > h2, .dm-prose .tos > h3 { margin-top: var(--space-10); }
.dm-prose > :first-child, .dm-prose [class^="brxe-"] > :first-child, .dm-prose .tos > :first-child { margin-top: 0; }
.dm-prose h2 { font-size: var(--space-6); }
.dm-prose h3, .dm-prose h4 { font-size: var(--space-5); }
.dm-prose strong, .dm-prose b { font-weight: 600; }
.dm-prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.dm-prose a:hover { text-decoration-thickness: 2px; }
/* The note card that closes a post or an FAQ entry keeps the text's width. It carries text-body there, so its
   measure is counted in the same em as the prose above it. */
.dm-prose + .dm-notecard { width: 100%; max-width: var(--measure); margin-inline: auto; }
.dm-prose a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dm-prose ul, .dm-prose ol { padding-left: 1.3em; }
.dm-prose ul { list-style: disc; }
.dm-prose ol { list-style: decimal; }
.dm-prose li + li { margin-top: var(--space-2); }
.dm-prose li::marker { color: var(--ink-muted); }
.dm-prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.dm-prose figure { max-width: 100%; }
.dm-prose figcaption { margin-top: var(--space-2); color: var(--ink-muted); }
.dm-prose blockquote { padding-left: var(--space-5); border-left: var(--border-control) solid var(--accent); }
.dm-prose code, .dm-prose pre { font-family: var(--font-mono); }
.dm-prose code { padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--surface-quiet); }
.dm-prose pre { overflow-x: auto; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-quiet); }
.dm-prose pre code { padding: 0; background: none; }
.dm-prose table { width: 100%; border-collapse: collapse; }
.dm-prose th, .dm-prose td { padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--line); text-align: left; vertical-align: top; }
.dm-prose hr { border: 0; border-top: var(--border-hairline) solid var(--line); }
/* Retainer: Stripe's pricing table on a white card, as wide as the hero card. Stripe paints its own background
   (a setting in Stripe), so the card has no padding: the table's edge is the card's edge. */
.dm-prose:has(stripe-pricing-table) { max-width: var(--hero-max); }
.dm-prose stripe-pricing-table { display: block; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); }
/* A post's cover image, and the list of posts on archives and search. */
.dm-cover { margin: 0 auto; max-width: var(--hero-max); }
.dm-cover img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.dm-posts { margin: 0; padding: 0; list-style: none; border-top: var(--border-hairline) solid var(--line); }
.dm-posts__item { border-bottom: var(--border-hairline) solid var(--line); }
.dm-posts__link { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-6); padding: var(--space-5) 0; color: var(--ink); text-decoration: none; }
.dm-posts__link:hover .title-sm { text-decoration: underline; text-underline-offset: 0.18em; }
.dm-posts__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dm-posts__date { color: var(--ink-muted); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.pagination .page-numbers { color: var(--ink); }
.pagination .page-numbers.current { font-weight: 600; }

/* Cookie banner and its Manage consent tab (Complianz): settings unchanged, colours and shapes from the tokens. */
#cmplz-cookiebanner-container, #cmplz-manage-consent {
  --cmplz_banner_background_color: var(--surface); --cmplz_banner_border_color: var(--border);
  --cmplz_banner_border_width: var(--border-control); --cmplz_banner_border_radius: var(--radius-md);
  --cmplz_text_color: var(--ink); --cmplz_hyperlink_color: var(--link);
  --cmplz_button_border_radius: var(--radius-pill);
  --cmplz_button_accept_background_color: var(--btn-primary); --cmplz_button_accept_border_color: var(--btn-primary); --cmplz_button_accept_text_color: var(--on-btn-primary);
  --cmplz_button_deny_background_color: transparent; --cmplz_button_deny_border_color: var(--border); --cmplz_button_deny_text_color: var(--ink);
  --cmplz_button_settings_background_color: transparent; --cmplz_button_settings_border_color: var(--border); --cmplz_button_settings_text_color: var(--ink);
  --cmplz_slider_active_color: var(--btn-primary); --cmplz_slider_inactive_color: var(--ink-muted);
  --cmplz_category_header_always_active_color: var(--success);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-cookiebanner-container .cmplz-btn, #cmplz-manage-consent .cmplz-manage-consent { font-family: var(--font-sans); }

/* Tiles with no drawing start at the top, so headings in a row line up. */
.dm-tile:not(:has(.dm-drawing)) .dm-tile__body { margin-top: 0; }

/* Heroes on phones: the main button first when the two stack. */
@media (max-width: 720px) { .dm-hero__card > .dm-actions .dm-btn--accent { order: -1; } }

/* ---------------------------------------------------------------------------------------------------------------
   2026-11-13: the site's own look. The pen line, the Panorama hero and the wide NavPill live here until they
   move into the design system (its Hero and NavPill previews still show the earlier shapes).
   --------------------------------------------------------------------------------------------------------------- */

/* The pen line. A border drawn twice through a wobble filter (the <filter>s are printed in header.php), so it reads
   like the pen of the mountain drawings. Only for the few frames that carry the page: the hero's view and card and
   the NavPill. If a browser drops the filter the two passes fall back to one straight border. */
.dm-pen-defs { position: absolute; }
.dm-pen { position: relative; border-color: transparent; }
.dm-pen::before, .dm-pen::after {
  content: ""; position: absolute; inset: calc(var(--pen-w, 3px) * -1); border-radius: inherit; pointer-events: none; z-index: 2;
}
.dm-pen::before { border: 2.6px solid var(--ink); filter: url(#dm-pen); }
.dm-pen::after { border: 1.1px solid var(--ink); filter: url(#dm-pen-2); }
.dm-pen--s::before { border-width: 2.2px; filter: url(#dm-pen-s); }
.dm-pen--s::after { border-width: 1px; filter: url(#dm-pen-s2); }
[data-theme="dark"] .dm-pen::before, [data-theme="dark"] .dm-pen::after { filter: none; }

/* Pen rules: one drawn stroke, stretched. Question rows, and the dividers between the Home figures and the steps. */
.dm-faq, .dm-faq__item { border-color: transparent; background-repeat: no-repeat; background-size: 100% 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 5' preserveAspectRatio='none'%3E%3Cpath d='M0 2.6C60 1.4 120 3.6 190 2.4S330 1.5 410 2.8 560 3.5 640 2.2 800 1.6 880 2.9 960 2.2 1000 2.5' fill='none' stroke='%23141210' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.dm-faq__item { background-position: left top -2px; }
.dm-faq { background-position: left bottom -2px; }
@media (min-width: 721px) {
  .dm-feature + .dm-feature { border-left-color: transparent; background: no-repeat left -2px top / 5px 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 200' preserveAspectRatio='none'%3E%3Cpath d='M2.6 0C1.5 22 3.5 44 2.4 70S1.6 118 2.8 140 2.3 180 2.5 200' fill='none' stroke='%23141210' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
}
@media (min-width: 861px) {
  .dm-steps--rail .dm-step + .dm-step { border-left-color: transparent; background: no-repeat left -2px top / 5px 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 200' preserveAspectRatio='none'%3E%3Cpath d='M2.4 0C3.5 26 1.6 50 2.7 78S3.4 122 2.2 150 2.7 182 2.5 200' fill='none' stroke='%23141210' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
}

/* NavPill, wide: the pill runs the content width with the logo left, the links in the middle and Log in with the
   button on the right. Below 861px it is the logo and the menu button, as before. */
.dm-nav__pill { --pen-w: 2px; width: 100%; max-width: var(--content-max); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding-left: var(--space-6); }
.dm-nav__logo { justify-self: start; margin-right: 0; }
.dm-nav__links { display: flex; align-items: center; gap: var(--space-1); }
.dm-nav__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); grid-column: 3; }
.dm-nav__link[aria-current="page"] { background: no-repeat center bottom 2px / calc(100% - 22px) 6px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6C16 1.2 30 5 48 3S82 1.6 99 3.4' fill='none' stroke='%23ee4323' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.dm-nav__link[aria-current="page"]:hover { background-color: var(--surface-quiet); }
.dm-nav__sheet .dm-nav__link[aria-current="page"] { background-size: 56px 6px; background-position: left var(--space-4) bottom 6px; }
@media (max-width: 860px) {
  .dm-nav__links, .dm-nav__end > .dm-nav__link, .dm-nav__end > .dm-nav__cta { display: none; }
  .dm-nav__end > .dm-nav__toggle { display: inline-flex; margin-left: 0; }
  .dm-nav__pill { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--space-5); }
  .dm-nav__end { grid-column: 2; }
}

/* Hero, Panorama: the page's scene in a pen frame, with the card hung over its lower edge and the page's drawing
   standing on the card. A page with no scene keeps the card alone, in the same pen. */
.dm-hero__card.dm-pen { box-shadow: none; border-radius: 20px; }
.dm-hero.dm-hero--pano { position: relative; flex-direction: column; align-items: center; padding-top: var(--space-6); }
.dm-hero__pano { --pen-w: 0px; z-index: 0; width: 100%; max-width: var(--content-max); height: clamp(240px, 41vw, 470px); border-radius: 26px; background: var(--surface); }
.dm-hero--pano .dm-hero__backdrop { inset: 2px; z-index: 0; border-radius: 24px; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
.dm-hero--pano .dm-hero__card { margin-top: clamp(-110px, -8vw, -64px); z-index: 1; }
.dm-hero--pano .dm-hero__card > .dm-drawing { position: absolute; left: var(--space-12); bottom: calc(100% - 9px); margin: 0; z-index: 3; }
@media (min-width: 721px) {
  .dm-hero--pano .dm-hero__backdrop > svg { inset: auto 0 var(--pano-drop, -16%) 0; width: 100%; height: auto; aspect-ratio: 1448 / 811; }
  .dm-hero--pano .dm-hero__backdrop--scene > svg { --pano-drop: -4%; }
}
@media (max-width: 720px) {
  .dm-hero.dm-hero--pano { padding-top: var(--space-5); }
  .dm-hero--pano .dm-hero__card > .dm-drawing { left: var(--space-6); transform: scale(0.72); transform-origin: left bottom; }
}