.areasHero{position:relative;isolation:isolate;overflow:hidden;padding-block:140px 128px;border-bottom:1px solid var(--a-line)}.areasHero:after,.areasHero:before{content:"";position:absolute;inset:0;z-index:-1}.areasHero:before{z-index:-2;background:url(/home-hero-bg.webp) 50%/cover no-repeat;opacity:.28;filter:grayscale(.4)}html[data-theme=dark] .areasHero:before{opacity:.35;filter:grayscale(1)}.areasHero:after{background:linear-gradient(90deg,var(--a-bg) 0,color-mix(in srgb,var(--a-bg) 70%,transparent) 55%,transparent 100%)}.areasHero h1{max-width:880px;font-size:clamp(44px,6vw,84px);line-height:1.02}.areasHero h1 em{color:var(--red);font-style:italic}.areasHero p:last-child{max-width:660px;margin:32px 0 0;color:var(--a-muted);font-size:18px}.areasSpine{position:relative;display:grid;grid-gap:24px;gap:24px}.areasSpine:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(var(--red),var(--yellow),var(--blue),var(--red));transform:translateX(-50%);opacity:.7}.areaRow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:center}.areaCard{grid-column:1;grid-row:1;position:relative;padding:32px 36px;border:1px solid var(--a-line);background:var(--a-surface);transition:border-color .25s ease,transform .25s ease}.areaCard:after{content:"";position:absolute;top:50%;right:-32px;width:32px;height:2px;background:var(--red)}.areaRow.isRight .areaCard{grid-column:3}.areaRow.isRight .areaCard:after{right:auto;left:-32px}.areaCard:hover{border-color:var(--red);transform:translateY(-2px)}.areaIndex{color:var(--red);font-family:Space Mono,ui-monospace,monospace;font-size:12px;font-weight:700;letter-spacing:.16em}.areaCard h3{margin-top:10px;font-size:30px;line-height:1.1}.areaCard p{margin:12px 0 0;color:var(--a-muted);font-size:15.5px}.areaNode{grid-column:2;grid-row:1;justify-self:center;position:relative;width:56px;background:var(--a-bg)}.areaNode polygon{fill:var(--a-bg);stroke:var(--red);stroke-width:3}.areaNode circle{fill:var(--red)}.areaRow.tone-yellow .areaCard:after,.areaRow.tone-yellow .areaNode circle{fill:#d8b606;background:#d8b606}.areaRow.tone-blue .areaCard:after,.areaRow.tone-blue .areaNode circle{fill:var(--blue);background:var(--blue)}.areaRow.tone-white .areaNode circle{fill:var(--a-bg);stroke:var(--red);stroke-width:2}.areaGhost{grid-column:3;grid-row:1;padding-left:32px;color:transparent;font-family:Fraunces,Georgia,serif;font-size:clamp(88px,10vw,150px);font-weight:700;line-height:1;-webkit-text-stroke:1px color-mix(in srgb,var(--a-ink) 16%,transparent);-webkit-user-select:none;-moz-user-select:none;user-select:none}.areaRow.isRight .areaGhost{grid-column:1;justify-self:end;padding:0 32px 0 0}.areaRow:hover .areaGhost{-webkit-text-stroke-color:var(--red)}@media (max-width:860px){.areasSpine:before{left:28px;transform:none}.areaRow,.areaRow.isRight{grid-template-columns:56px minmax(0,1fr);column-gap:20px}.areaNode{grid-column:1}.areaCard,.areaRow.isRight .areaCard{grid-column:2}.areaCard:after,.areaRow.isRight .areaCard:after{left:-20px;right:auto;width:20px}.areaGhost{display:none}}@media (max-width:640px){.areasHero{padding-block:88px 72px}.areaCard{padding:24px}.areaCard h3{font-size:24px}}