.bf{--lime:#e9ff64;isolation:isolate;color:#f5f6f8;background:radial-gradient(at 96% 110%,#123e68,#0000 68%),#05090f;border:1px solid #344656;border-radius:24px;grid-template:"copy chart""action chart""brand chart"/minmax(0,1fr) minmax(240px,40%);align-items:center;gap:16px 32px;padding:clamp(24px,3.4vw,40px);display:grid;position:relative;overflow:hidden}.bf:before{content:"";z-index:-1;opacity:.8;mix-blend-mode:screen;pointer-events:none;background:url(/blog/_astro/arcs.C2389hwu.webp) right -80px bottom -55px/85% no-repeat,repeating-linear-gradient(90deg,#0000 0 47px,#bee2ff0a 47px 48px),repeating-linear-gradient(0deg,#0000 0 47px,#bee2ff0a 47px 48px);position:absolute;inset:0}.bf[hidden]{display:none}.bf__copy{grid-area:copy;min-width:0}.bf__meta,.bf__brand,.bf__link{align-items:center;width:fit-content;display:flex}.bf__meta{gap:10px;margin-bottom:12px}.bf__badge,.bf__date{white-space:nowrap;font-size:12px;font-weight:700;line-height:18px}.bf__date{color:#c7d5e5;font-variant-numeric:tabular-nums}.bf__badge{background:var(--lime);color:#091733;text-transform:uppercase;letter-spacing:.06em;border-radius:20px;padding:2px 10px}.bf__headline{letter-spacing:-.035em;text-wrap:balance;font-size:clamp(28px,3.2vw,42px);line-height:1.05;display:block}.bf__detail{color:#bfd0e1;max-width:46ch;margin:10px 0 0;font-size:16px;line-height:1.4}.bf__brand{color:#fff;letter-spacing:-.03em;grid-area:brand;font-size:15px;font-weight:700;line-height:1}.bf__brand img{margin-right:6px}.bf__brand span{font-weight:400}.bf__link{color:#fff;text-align:center;background:linear-gradient(#1672c8,#105bac);border-radius:12px;grid-area:action;justify-content:center;gap:12px;min-height:44px;padding:10px 18px;font-size:16px;font-weight:700;line-height:1.2;box-shadow:inset 0 1px #ffffff38,0 8px 28px -12px #2196f3}.bf__link:after{content:"";z-index:1;position:absolute;inset:-1px}.bf__link:hover{background:#115ca8}.bf :focus-visible{outline:3px solid var(--lime);outline-offset:2px}.bf__ladder{grid-area:chart;grid-template-columns:repeat(4,minmax(0,1fr));align-self:end;align-items:end;gap:5px;display:grid}.bf__step{background:#101c29;border:1px solid #456076;border-radius:12px 12px 6px 6px;flex-direction:column;justify-content:flex-end;gap:2px;min-height:74px;padding:8px;display:flex}.bf__step:nth-child(2){min-height:94px}.bf__step:nth-child(3){min-height:114px}.bf__step:last-child{background:linear-gradient(#157bcd,#104c8d);border-color:#4da7ef;min-height:134px}.bf__step b{letter-spacing:-.05em;font-size:clamp(18px,1.6vw,23px);line-height:1}.bf__step:last-child b{color:var(--lime)}.bf__step span{color:#d9e8f5;font-size:12px}.bf--bottom{grid-template:"brand chart""copy chart""action chart"/minmax(0,1fr) minmax(240px,40%)}.bf--title{border-radius:16px;grid-template:"copy brand""copy action"/minmax(0,1fr) auto;gap:10px 20px;padding:20px 24px}.bf--title .bf__brand,.bf--title .bf__link{justify-self:end}.bf--title .bf__headline{font-size:clamp(22px,2.4vw,32px)}.bf--dock{z-index:85;left:50%;bottom:max(10px, env(safe-area-inset-bottom));border-radius:14px;grid-template:"copy action close"/minmax(0,1fr) auto 44px;gap:8px;width:max-content;max-width:calc(100% - 16px);padding:6px 4px 6px 14px;position:fixed;transform:translate(-50%);box-shadow:0 8px 26px #0005}.bf--dock .bf__copy{flex-direction:column-reverse;gap:3px;display:flex}.bf--dock .bf__meta{gap:6px;margin:0}.bf--dock .bf__badge{color:var(--lime);background:0 0;padding:0}.bf--dock .bf__date,.bf--dock .bf__badge{font-size:10px;line-height:1.2}.bf--dock .bf__headline{letter-spacing:-.02em;font-size:18px;line-height:1.1}.bf--dock .bf__link{gap:5px;padding:8px 12px;font-size:14px}.bf__close{z-index:2;color:#cfdaea;border-radius:10px;grid-area:close;width:44px;height:44px;font-size:22px}.bf__close:hover{background:#ffffff16}html:has(.bf--dock:not([hidden])){scroll-padding-bottom:calc(var(--bf-dock-height) + 65px)}@media (width<700px){.bf:not(.bf--dock,.bf--title){grid-template:"brand brand""copy copy""chart chart""action action"/1fr auto;gap:16px;padding:20px}.bf__ladder{width:100%}.bf__step{min-height:44px}.bf__step:nth-child(2){min-height:54px}.bf__step:nth-child(3){min-height:64px}.bf__step:last-child{min-height:74px}.bf--title{grid-template:"copy copy""action brand"/minmax(0,1fr) auto;padding:16px}.bf--title .bf__link{justify-self:start;padding-inline:12px;font-size:14px}.bf--title .bf__brand{font-size:13px}.bf--title .bf__brand img{width:16px;height:16px}}@media (width<385px){.bf--title{grid-template:"copy""action"/1fr}.bf--title .bf__brand{display:none}.bf--dock{gap:2px}.bf--dock .bf__link span{display:none}}
