/* Why design matters: page layout, the colour journey and the enquiry panel. Demo styles: design-demos.css.
   Colour journey: each section names a tone. With motion, the kit's tone effect blends the page
   colour as you scroll. With no script or reduced motion, every section paints its own tone.
   Tones are tints of the brand palette; ink stays at full strength on every one of them. */

.wdm{--t-stone:#f1eeea;--t-rose:#e9dce0;--t-warm:#e0ded3;--t-sky:#d8e4ee;--t-peach:#f2d7c5;--t-citron:#ecedc2;--t-white:#fff;--wdm-ink:#171816;--wdm-rule:color-mix(in srgb,var(--wdm-ink) 18%,transparent);background:var(--t-stone);color:var(--wdm-ink)}
:root[data-theme="dark"] .wdm{--t-stone:#292125;--t-rose:#3c2931;--t-warm:#34312c;--t-sky:#1f2a33;--t-peach:#3a2a22;--t-citron:#373a20;--t-white:#171416;--wdm-ink:#f7f2f3;--dd-stage:#1d191b;--dd-ink:#f7f2f3;--dd-muted:#bdb4b7;--dd-line:rgb(247 242 243 / .16);--dd-soft:#292125;--dd-accent:#deb1c0;--fx-accent:#deb1c0;--fx-on-accent:#171416;--fx-marker:#622338}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wdm{--t-stone:#292125;--t-rose:#3c2931;--t-warm:#34312c;--t-sky:#1f2a33;--t-peach:#3a2a22;--t-citron:#373a20;--t-white:#171416;--wdm-ink:#f7f2f3;--dd-stage:#1d191b;--dd-ink:#f7f2f3;--dd-muted:#bdb4b7;--dd-line:rgb(247 242 243 / .16);--dd-soft:#292125;--dd-accent:#deb1c0;--fx-accent:#deb1c0;--fx-on-accent:#171416;--fx-marker:#622338}}
.wdm-tone-stone{--tone:var(--t-stone)}.wdm-tone-rose{--tone:var(--t-rose)}.wdm-tone-warm{--tone:var(--t-warm)}.wdm-tone-sky{--tone:var(--t-sky)}.wdm-tone-peach{--tone:var(--t-peach)}.wdm-tone-citron{--tone:var(--t-citron)}.wdm-tone-white{--tone:var(--t-white)}
.wdm>section{background:var(--tone,transparent);color:var(--wdm-ink)}
.fx-motion .wdm.fx-on{background:var(--fx-tone-bg,var(--t-stone))}
.fx-motion .wdm.fx-on>section{background:transparent}

/* ---- type ---- */
.wdm :is(p,li){color:inherit}
.editorial .wdm h1{max-width:20ch;margin:0;font-size:clamp(48px,7vw,104px);line-height:1;letter-spacing:-.055em;color:inherit}
.editorial .wdm h2{margin:0;font-size:clamp(34px,3.6vw,54px);line-height:1.04;letter-spacing:-.045em;color:inherit}
.editorial .wdm h3{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.03em;color:inherit}
.wdm .wdm-kicker{display:flex;gap:12px;margin:0;font:500 13px/1.4 Inter,Arial,sans-serif;letter-spacing:0}
.wdm a:not(.button){color:inherit;text-underline-offset:4px}
/* The site drops link underlines globally. Links inside sentences keep one, so they read as links. */
.wdm p a:not(.button):not(.text-link),.wdm .wdm-research-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent)}
.wdm p a:not(.button):not(.text-link):hover,.wdm .wdm-research-link:hover{text-decoration-color:currentColor}

/* ---- opening ---- */
.wdm .wdm-hero{padding-block:clamp(40px,6vw,96px) clamp(56px,6vw,96px)}
.wdm .wdm-back{display:inline-flex;margin:0 0 clamp(28px,4vw,48px)}
.wdm-hero .wdm-kicker{margin-bottom:22px}
.wdm .wdm-hero-foot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-top:clamp(28px,4vw,56px)}
.wdm .wdm-lede{max-width:46ch;margin:0;font-size:clamp(18px,1.7vw,23px);line-height:1.5;letter-spacing:-.02em}
.wdm .wdm-byline,.wdm .wdm-hint{margin:0;font-size:14px;line-height:1.6}
.wdm-byline .wdm-nowrap{white-space:nowrap}
.wdm .wdm-hint{margin-top:6px}
.editorial .wdm .wdm-jump{display:block;position:static;margin-top:clamp(36px,4vw,56px);padding:0;border:0;background:none}
.wdm-jump ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.wdm-jump li{margin:0}
.wdm .wdm-jump a{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;box-sizing:border-box;border:1px solid color-mix(in srgb,currentColor 32%,transparent);border-radius:100px;font-size:14px;text-decoration:none;transition:border-color .2s}
.wdm .wdm-jump a:hover{border-color:currentColor}

/* ---- the five groups ---- */
.wdm .wdm-group{padding-block:clamp(72px,8vw,128px)}
.wdm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(44px,4.4vw,72px) clamp(24px,3vw,48px);align-items:start}
.wdm-group-head{display:grid;gap:18px;align-content:start;max-width:520px;padding-top:4px}
.wdm .wdm-group-head>p:not(.wdm-kicker){max-width:44ch;margin:0;font-size:17px;line-height:1.6}
.wdm .wdm-research-link{justify-self:start;font-size:14px;font-weight:500}
.wdm-demo{display:grid;gap:22px;align-content:start;min-width:0}
.wdm-demo.is-wide{grid-column:1/-1}
.wdm-demo-copy{display:grid;gap:10px;max-width:58ch}
.wdm .wdm-demo-num{display:inline-block;margin-right:12px;font:500 13px/1 Inter,Arial,sans-serif;letter-spacing:0;vertical-align:.25em}
.wdm .wdm-demo-copy p{margin:0;font-size:16px;line-height:1.6}
.wdm .wdm-demo-copy .wdm-not{font-size:15px}
.wdm .wdm-not strong{font-weight:600}

/* ---- research ---- */
.wdm :is(.wdm-research,.wdm-principles,.wdm-tools){padding-block:clamp(72px,8vw,128px)}
.wdm-section-head{display:grid;gap:18px;max-width:780px;margin-bottom:clamp(36px,4vw,56px)}
.wdm .wdm-section-head>p:not(.wdm-kicker){max-width:56ch;margin:0;font-size:17px;line-height:1.6}
.wdm-findings{margin:0;padding:0;list-style:none;border-top:1px solid var(--wdm-rule)}
.wdm-findings>li{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr) minmax(0,1fr);gap:clamp(16px,3vw,48px);margin:0;padding:28px clamp(0px,1vw,12px);border-bottom:1px solid var(--wdm-rule);transition:background-color .4s}
.wdm-findings>li:target{background:color-mix(in srgb,var(--wdm-ink) 6%,transparent)}
.editorial .wdm .wdm-findings h3{font-size:clamp(22px,2vw,28px);line-height:1.15}
.wdm .wdm-findings p{margin:0;font-size:16px;line-height:1.6}
.wdm .wdm-findings .wdm-cite{font-size:13px;line-height:1.6}
.wdm-cite cite{font-style:italic}

/* ---- principles ---- */
.wdm-rules{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none;counter-reset:rule}
.wdm-rules>li{display:grid;gap:12px;align-content:start;margin:0;padding-top:20px;border-top:1px solid var(--wdm-rule);counter-increment:rule}
.wdm-rules>li::before{content:counter(rule,decimal-leading-zero);font:500 13px/1 Inter,Arial,sans-serif}
.wdm .wdm-rules p{margin:0;font-size:15px;line-height:1.6}

/* ---- tools ---- */
.wdm-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.wdm-tool-grid>article{display:grid;gap:12px;align-content:start;padding:clamp(24px,2.4vw,32px);border:1px solid color-mix(in srgb,var(--wdm-ink) 12%,transparent);border-radius:20px;background:color-mix(in srgb,var(--t-white) 55%,transparent)}
.wdm .wdm-tool-grid p{margin:0;font-size:16px;line-height:1.6}
.wdm .wdm-tool-link{font-weight:500}

/* ---- build it yourself ---- */
.wdm .wdm-build{padding-block:clamp(64px,7vw,110px)}
.wdm-build-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,80px);align-items:end}
.wdm .wdm-build-inner h2{margin-top:18px;max-width:16ch}
.wdm .wdm-build-inner p{max-width:48ch;margin:0 0 26px;font-size:17px;line-height:1.6}
.wdm-build .actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.wdm-build .actions .text-link{margin:0}

/* ---- your site: a fixed burgundy and white panel in both appearances ---- */
.wdm .wdm-cta{padding-block:clamp(64px,7vw,110px) clamp(48px,5vw,80px)}
.wdm-cta-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:24px;overflow:hidden;background:#622338;color:#fff}
.wdm-cta-copy{display:grid;gap:22px;align-content:center;padding:clamp(32px,5vw,72px)}
.editorial .wdm .wdm-cta-copy h2{max-width:13ch;font-size:clamp(36px,4vw,60px);color:#fff}
.wdm .wdm-cta-copy p{max-width:40ch;margin:0;font-size:17px;line-height:1.6;color:#f3e9ec}
.wdm .wdm-cta-links{display:grid;gap:12px;justify-items:start}
.wdm .wdm-cta-links a{color:#fff;font-weight:500}
/* Focus rings that show against the burgundy panel and the white card, in both appearances. */
.wdm .wdm-cta-copy :focus-visible{outline-color:#fff}
.wdm .wdm-form :focus-visible{outline-color:#622338}
.wdm-form{margin:clamp(10px,1.4vw,18px);padding:clamp(24px,3vw,40px);border-radius:18px;background:#fff;color:#171816}
.wdm-form-fields{display:grid;gap:16px}
.wdm-form-fields[hidden]{display:none}
.editorial .wdm .wdm-form h3{font-size:clamp(24px,2.2vw,30px);color:#171816}
.wdm .wdm-field{display:grid;gap:8px;font:600 14px/1.4 Inter,Arial,sans-serif;color:#171816}
.wdm .wdm-field em{font-style:normal;font-weight:400;color:#5f5b5d}
/* Inputs keep the site's underlined field style from marketing-interface.css. */
.editorial .wdm .wdm-field input{width:100%;min-height:44px;box-sizing:border-box;margin:0;padding:8px 0 10px;color:#171816;font:400 16px/1.3 Inter,Arial,sans-serif}
.editorial .wdm .wdm-field input:focus-visible{outline:3px solid #622338;outline-offset:2px}
.wdm .wdm-form .button{justify-self:start;margin-top:4px}
.wdm .wdm-note{margin:0;font-size:13px;line-height:1.55;color:#5f5b5d}
.wdm .wdm-note a{color:inherit;text-decoration:underline}
.wdm .wdm-error{color:#b42318}
.wdm-done{display:grid;gap:12px;align-content:center;min-height:100%}
.wdm-done[hidden]{display:none}
.wdm-done:focus{outline:none}
.wdm-done:focus-visible{outline:3px solid #622338;outline-offset:4px}
.editorial .wdm .wdm-done h3{font-size:clamp(26px,2.4vw,32px);color:#171816}
.wdm .wdm-done p{margin:0;font-size:16px;line-height:1.6;color:#3c3a3b}
.wdm .wdm-done a{color:#622338}
.wdm .wdm-author{max-width:none;margin:28px 0 0;font-size:14px;line-height:1.6}

@media (max-width:1100px){.wdm-rules{grid-template-columns:repeat(2,minmax(0,1fr))}.wdm-rules>li:last-child{grid-column:1/-1}}
@media (max-width:900px){
  .wdm-grid,.wdm .wdm-hero-foot,.wdm-tool-grid,.wdm-build-inner,.wdm-cta-panel{grid-template-columns:1fr}
  .wdm-findings>li{grid-template-columns:1fr;gap:10px}
  .wdm .wdm-hero-foot{align-items:start}
}
@media (max-width:600px){
  .editorial .wdm h1{font-size:clamp(40px,11vw,52px);line-height:1.04}
  .wdm-hero h1 br{display:none}
  .editorial .wdm h2{font-size:clamp(30px,8.4vw,38px);line-height:1.08}
  .wdm .wdm-group,.wdm :is(.wdm-research,.wdm-principles,.wdm-tools){padding-block:56px}
  .wdm-rules{grid-template-columns:1fr}
  .wdm .wdm-jump a{min-height:40px;padding:6px 14px}
  .wdm-cta-panel{border-radius:18px}
}