/* blea.md. Cool white, deep indigo and the colours of the icon's b; a dark version follows the system. Motion only moves and
   fades, so nothing ever shifts, and l.js starts it once the font is in. Without JavaScript the page is complete, only still. */
@font-face { font-family: Manrope; src: url(/manrope-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Manrope; src: url(/manrope-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Manrope; src: url(/manrope-cyrillic.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  color-scheme: light dark;
  --system: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: Manrope, var(--system);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bg: #FBFBFD; --ink: #14102B; --ink-2: #57526F; --line: #E6E4F0; --tile: #F3F2F9; --accent: #4A1FC9;
  --ring: rgba(74, 31, 201, .1); --lift: rgba(58, 12, 163, .3); --glow: .55;
  /* the drawings */
  --d-bar: #DDDAEC; --d-dot: #CBC7DF; --d-sheet: #FFFFFF; --d-sheet-2: #E6E3F2; --d-line: #CFCBE2; --d-mark: rgba(229, 0, 126, .2); --d-grid: #E2DFEE;
  --g1: #3A0CA3; --g2: #8A12C8; --g3: #E5007E; --a1: rgba(138, 18, 200, .2); --sun: #FFC800; --sky: #6F8BFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C0920; --ink: #F3F1FB; --ink-2: #ABA6C7; --line: #272146; --tile: #151130; --accent: #B9A4FF;
    --ring: rgba(185, 164, 255, .12); --lift: rgba(0, 0, 0, .6); --glow: .34;
    --d-bar: #2A2450; --d-dot: #3A3366; --d-sheet: #221C47; --d-sheet-2: #1A1539; --d-line: #443C74; --d-mark: rgba(229, 0, 126, .36); --d-grid: #262047;
    --g1: #7B4DFF; --g2: #B13DE8; --g3: #FF3D9E; --a1: rgba(177, 61, 232, .28);
  }
}
.nofont { --sans: var(--system); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 16px/1.55 var(--sans); word-spacing: .04em; -webkit-font-smoothing: antialiased; }
.page { overflow-x: clip; }
img, svg { display: block; }
a { color: inherit; }
.defs { position: absolute; }
.wrap { width: min(100%, 1280px); margin-inline: auto; padding-inline: clamp(16px, 3.2vw, 40px); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 5; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--bg); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.top nav { display: flex; margin-right: -8px; }
.top nav a { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink-2); font-size: 14px; font-weight: 700; text-decoration: none; transition: color .2s; }
.top nav a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 7px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--g1), var(--g3)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.top nav a:hover, .top nav a[aria-current] { color: var(--ink); }
.top nav a:hover::after, .top nav a[aria-current]::after { transform: scaleX(1); }

/* hero */
.hero { position: relative; isolation: isolate; padding-block: clamp(14px, 4vw, 48px) clamp(26px, 4vw, 52px); }
.aurora { position: absolute; z-index: -1; top: -130px; right: -14vw; width: min(960px, 130vw); height: 640px; opacity: var(--glow); pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); }
.aurora::before, .aurora::after { content: ""; position: absolute; inset: 0; will-change: transform; }
.aurora::before { background: radial-gradient(38% 42% at 66% 34%, #FFD400, transparent), radial-gradient(40% 46% at 80% 62%, #E5007E, transparent); }
.aurora::after { background: radial-gradient(44% 46% at 44% 66%, #6A2BEF, transparent); }
h1 { margin: 0; font-size: clamp(42px, 13.2vw, 84px); line-height: 1.03; letter-spacing: -.045em; word-spacing: .07em; font-weight: 800; }
.l { display: block; }
.l > span { display: inline-block; }
.grad { background: linear-gradient(100deg, var(--g1), var(--g2) 45%, var(--g3) 80%, var(--g2)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 62ch; margin: clamp(14px, 2vw, 22px) 0 0; color: var(--ink-2); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; }
.lead a, .an a, .foot p a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--g2); text-decoration-thickness: 2px; text-underline-offset: .18em; transition: color .2s; }
.lead a:hover, .an a:hover, .foot p a:hover { color: var(--accent); }
.mark { display: none; }

/* the six problems */
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.t { display: grid; min-width: 0; }
.t > a { --x: 50%; --y: 0%; position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--tile); color: var(--ink); text-decoration: none; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.t > a::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(420px circle at var(--x) var(--y), var(--ring), transparent 70%); opacity: 0; transition: opacity .35s; }
.t > a:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -30px var(--lift); }
.t > a:hover::before { opacity: 1; }
.tx { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 0; }
.t h2 { margin: 0; font-size: clamp(23px, 2.15vw, 30px); line-height: 1.14; letter-spacing: -.03em; word-spacing: .08em; font-weight: 800; }
.tx p { margin: 0; color: var(--ink-2); }
.go { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--accent); font-size: 14px; }
.go b { font-weight: 800; }
.ga { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ring); transition: background .3s, color .3s, transform .45s var(--ease); }
.t > a:hover .ga { background: var(--accent); color: var(--tile); transform: translateX(5px); }
.v { position: relative; flex: 1 1 auto; height: 168px; min-height: 168px; }
.v > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }

/* the news card is the deep one */
.t-news > a { --tile: #1A1242; --ink: #FFFFFF; --ink-2: #CFC9EA; --accent: #FFE45C; --ring: rgba(255, 228, 92, .14); background: linear-gradient(135deg, #1A1242, #2D1578); }
.t-news .ga { color: #FFE45C; }
.t-news > a:hover .ga { color: #1A1242; }
.feed { -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 80%, transparent); }
.f-row { fill: rgba(255, 255, 255, .07); }
.f-a { fill: rgba(255, 255, 255, .72); }
.f-b { fill: rgba(255, 255, 255, .3); }
.f-sun { fill: #FFD400; } .f-mag { fill: #FF2E93; } .f-vio { fill: #A674FF; } .f-sky { fill: #7EA2FF; }

/* drawings */
.g1 { stop-color: var(--g1); } .g2 { stop-color: var(--g2); } .g3 { stop-color: var(--g3); }
.a1 { stop-color: var(--a1); } .a2 { stop-color: transparent; }
.gl { fill: none; stroke: var(--d-grid); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.ar { fill: url(#ga); }
.ln { fill: none; stroke: url(#gl); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pt { position: absolute; left: 95%; top: 15%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--g3); box-shadow: 0 0 0 3px var(--tile); }
.pt::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--g3); opacity: 0; }
.v-cheaper > svg { inset: auto auto 24px 22px; width: min(100% - 44px, 400px); height: auto; }
.sd { fill: var(--d-dot); }
.br { fill: var(--d-bar); transform-box: fill-box; transform-origin: left center; }
.win .br { fill: url(#gl); }
.win .sd { fill: var(--g3); }
.ck { transform-box: fill-box; transform-origin: center; }
.ck circle { fill: var(--g3); }
.ck path { fill: none; stroke: #FFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.c1 { fill: var(--g1); } .c2 { fill: var(--g3); } .c3 { fill: var(--sun); } .c4 { fill: var(--sky); }
.ring { transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); transition: transform .9s var(--ease); }
.ring circle { fill: none; stroke-width: 30; }
.d1 { stroke: var(--g1); } .d2 { stroke: var(--g3); } .d3 { stroke: var(--sun); } .d4 { stroke: var(--sky); }
.t-money > a:hover .ring { transform: rotate(-60deg); }
.tr { fill: none; stroke: var(--d-line); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.rt { fill: none; stroke: url(#gl); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; }
.pl { fill: var(--tile); stroke: var(--g2); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.hm { fill: var(--g3); stroke: var(--tile); stroke-width: 4; }
.kiv { fill: var(--ink-2); font: 800 15px var(--sans); letter-spacing: .08em; }
.jet { fill: var(--ink); }
.sheet rect { fill: var(--d-sheet); }
.sheet { transition: transform .6s var(--ease); }
.back { transform-box: fill-box; transform-origin: center; transform: rotate(5deg); }
.sheet.back rect { fill: var(--d-sheet-2); }
.sheet.front > rect:first-child { stroke: var(--d-grid); stroke-width: 1; }
.sheet.front .t1 { fill: var(--ink); }
.sheet.front .t2 { fill: var(--d-line); }
.sheet.front .hl { fill: var(--d-mark); transform-box: fill-box; transform-origin: left center; }
.seal { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease); }
.seal circle { fill: url(#gl); }
.seal text { fill: #FFF; font: 800 29px var(--sans); }
.t-law > a:hover .seal { transform: rotate(-10deg) scale(1.08); }
.t-law > a:hover .back { transform: rotate(8deg) translateX(8px); }

/* questions */
.faq { padding-block: clamp(44px, 7vw, 96px) clamp(28px, 4vw, 56px); }
.faq > h2 { margin: 0 0 14px; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.035em; word-spacing: .06em; font-weight: 800; }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding-block: 14px; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary h3 { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3; letter-spacing: -.015em; font-weight: 700; transition: color .2s; }
summary:hover h3 { color: var(--accent); }
.pm { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tile); transition: transform .4s var(--ease); }
.pm::before, .pm::after { content: ""; position: absolute; left: 10px; right: 10px; top: 15px; height: 2px; border-radius: 2px; background: var(--ink); }
.pm::after { transform: rotate(90deg); transition: transform .4s var(--ease); }
details[open] .pm { transform: rotate(180deg); }
details[open] .pm::after { transform: rotate(0); }
.an p { margin: 0; padding-bottom: 20px; max-width: 70ch; color: var(--ink-2); }

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 28px; padding-block: 20px 34px; color: var(--ink-2); font-size: 15px; }
.foot p { margin: 0; }
.foot .brand { color: var(--ink); }

/* motion, all of it */
.js:not(.ready) .page { visibility: hidden; animation: failsafe 0s linear 1.6s forwards; }
@keyframes failsafe { to { visibility: visible; } }
@media (prefers-reduced-motion: no-preference) {
  /* starts at .01 and not 0: the browser counts the headline as painted at once, so the animation never delays LCP */
  .js .l > span { opacity: .01; transform: translateY(.36em); }
  .js .lead, .js .top { opacity: .01; }
  .ready .l > span { animation: rise .95s var(--ease) forwards; }
  .ready .l + .l > span { animation-delay: .08s; }
  .ready .lead { animation: fade .95s var(--ease) .2s forwards; }
  .ready .top { animation: fade .8s ease .05s forwards; }
  .ready .grad { animation: rise .95s var(--ease) forwards, sheen 9s ease-in-out 1.2s infinite alternate; }
  .aurora::before { animation: drift-a 22s ease-in-out infinite alternate; }
  .aurora::after { animation: drift-b 28s ease-in-out infinite alternate; }

  .js .r { opacity: 0; transform: translateY(26px); }
  .js .r.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform 1s var(--ease); }
  .grid .r:nth-child(even).in { transition-delay: .08s; }

  .r:not(.on) *, .r:not(.on) *::before, .r:not(.on) *::after { animation-play-state: paused; }
  .in .roll { animation: roll 18s cubic-bezier(.7, 0, .2, 1) infinite; }
  .in.t-prices svg { animation: wipe 1.8s var(--ease) .2s backwards; }
  .in .pt { animation: pop .5s var(--ease) 1.6s backwards; }
  .in .pt::after { animation: ping 2.6s ease-out 2s infinite; }
  .in .br { animation: grow 1s var(--ease) backwards; }
  .in .rw:nth-of-type(1) .br { animation-delay: .15s; }
  .in .rw:nth-of-type(2) .br { animation-delay: .25s; }
  .in .rw:nth-of-type(3) .br { animation-delay: .35s; }
  .in .rw:nth-of-type(4) .br { animation-delay: .5s; }
  .in .ck { animation: pop .6s var(--ease) 1.1s backwards; }
  .in .ring circle { animation: dash 1.2s var(--ease) .2s backwards; }
  .in .rt { animation: draw 2.4s var(--ease) .3s backwards; }
  .in .pl { animation: pop .5s var(--ease) 1.5s backwards; }
  .in .hl { animation: grow .9s var(--ease) .5s backwards; }
  .in .hl.h2 { animation-delay: .9s; }
  .in .seal { animation: pop .6s var(--ease) 1.2s backwards; }

  :root { interpolate-size: allow-keywords; }
  details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
  details[open]::details-content { height: auto; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes sheen { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes drift-a { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(6%, 5%, 0) scale(1.14); } }
@keyframes drift-b { from { transform: translate3d(5%, 3%, 0) scale(1.1); } to { transform: translate3d(-7%, -4%, 0) scale(.96); } }
@keyframes roll { 0%, 20% { transform: none; } 25%, 45% { transform: translateY(-66px); } 50%, 70% { transform: translateY(-132px); } 75%, 95% { transform: translateY(-198px); } 100% { transform: translateY(-264px); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
@keyframes ping { 0% { transform: scale(.5); opacity: .8; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes dash { from { stroke-dasharray: 0 100; } }
@keyframes draw { from { stroke-dashoffset: 1; } }

/* on a phone the glow stays above the text */
@media (max-width: 639px) {
  .aurora { top: -240px; right: -52vw; opacity: calc(var(--glow) * .75); }
}

/* tablets: two columns */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx { padding: 26px 26px 0; }
  .v { height: 190px; }
  .top { height: 72px; }
}

/* wide: the icon joins the headline, and the cards alternate between wide and narrow */
@media (min-width: 1000px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding-block: 20px 56px; }
  h1 { font-size: clamp(64px, 7.1vw, 100px); }
  .mark { display: block; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
  .mark img { width: clamp(220px, 21vw, 290px); height: auto; filter: drop-shadow(0 34px 44px rgba(58, 12, 163, .3)); }
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .t:nth-child(1), .t:nth-child(4), .t:nth-child(5) { grid-column: span 7; }
  .t:nth-child(2), .t:nth-child(3), .t:nth-child(6) { grid-column: span 5; }
  .t > a { border-radius: 28px; min-height: 344px; }
  .tx { padding: 32px 32px 0; }
  .t:nth-child(1) > a, .t:nth-child(4) > a, .t:nth-child(5) > a { flex-direction: row; }
  .t:nth-child(1) .tx, .t:nth-child(4) .tx, .t:nth-child(5) .tx { flex: 0 0 44%; padding-bottom: 32px; }
  .t:nth-child(1) .go, .t:nth-child(4) .go, .t:nth-child(5) .go { margin-top: auto; }
  .t:nth-child(1) .v, .t:nth-child(4) .v, .t:nth-child(5) .v { height: auto; }
  .v { height: 200px; }
  .v-cheaper > svg { left: 32px; bottom: 32px; width: min(100% - 64px, 420px); }
  .faq { display: grid; grid-template-columns: 4fr 8fr; gap: 40px; }
}
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .mark img { animation: float 7s ease-in-out infinite alternate; }
  .js .mark { opacity: 0; }
  .ready .mark { animation: mark-in 1.2s var(--ease) .15s forwards; }
}
@keyframes float { from { transform: translateY(-7px) rotate(-.6deg); } to { transform: translateY(9px) rotate(.8deg); } }
@keyframes mark-in { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }