.abl{--abl-top:92px;--abl-r:20px;--abl-mute:rgba(21,21,21,.84);--abl-fs:clamp(30px,3vw,44px);--abl-gap:clamp(88px,11svh,112px);--abl-peek:calc(var(--abl-fs) * 1.2 + 14px)}.abl-head{box-sizing:border-box;display:flex;flex-direction:column;min-height:min(calc(100svh - var(--abl-peek)),calc(900px + var(--abl-top) + var(--abl-gap)));padding:var(--abl-top) var(--gutter) var(--abl-gap)}.abl-stage{position:relative;isolation:isolate;box-sizing:border-box;flex:1 0 auto;width:100%;max-width:var(--pg-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,10fr) minmax(0,11fr);min-height:440px;max-height:900px;border-radius:var(--abl-r);background:#d3be8d;overflow:hidden}.abl-photo{position:absolute;inset:0;z-index:-1;display:block;overflow:hidden;border-radius:inherit;container-type:size}.abl-photo img{position:absolute;top:0;right:0;display:block;width:100%;height:100%;object-fit:cover;object-position:100% 0;user-select:none;-webkit-user-drag:none}@supports (width:1cqw){.abl-photo img{--abl-pw:max(215cqw,320cqh);width:var(--abl-pw);height:auto;aspect-ratio:3/2;max-width:none;object-fit:fill;top:calc(var(--abl-pw) * -.045)}}.abl-fig{grid-column:1;grid-row:1;align-self:end;padding:40px clamp(28px,3.4vw,52px) clamp(40px,6svh,60px) clamp(40px,5vw,72px)}.abl-fig img{display:block;width:100%;max-width:460px;height:auto;max-height:min(50svh,380px);object-fit:contain;object-position:0 100%;user-select:none;-webkit-user-drag:none}.abl-txt{grid-column:2;grid-row:1;align-self:center;padding:56px clamp(40px,5vw,80px) 56px 0;display:flex;flex-direction:column;align-items:flex-start}.abl-where{margin:0 0 clamp(18px,2.4svh,28px);font:500 18px/1.2 "Figtree",system-ui,sans-serif;color:var(--abl-mute)}.abl-say{font:400 clamp(38px,3.7vw,56px)/1.12 var(--v-serif);letter-spacing:-.014em;color:var(--ink);font-optical-sizing:auto}.abl-ph{display:block}.abl-by{display:flex;flex-direction:column;align-items:flex-start;margin-top:clamp(26px,3.6svh,40px)}.abl-sig{font:600 clamp(46px,4vw,56px)/.82 var(--v-hand);color:var(--ink);transform:rotate(-4deg);transform-origin:0 100%}.abl-role{margin-top:10px;font:400 18px/1.2 "Figtree",system-ui,sans-serif;color:var(--abl-mute)}.abl-see{max-width:var(--pg-max);margin:0 auto;padding:0 var(--gutter);box-sizing:content-box}.abl-see-h{font:400 var(--abl-fs)/1.2 var(--v-serif);letter-spacing:-.014em;color:var(--ink);text-align:center;text-wrap:balance}.abl-see-h .v-hand{line-height:1}.abl-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(36px,4.4vw,56px)}.abl-tile{container-type:inline-size;min-width:0;display:flex;flex-direction:column;align-items:center}.abl-pic{--u:1cqw;position:relative;isolation:isolate;box-sizing:border-box;width:100%;aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(var(--u) * 8) 0 calc(var(--u) * 7);border-radius:20px;overflow:hidden;background:#b08345}@supports not (width:1cqw){.abl-pic{--u:3.4px}}.abl-pic-2{background:#cb7c38}.abl-pic-3{background:#aa5b1a}.abl-pic>img{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}.abl-win{flex:none;box-sizing:border-box;display:flex;flex-direction:column;width:calc(var(--u) * 78);height:calc(var(--u) * 76);border-radius:calc(var(--u) * 4);background:#fdfcf8;overflow:hidden}.abl-wbar{flex:none;box-sizing:border-box;display:flex;align-items:center;gap:calc(var(--u) * 3);height:calc(var(--u) * 13);padding:0 calc(var(--u) * 5);border-bottom:1px solid rgba(21,21,21,.10);color:#151515}.abl-wbar svg{display:block;flex:none;width:calc(var(--u) * 8);height:calc(var(--u) * 8)}.abl-wbody{flex:1;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:calc(var(--u) * 2.8);padding:calc(var(--u) * 5) calc(var(--u) * 6)}.abl-b{display:block;flex:none;height:calc(var(--u) * 2.4);border-radius:99px;background:rgba(21,21,21,.16)}.abl-b-s{width:calc(var(--u) * 22);height:calc(var(--u) * 2.6);background:rgba(21,21,21,.22)}.abl-b-t{height:calc(var(--u) * 3.8);background:rgba(21,21,21,.42)}.abl-w4{width:40%}.abl-w5{width:50%}.abl-w6{width:60%}.abl-w7{width:70%}.abl-w8{width:80%}.abl-w9{width:90%}.abl-w10{width:100%}.abl-m{box-sizing:border-box;display:flex;flex-direction:column;gap:calc(var(--u) * 2.8);width:calc(100% + var(--u) * 3);margin:0 calc(var(--u) * -1.5);padding:calc(var(--u) * 1.6) calc(var(--u) * 1.5);border-radius:calc(var(--u) * 1);background:#dad9d6}.abl-m .abl-b,.abl-hl .abl-b{background:rgba(21,21,21,.62)}.abl-mail-b{justify-content:flex-start}.abl-from{display:flex;align-items:center;gap:calc(var(--u) * 3);width:100%;margin-bottom:calc(var(--u) * 1.4)}.abl-av{display:block;flex:none;width:calc(var(--u) * 11);height:calc(var(--u) * 11);border-radius:50%;background:#c8955a}.abl-fl{flex:1;display:flex;flex-direction:column;gap:calc(var(--u) * 2.2)}.abl-b-n{width:56%;height:calc(var(--u) * 2.8);background:rgba(21,21,21,.5)}.abl-hw{position:relative;justify-content:flex-start;gap:0;padding:calc(var(--u) * 1.5) 0 0}.abl-hw::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--u) * 14);width:1px;background:rgba(200,149,90,.85)}.abl-row{flex:none;position:relative;box-sizing:border-box;display:flex;align-items:center;width:100%;height:calc(var(--u) * 10);padding:0 calc(var(--u) * 6) 0 calc(var(--u) * 18);border-bottom:1px solid rgba(21,21,21,.10)}.abl-n{position:absolute;left:0;width:calc(var(--u) * 14);text-align:center;font:600 calc(var(--u) * 8)/1 var(--v-hand);color:rgba(21,21,21,.8)}.abl-hl{box-sizing:border-box;display:flex;align-items:center;width:calc(100% + var(--u) * 3);height:calc(var(--u) * 6.4);margin-left:calc(var(--u) * -1.5);padding:0 calc(var(--u) * 1.5);border-radius:calc(var(--u) * 1);background:#dad9d6}.abl-hl.abl-w7{width:calc(70% + var(--u) * 3)}.abl-chat{gap:calc(var(--u) * 3.4)}.abl-bub{box-sizing:border-box;display:flex;flex-direction:column;gap:calc(var(--u) * 2.4);width:74%;padding:calc(var(--u) * 2.8) calc(var(--u) * 3.4);border-radius:calc(var(--u) * 3.6) calc(var(--u) * 3.6) calc(var(--u) * 3.6) calc(var(--u) * 1);background:#f3efe5}.abl-bub-me{align-self:flex-end;width:50%;border-radius:calc(var(--u) * 3.6) calc(var(--u) * 3.6) calc(var(--u) * 1) calc(var(--u) * 3.6)}.abl-bub.abl-m{width:84%;margin:0;background:#dad9d6}.abl-pill{flex:none;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 1.4);width:calc(var(--u) * 28);height:calc(var(--u) * 10.5);border:1px solid rgba(253,252,248,.24);border-radius:99px;background:#151515}.abl-pill i{display:block;width:calc(var(--u) * 1);height:calc(var(--u) * 1.7);border-radius:2px;background:#fdfcf8;transform:scaleY(var(--k,1))}.abl-pill i:nth-child(2){--k:2.2}.abl-pill i:nth-child(3){--k:3.1}.abl-pill i:nth-child(4){--k:1.8}.abl-pill i:nth-child(5){--k:1.2}@media(prefers-reduced-motion:no-preference){.abl-pill i{animation:abl-wave .9s ease-in-out infinite both;animation-delay:calc(var(--j,0) * .1s + var(--o,0s))}.abl-pill i:nth-child(2){--j:1}.abl-pill i:nth-child(3){--j:2}.abl-pill i:nth-child(4){--j:3}.abl-pill i:nth-child(5){--j:4}.abl-pic-2 .abl-pill{--o:-.3s}.abl-pic-3 .abl-pill{--o:-.6s}}@keyframes abl-wave{0%,100%{transform:scaleY(1)}30%{transform:scaleY(3.2)}60%{transform:scaleY(1.7)}80%{transform:scaleY(2.4)}}.abl-tl{margin-top:18px;font:500 20px/1.2 "Figtree",system-ui,sans-serif;color:var(--ink)}.abl-val-h{text-align:center}@media(max-width:900px),(max-width:1199px)and (orientation:portrait){.abl{--abl-fs:clamp(28px,4.6vw,36px);--abl-peek:calc(var(--abl-fs) * 1.2 + 14px)}.abl-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;min-height:600px}.abl-photo img{right:auto;left:0}@supports (width:1cqw){.abl-photo img{--abl-pw:max(222cqw,320cqh);left:calc(var(--abl-pw) * -.55);top:calc(var(--abl-pw) * -.04)}}.abl-txt{grid-column:1;grid-row:1;align-self:start;padding:clamp(44px,7vw,64px) clamp(32px,7vw,64px) 0}.abl-say{font-size:clamp(32px,5vw,42px)}.abl-fig{grid-column:1;grid-row:2;padding:24px 0 clamp(36px,6vw,52px) clamp(32px,7vw,64px)}.abl-fig img{width:min(46vw,440px);max-height:none}.abl-see-h{text-align:left}.abl-tile{align-items:flex-start}}@media(min-width:641px)and (max-width:900px),(min-width:901px)and (max-width:1199px)and (orientation:portrait){.abl{--abl-axis:calc(var(--gutter) + clamp(32px,7vw,64px))}.abl-see{padding-left:var(--abl-axis)}.abl-val-h{text-align:left}}@media(max-width:640px){.abl{--abl-top:84px;--abl-fs:clamp(26px,7.2vw,30px)}.abl-head{min-height:0;padding-bottom:clamp(88px,12svh,112px)}.abl-stage{flex:none;grid-template-rows:auto auto;min-height:0;max-height:none;background:none;border-radius:0;overflow:visible;isolation:auto}.abl-photo{position:relative;inset:auto;z-index:0;grid-column:1;grid-row:1;height:clamp(340px,min(108vw,50svh),460px);border-radius:16px;background:#d3be8d}.abl-fig{grid-column:1;grid-row:1;z-index:1;justify-self:center;padding:0 0 clamp(22px,4svh,32px)}.abl-fig img{width:min(82vw,330px)}.abl-txt{grid-column:1;grid-row:2;padding:clamp(28px,4.4svh,40px) 0 0}.abl-say{font-size:clamp(29px,8vw,34px);line-height:1.14}.abl-sig{font-size:44px}.abl-tiles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(100% - 108px);gap:12px;margin:28px calc(var(--gutter) * -1) 0;padding:0 var(--gutter);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}.abl-tiles::-webkit-scrollbar{display:none}.abl-tile{scroll-snap-align:start}.abl-pic{border-radius:16px}.abl-tl{margin-top:14px}.abl-val-h{text-align:left}}
/* 23.10.: the three windows show real words, like every other demo card on the site (they were grey bars). */
.abl-t{display:block;max-width:100%;font:400 calc(var(--u) * 3.5)/1.35 "Figtree",system-ui,sans-serif;color:#151515;text-wrap:pretty}
.abl-t-s{font-weight:500;font-size:calc(var(--u) * 3.3);color:rgba(21,21,21,.68);white-space:nowrap}
.abl-t-n{font-weight:600;line-height:1.2}
.abl-t-q{font-size:calc(var(--u) * 3.1);line-height:1.2;color:rgba(21,21,21,.68)}
.abl-t-h{font-weight:600;font-size:calc(var(--u) * 3.8);line-height:1.25}
.abl-row .abl-t{white-space:nowrap;overflow:hidden;text-overflow:clip}
.abl-hl{width:auto;height:auto;padding:calc(var(--u) * 0.6) calc(var(--u) * 1.5)}
.abl-fl{gap:calc(var(--u) * 0.8)}


/* 26.10.: the closing letter (Mobbin: Daylight's "note from our co-founder", incident.io's founders' note). One column, a few short lines, signed, no box. It replaces the three-value grid and the sand sheet; the only handwriting left on the page is the signature under the quote. */
.abl-note{max-width:var(--pg-max);margin:var(--pg-gap) auto 0;padding:0 var(--gutter);box-sizing:content-box}
.abl-note-in{max-width:600px;margin:0 auto}
.abl-note-mark{display:block;width:clamp(112px,9vw,136px);height:auto;margin:0 0 clamp(20px,2.6svh,28px) -8px;user-select:none;-webkit-user-drag:none}
.abl-note-h{font:400 var(--abl-fs)/1.15 var(--v-serif);letter-spacing:-.014em;color:var(--ink);text-wrap:balance}
.abl-note-in>p{margin-top:16px;font:400 20px/1.6 "Figtree",system-ui,sans-serif;color:var(--abl-mute);text-wrap:pretty}
.abl-note-h+p{margin-top:clamp(22px,2.8svh,30px)}
.abl-note-in>p.abl-note-off{margin-top:clamp(30px,4svh,40px);font:400 clamp(22px,1.8vw,26px)/1.3 var(--v-serif);letter-spacing:-.01em;color:var(--ink)}
.abl-note-name{display:block}
.abl-note-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:clamp(36px,4.6svh,48px)}
.abl-note-go .v-dl svg{width:15px;height:15px}
.abl-write{position:relative;display:inline-flex;align-items:center;gap:10px;padding:6px 2px;font:500 18px/1.3 "Figtree",system-ui,sans-serif;color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.abl-write span{text-decoration:underline 1px rgba(21,21,21,.35);text-underline-offset:5px;transition:text-decoration-color .15s}
.abl-write:hover span{text-decoration-color:currentColor}
.abl-write svg{flex:none;width:17px;height:17px}
.abl-write::after{content:"";position:absolute;inset:-6px -8px}
.abl-write:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:8px}
@media(max-width:640px){.abl-note-in>p{font-size:19px}
.abl-note-go{flex-direction:column;align-items:stretch;gap:18px}
.abl-note-go .v-dl{flex:none;justify-content:center;height:52px}
.abl-write{align-self:center}
}
@media(prefers-reduced-motion:reduce){.abl-write span{transition:none}
}
@media(min-width:641px)and (max-width:900px),(min-width:901px)and (max-width:1199px)and (orientation:portrait){.abl-note{padding-left:var(--abl-axis)}
.abl-note-in{margin-left:0}
}