/* Home page additions on top of reel.js's own styles. The levels: three cards that deepen from
   the page colour to solid green, each with its icon, and an arrow between them. */
.rl8-lv .rl8-lvl{margin-top:24px}
.rl8-lvl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);margin-top:18px;padding:0;list-style:none;counter-reset:lv}
.rl8-lvl li{position:relative;display:grid;gap:10px;align-content:start;padding:20px 20px 22px;border-radius:16px;counter-increment:lv;
  background:color-mix(in oklab,var(--pacc) 7%,var(--pg));border:1px solid color-mix(in srgb,var(--pacc) 22%,transparent)}
.rl8-lvl li:nth-child(2){background:color-mix(in oklab,var(--pacc) 20%,var(--pg));border-color:color-mix(in srgb,var(--pacc) 45%,transparent)}
.rl8-lvl li:nth-child(3){background:var(--pacc);border-color:var(--pacc)}
.rl8-lvl li::before{content:"";width:44px;height:44px;border-radius:12px;background:var(--pg);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pacc) 30%,transparent)}
.rl8-lvl li::after{content:"";position:absolute;left:31px;top:31px;width:22px;height:22px;background:var(--pacc);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.062%2012.348a1%201%200%200%201%200-.696%2010.75%2010.75%200%200%201%2019.876%200%201%201%200%200%201%200%20.696%2010.75%2010.75%200%200%201-19.876%200%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.062%2012.348a1%201%200%200%201%200-.696%2010.75%2010.75%200%200%201%2019.876%200%201%201%200%200%201%200%20.696%2010.75%2010.75%200%200%201-19.876%200%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E") center/contain no-repeat}
.rl8-lvl li:nth-child(2)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m16%2011%202%202%204-4%22/%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m16%2011%202%202%204-4%22/%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3C/svg%3E")}
.rl8-lvl li:nth-child(3)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.914%204a1.5%201.5%200%2000-2.474-1.561l-9%209A1.5%201.5%200%20005.5%2014h4.002a.5.5%200%2001.471.666L8.086%2020a1.5%201.5%200%20002.475%201.56l9-9A1.5%201.5%200%200018.5%2010h-3.997a.5.5%200%2001-.472-.667z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.914%204a1.5%201.5%200%2000-2.474-1.561l-9%209A1.5%201.5%200%20005.5%2014h4.002a.5.5%200%2001.471.666L8.086%2020a1.5%201.5%200%20002.475%201.56l9-9A1.5%201.5%200%200018.5%2010h-3.997a.5.5%200%2001-.472-.667z%22/%3E%3C/svg%3E")}
.rl8-lvl b{display:flex;align-items:baseline;gap:10px;font-family:var(--fd);font-weight:600;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em;color:var(--pink)}
.rl8-lvl b::before{content:counter(lv);font:500 12px/1 var(--fm);color:color-mix(in srgb,var(--pink) 55%,transparent)}
.rl8-lvl p{margin:0;font-size:16px;line-height:1.45;color:color-mix(in srgb,var(--pink) 85%,transparent)}
.rl8-lvl li:nth-child(3) b,.rl8-lvl li:nth-child(3) p,.rl8-lvl li:nth-child(3) b::before{color:var(--pg)}
.rl8-lvl li:not(:last-child) p::after{content:"";position:absolute;right:calc(-1 * clamp(18px,2.4vw,40px) / 2 - 11px);top:42px;width:22px;height:22px;z-index:1;background:var(--pacc);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22/%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22/%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:760px){.rl8-lvl{grid-template-columns:minmax(0,1fr)}.rl8-lvl li:not(:last-child) p::after{right:auto;left:31px;top:auto;bottom:calc(-1 * clamp(18px,2.4vw,40px) / 2 - 11px);transform:rotate(90deg)}}

/* The office's title, which the green line from the levels drops onto */
.rl8-off{padding-top:clamp(72px,9vw,112px)}
.rl8-oft{position:relative;z-index:4;margin:0;padding:0 20px clamp(8px,1.4vw,16px);text-align:center;font-family:var(--fd);font-weight:var(--fdw,600);font-size:clamp(30px,3.6vw,56px);line-height:1.04;letter-spacing:-.035em;color:var(--pink);text-wrap:balance}

/* The comparison: every rival column the same width, the question column a little wider */
.rl8-tb{table-layout:fixed}
.rl8-tb thead th:first-child{width:28%}
.rl8-tb thead th:nth-child(2){width:13%}

/* An office station's page: its agents as cards inside "What it does", linking to each agent's
   page, and the other stations as small chips */
.ofc-col.wide .ofc-desks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 0}
.ofc-col.wide .ofc-desks li{border:1px solid var(--line);border-radius:14px;background:var(--pg);transition:border-color .2s,transform .2s}
.ofc-col.wide .ofc-desks li:hover{border-color:var(--acc);transform:translateY(-2px)}
.ofc-desks a{display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none}
.ofc-col.wide .ofc-desks a{padding:14px 16px}
.ofc-col.wide .ofc-desks b::after{content:" →";color:var(--acc)}
.ofc-col.wide .ofc-does p{font-size:17px}
.ofc-others{gap:6px!important}
.ofc-others button{height:30px!important;padding:0 11px!important;font-size:12px!important}
@media (max-width:860px){.ofc-col.wide .ofc-desks{grid-template-columns:1fr}}

/* The free tools: two wide, short cards, centred */
.rl8-tools .rl8-tl{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1120px;margin-inline:auto}
.rl8-tools .rl8-tt{max-width:1120px;margin-inline:auto;padding-inline:0;text-align:left}
.rl8-tools .rl8-tl{gap:20px}
.rl8-tools .rl8-tc{grid-template-columns:minmax(0,1fr);gap:20px;padding:16px 16px 28px;border-radius:24px;box-shadow:0 24px 50px -34px rgba(0,0,0,.35)}
.rl8-tools .rl8-tart{height:clamp(200px,22vw,260px);aspect-ratio:auto;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 14%,var(--bg)),var(--bg))}
.rl8-tools .rl8-tart svg{width:62%}
.rl8-tools .rl8-tcb{padding:0 8px}
.rl8-tools .rl8-tcb h3{font-size:clamp(24px,2.2vw,30px)}
.rl8-tools .rl8-tcb p{font-size:16.5px;max-width:34em}
.rl8-tools .rl8-arr{width:48px;height:48px}
@media (max-width:760px){.rl8-tools .rl8-tl{grid-template-columns:1fr}.rl8-tools .rl8-tc{grid-template-columns:minmax(0,1fr);padding:12px 12px 20px}}


/* The steps' green line fades out below the last step instead of stopping at the section's edge */
.rl8-st .rl8-loop,.rl8-st .rl8-lpn{-webkit-mask-image:linear-gradient(#000 calc(100% - 190px),transparent calc(100% - 30px));mask-image:linear-gradient(#000 calc(100% - 190px),transparent calc(100% - 30px))}
.rl8-s3 [data-thr="out"]{-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}