@font-face{font-family:'DLWB Newsreader';src:url('./fonts/newsreader-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DLWB Newsreader';src:url('./fonts/newsreader-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'DLWB Manrope';src:url('./fonts/manrope-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'DLWB Mono';src:url('./fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* Colours, glow and motion are the page's own tokens (ElitePass1 tokens.css and note.css). */
#dl-why-built{
  --wb-ink:#0A2540;--wb-rest:rgba(10,37,64,.40);--wb-teal:#007E9E;
  --wb-run:linear-gradient(100deg,#0092B2 0%,#009DBC 50%,#00A1BE 100%);
  --wb-lit:drop-shadow(0 0 5px rgba(34,201,224,.62)) drop-shadow(0 0 18px rgba(34,201,224,.42));
  --wb-ease:cubic-bezier(.22,.61,.36,1);--wb-ease-out:cubic-bezier(.16,.84,.44,1);--wb-settle:240ms;
  --wb-serif:'DLWB Newsreader',Georgia,serif;--wb-sans:'DLWB Manrope',system-ui,-apple-system,sans-serif;--wb-mono:'DLWB Mono',ui-monospace,SFMono-Regular,monospace;
  position:relative;isolation:isolate;display:block;width:100%;max-width:none;margin:0;border:0;
  padding:clamp(96px,12vw,160px) 0;background:transparent!important;color:var(--wb-ink);
  font:400 15px/1.6 var(--wb-serif);text-align:left;overflow:hidden;overflow:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%;
}
#dl-why-built,#dl-why-built *,#dl-why-built *::before,#dl-why-built *::after{box-sizing:border-box}
/* Page-builder isolation: inherited paragraph, link and list rules stop here. */
#dl-why-built :is(p,div,span,em,a){margin:0!important;border:0!important;background:none;box-shadow:none;max-width:none;text-transform:none;text-indent:0;float:none}
#dl-why-built p{padding:0!important}

#dl-why-built .wb-shell{position:relative;z-index:1;width:100%;max-width:1280px;margin-inline:auto!important;padding-inline:clamp(20px,4vw,56px)}
#dl-why-built .wb-col{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,2.6vw,34px);max-width:720px;margin-inline:auto!important}

/* ---- entrance: the script adds .wb-enter, then .wb-in as each line reaches the screen ---- */
#dl-why-built .wb-enter{opacity:0;transform:translateY(4px);transition:opacity var(--wb-settle) var(--wb-ease-out) var(--wb-delay,0ms),transform var(--wb-settle) var(--wb-ease-out) var(--wb-delay,0ms)}
#dl-why-built .wb-enter.wb-in{opacity:1;transform:none}

/* ---- words ---- */
#dl-why-built .wb-eyebrow{font:500 12px/1.2 var(--wb-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--wb-teal)}
/* This rule sits after .wb-enter on purpose: as on the ElitePass page, paragraphs change colour but do not fade in. */
#dl-why-built .wb-p{font:400 clamp(22px,2.15vw,30px)/1.38 var(--wb-serif);letter-spacing:-.012em;color:var(--wb-ink);transition:color 520ms var(--wb-ease);text-wrap:pretty}
/* Only once the script is running do the paragraphs wait in the margin; without it everything stays in ink. */
#dl-why-built[data-wb-on] .wb-p{color:var(--wb-rest)}
#dl-why-built[data-wb-on] .wb-p.is-read{color:var(--wb-ink)}
#dl-why-built .wb-p em{font-family:var(--wb-serif);font-style:italic;font-weight:400;background:var(--wb-run);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:var(--wb-lit)}

#dl-why-built .wb-sign{--wb-delay:240ms;display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:8px!important}
#dl-why-built .wb-name{font:italic 400 clamp(22px,1.9vw,26px)/1.2 var(--wb-serif);color:var(--wb-ink)}
#dl-why-built .wb-role{font:500 12px/1.2 var(--wb-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--wb-teal)}

#dl-why-built .wb-link{--wb-delay:300ms;display:inline-flex;align-items:center;gap:8px;margin-top:12px!important;padding:4px 0;font:700 14px/1.2 var(--wb-sans);color:var(--wb-teal)!important;text-decoration:none!important}
#dl-why-built .wb-link svg{width:16px;height:16px;transition:transform var(--wb-settle) var(--wb-ease)}
#dl-why-built .wb-link:hover svg{transform:translateX(4px)}
#dl-why-built .wb-link:focus-visible{outline:4px solid rgba(34,201,224,.55)!important;outline-offset:3px;border-radius:12px!important}

@media(max-width:640px){
  #dl-why-built .wb-col{gap:20px}
  #dl-why-built .wb-p{font-size:21px;line-height:1.4}
}

@media(prefers-reduced-motion:reduce){
  html:not(.dl-motion) #dl-why-built .wb-p{transition:none}
  html:not(.dl-motion) #dl-why-built .wb-enter{transform:none!important}
}