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

/* Colours, materials, glow and motion are the page's own tokens (ElitePass1 tokens.css). */
#dl-after-class{
  --ac-ink:#0A2540;--ac-slate:#47616F;--ac-muted:#86A0AC;--ac-teal:#007E9E;--ac-electric:#2E7BF6;
  --ac-hairline:rgba(10,37,64,.10);--ac-glass-fill:rgba(255,255,255,.62);
  --ac-run:linear-gradient(100deg,#0092B2 0%,#009DBC 50%,#00A1BE 100%);
  --ac-lit:drop-shadow(0 0 5px rgba(34,201,224,.62)) drop-shadow(0 0 18px rgba(34,201,224,.42));
  --ac-e1:0 8px 20px -14px rgba(14,86,120,.45);
  --ac-e2:0 22px 48px -30px rgba(14,86,120,.50);
  --ac-e3:0 40px 80px -40px rgba(14,86,120,.55);
  --ac-settle:240ms;--ac-bloom:600ms;
  --ac-ease:cubic-bezier(.22,.61,.36,1);--ac-ease-out:cubic-bezier(.16,.84,.44,1);
  --ac-serif:'DLAC Newsreader',Georgia,serif;--ac-sans:'DLAC Manrope',system-ui,-apple-system,sans-serif;--ac-mono:'DLAC Mono',ui-monospace,SFMono-Regular,monospace;
  /* the speech bubble, drawn from here so the messages in the block stay readable */
  --ac-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.2c0-3.9 3.4-6.9 7.5-6.9s7.5 3 7.5 6.9-3.4 6.9-7.5 6.9c-1 0-2-.2-2.9-.5L5.6 20l.9-3.2c-1.2-1.2-2-2.8-2-4.6Z'/%3E%3C/svg%3E");
  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(--ac-ink);
  font:400 15px/1.6 var(--ac-sans);text-align:left;overflow:hidden;overflow:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%;
}
#dl-after-class,#dl-after-class *,#dl-after-class *::before,#dl-after-class *::after{box-sizing:border-box}
/* Page-builder isolation: inherited paragraph, heading, list and link rules stop here. */
#dl-after-class :is(p,h2,div,span,em,i,a,b,time,ol,li,header){margin:0!important;padding:0!important;border:0!important;background:none;box-shadow:none;max-width:none;text-transform:none;text-indent:0;float:none;list-style:none}
#dl-after-class h2{font-family:var(--ac-serif)!important;font-weight:400!important;text-transform:none!important}

/* ---- frame ---- */
#dl-after-class .ac-shell{position:relative;z-index:1;width:100%;max-width:1280px;margin-inline:auto!important;padding-inline:clamp(20px,4vw,56px)!important}
/* The words and the handset read as one composition. Before this the words were capped at the
   left gutter and the 400px phone was pinned to the right one inside a 7fr column, leaving 260
   to 430px of dead air between them. Now the words column is sized to its own content and the
   pair is centred, so what sits between the two is the gap and nothing else. */
#dl-after-class .ac-grid{
  display:grid;grid-template-columns:auto 400px;justify-content:center;
  gap:clamp(28px,3.5vw,56px);align-items:center;
}

/* ---- entrance: the script adds .ac-enter, then .ac-in as the section arrives ---- */
#dl-after-class .ac-enter{opacity:0;transform:translateY(4px);transition:opacity var(--ac-settle) var(--ac-ease-out) var(--ac-delay,0ms),transform var(--ac-settle) var(--ac-ease-out) var(--ac-delay,0ms)}
#dl-after-class .ac-well.ac-enter{transform:scale(.97);transition:opacity var(--ac-bloom) var(--ac-ease) var(--ac-delay,0ms),transform var(--ac-bloom) var(--ac-ease) var(--ac-delay,0ms)}
#dl-after-class .ac-enter.ac-in{opacity:1;transform:none}
#dl-after-class .ac-title{--ac-delay:60ms}
#dl-after-class .ac-lead{--ac-delay:120ms}
#dl-after-class .ac-well{--ac-delay:180ms}

/* ---- words ---- */
#dl-after-class .ac-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
#dl-after-class .ac-eyebrow{font:500 12px/1.2 var(--ac-mono);letter-spacing:.18em;text-transform:uppercase!important;color:var(--ac-teal)}
#dl-after-class .ac-title{font:400 clamp(32px,3.4vw,44px)/1.12 var(--ac-serif);letter-spacing:-.018em;color:var(--ac-ink);max-width:14ch;text-wrap:balance}
#dl-after-class .ac-title em{font-family:var(--ac-serif);font-style:italic;font-weight:400;background:var(--ac-run);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:var(--ac-lit)}
#dl-after-class .ac-lead{font:400 clamp(16px,1.25vw,18px)/1.6 var(--ac-sans);color:var(--ac-slate);max-width:42ch;text-wrap:pretty}

/* ---- the handset, a message surface rather than a product shot ---- */
#dl-after-class .ac-well{
  position:relative;width:100%;height:clamp(540px,52vw,640px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%);
}
#dl-after-class .ac-device{
  position:absolute;inset:0 0 -40px;padding:12px 12px 0!important;border-radius:48px 48px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.66));
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:var(--ac-e3),0 0 0 1px var(--ac-hairline),inset 0 0 0 1.5px rgba(255,255,255,.98),inset 0 0 0 3px rgba(126,198,222,.16),0 0 40px -10px rgba(255,255,255,1);
}
#dl-after-class .ac-screen{
  position:relative;height:100%;border-radius:38px 38px 0 0;
  background:linear-gradient(180deg,#F3F9FC 0%,#EDF5F9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(10,37,64,.06);
  display:flex;flex-direction:column;overflow:hidden;
}
/* the screen's own light: one wash, top right, the way the panels have */
#dl-after-class .ac-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 40% at 80% 0%,rgba(111,231,220,.16),rgba(111,231,220,0) 70%);pointer-events:none}
#dl-after-class .ac-bar{position:relative;display:flex;align-items:baseline;justify-content:space-between;padding:18px 22px 12px!important;margin:0 10px!important;border-bottom:1px solid var(--ac-hairline)!important}
#dl-after-class .ac-bar b{font:700 15px/1.2 var(--ac-sans);letter-spacing:-.01em;color:var(--ac-ink)}
#dl-after-class .ac-bar span{font:500 11px/1.2 var(--ac-mono);letter-spacing:.12em;color:var(--ac-muted)}

/* the window onto the list: sealed while messages land, scrollable once they have all arrived */
#dl-after-class .ac-window{
  position:relative;flex:1 1 auto;min-height:0;padding:10px 10px 40px!important;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.4) 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.4) 86%,transparent 100%);
}
#dl-after-class.is-static .ac-window{
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(10,37,64,.16) transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 88%,rgba(0,0,0,.6) 96%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 88%,rgba(0,0,0,.6) 96%,transparent 100%);
}
#dl-after-class.is-static .ac-window::-webkit-scrollbar{width:6px}
#dl-after-class.is-static .ac-window::-webkit-scrollbar-thumb{background:rgba(10,37,64,.16);border-radius:6px}
#dl-after-class.is-static .ac-window::-webkit-scrollbar-track{background:transparent}

#dl-after-class .ac-stack{display:flex;flex-direction:column;gap:12px;padding:4px!important;will-change:transform}
/* when a new message lands, the ones already there are held at their old place for one frame
   and then ease down to make room (the script sets --dy); the new one springs in where it will live */
#dl-after-class .ac-stack.is-shifting > .ac-msg:not(.is-new){transform:translateY(var(--dy,0px));transition:none}
#dl-after-class .ac-stack.is-settling > .ac-msg:not(.is-new){transform:translateY(0);transition:transform 560ms var(--ac-ease)}

/* ---- a message ---- */
#dl-after-class .ac-msg{
  display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:14px;row-gap:5px;align-items:start;
  padding:14px 16px 15px!important;border-radius:18px;
  background:var(--ac-glass-fill);
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:var(--ac-e1),inset 0 0 0 1px var(--ac-hairline),inset 0 1px 0 rgba(255,255,255,.95);
  transition:box-shadow 900ms ease;
}
#dl-after-class .ac-msg.is-pending{display:none}
/* landing: the spring the reference uses, scale and a short drop */
#dl-after-class .ac-msg.is-landing{animation:dl-ac-land 620ms cubic-bezier(.34,1.32,.64,1) both}
@keyframes dl-ac-land{0%{opacity:0;transform:translateY(-10px) scale(.94)}60%{opacity:1}100%{opacity:1;transform:none}}
/* the newest one is lit for a moment, then it is just another message */
#dl-after-class .ac-msg.is-new{box-shadow:var(--ac-e2),inset 0 0 0 1px rgba(34,201,224,.28),0 0 0 4px rgba(34,201,224,.07),0 14px 36px -16px rgba(34,201,224,.55)}

/* the mark: the bubble surface at 40px, with the speech glyph masked out of it */
#dl-after-class .ac-mark{
  grid-column:1;grid-row:1 / span 2;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.80) 30%,rgba(236,250,254,.70) 60%,rgba(200,236,246,.75) 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.95),inset 0 0 0 3px rgba(126,198,222,.14),inset -3px -4px 10px -6px rgba(34,201,224,.35),0 6px 14px -8px rgba(14,86,120,.4);
}
#dl-after-class .ac-mark::before{
  content:'';width:18px;height:18px;background:var(--ac-electric);
  -webkit-mask:var(--ac-icon) center/18px 18px no-repeat;mask:var(--ac-icon) center/18px 18px no-repeat;
  filter:drop-shadow(0 0 6px rgba(34,201,224,.45));
}

#dl-after-class .ac-meta{grid-column:2;grid-row:1;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;font:700 14px/1.3 var(--ac-sans);letter-spacing:-.008em;color:var(--ac-ink)}
#dl-after-class .ac-meta span{font:500 11px/1.2 var(--ac-mono);letter-spacing:.12em;text-transform:uppercase!important;color:var(--ac-teal)}
#dl-after-class .ac-meta time{margin-left:auto!important;font:500 12px/1.3 var(--ac-sans);color:var(--ac-muted)}
#dl-after-class .ac-text{grid-column:2;grid-row:2;font:400 15px/1.6 var(--ac-sans);color:var(--ac-slate);text-wrap:pretty}

/* ---- at rest: reduced motion, or the sequence is over ---- */
#dl-after-class.is-static .ac-msg{display:grid;animation:none}

/* ---- responsive ---- */
@media(min-width:881px){
  #dl-after-class:not([data-ac-on]) .ac-window{overflow-y:auto;-webkit-mask-image:none;mask-image:none}
}

@media(max-width:880px){
  /* stacked: the header is centred so it agrees with the handset under it. Left-aligned over a
     centred phone read as broken, worst around 800px where it sat 240px off centre. */
  #dl-after-class .ac-grid{grid-template-columns:1fr;gap:clamp(28px,6vw,40px);max-width:620px;margin-inline:auto!important}
  #dl-after-class .ac-head{align-items:center;text-align:center}
  #dl-after-class .ac-title{max-width:18ch}
  #dl-after-class .ac-well{width:min(100%,380px);justify-self:center;height:clamp(480px,120vw,560px)}
  /* the list scrolls here as it does on desktop, so every message can be read. Unlike desktop the
     scroll chains to the page at either end: the handset covers most of a phone screen, and a
     contained scroller there leaves a thumb stuck inside it with the page refusing to move. */
  #dl-after-class.is-static .ac-window{overscroll-behavior:auto}
}

@media(max-width:480px){
  #dl-after-class .ac-msg{grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding:13px 14px 14px!important}
  #dl-after-class .ac-mark{width:36px;height:36px}
  #dl-after-class .ac-meta time{width:100%;margin-left:0!important;order:3}
}

@media(prefers-reduced-motion:reduce){
  html:not(.dl-motion) #dl-after-class .ac-msg.is-landing{animation:none}
  html:not(.dl-motion) #dl-after-class .ac-stack.is-settling > .ac-msg:not(.is-new){transition:none}
  html:not(.dl-motion) #dl-after-class .ac-enter{transform:none!important}
}