.home-wrapper{display:flex;align-items:center;cursor:pointer;transition:all .4s ease}html,body{margin:0;padding:0;height:100%}.home{border:2px solid black;width:150px;height:150px;justify-content:center;align-items:center;display:flex;border-radius:20px;transition:transform .4s ease}.home img{max-width:80%;max-height:80%}.description-box{margin-left:10px;height:130px;justify-content:center;align-items:center;text-align:center;display:flex;padding:10px;background-color:navy;color:#fff;border-radius:10px;max-width:200px;box-shadow:0 2px 6px #0003;font-size:.9rem;animation:fadeIn .8s ease}.homedivs{gap:15px;display:flex;justify-content:center;flex-direction:column;align-items:center}h1{text-align:center;margin:0 0 1rem;padding-top:10px}@keyframes fadeIn{0%{opacity:0;transform:translate(-5px)}to{opacity:1;transform:translate(0)}}.bodydiv{max-width:980px;margin:0 auto 32px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:16px;border-radius:16px;box-shadow:0 2px 10px #0000000f}.chartdiv{width:100%;max-width:680px;background:#fff;border-radius:14px;padding:14px;box-shadow:0 2px 8px #00000014;cursor:pointer;transition:max-width .35s ease,transform .2s ease,background-color .35s ease;outline:none}.chartdiv:hover{transform:translateY(-1px)}.chartdiv:focus-visible{box-shadow:0 0 0 3px #0066ff59}.chartdiv h2{margin:0 0 10px}.chartdiv.expanded{max-width:960px}.chart-row{display:flex;align-items:flex-start;gap:12px}.chartdiv img{width:48%;height:auto;border-radius:8px}.chartdiv .img-placeholder{width:48%;min-height:120px;border-radius:8px;background:repeating-linear-gradient(45deg,#0000000d,#0000000d 10px,#00000014 10px 20px)}.expand-content{flex:1 1 auto;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .25s ease}.expand-content.show{max-height:280px;opacity:1}.chartdiv.verdict{background:#ffe8cc}@media (max-width: 720px){.chart-row{flex-direction:column}.chartdiv img,.chartdiv .img-placeholder{width:100%}.chartdiv,.chartdiv.expanded{max-width:100%}}button{border:2px solid black;display:flex;transition:1s;display:inline-block}button:hover{background:red;cursor:pointer}.b{display:block;width:max-content;margin:20px auto;text-decoration:none}.afford-page{padding-bottom:20px}.hero{width:min(1100px,92vw);aspect-ratio:16 / 5;margin:10px auto 24px;border:2px solid #000;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px #0000001a;background:#fff}.hero.columns{display:grid;grid-template-columns:repeat(3,1fr)}.hero-slice{position:relative;border:0;background:var(--sliceColor);cursor:pointer;transition:filter .3s ease,opacity .3s ease,transform .2s ease;display:grid;place-items:center;outline:none;border-left:2px solid #000}.hero-slice:first-child{border-left:0}.hero-slice:hover{transform:translateY(-1px)}.slice-label{font-size:clamp(1rem,2.2vw,1.25rem);font-weight:700;text-transform:capitalize;color:#0b0b0b;text-shadow:0 1px 0 rgba(255,255,255,.35);-webkit-user-select:none;user-select:none}.hero-slice:focus-visible{box-shadow:inset 0 0 0 3px #0066ff73}.detail-panel.vertical{width:min(1100px,92vw);margin:6px auto 10px;display:grid;grid-template-rows:auto auto;gap:10px;background:transparent}.detail-img{width:min(380px,70vw);justify-self:center;height:auto;display:block;border-radius:10px;box-shadow:0 2px 10px #0000001f;background:#fff;padding:8px}.detail-text{text-align:center}.detail-text p{margin:0 0 6px}.detail-hint{font-size:.9rem;opacity:.7}@media (max-width: 720px){.hero{aspect-ratio:16 / 7}.slice-label{font-size:clamp(.95rem,3.2vw,1.1rem)}}.hero{width:min(500px,92vw);height:clamp(70px,12vh,110px);margin:10px auto 56px;border:2px solid #000;border-radius:10px;overflow:hidden;background:transparent;box-shadow:0 6px 18px #0000001a}.hero.columns{width:335px;display:grid;grid-template-columns:repeat(3,1fr);gap:0}.hero-slice{border:0;margin:0;background:var(--sliceColor);display:grid;place-items:center;cursor:pointer;transition:filter .3s ease,opacity .3s ease,transform .2s ease}.hero-slice.active{filter:brightness(1.05) saturate(1.1);box-shadow:inset 0 0 0 3px #00000040}.hero-slice.dimmed{opacity:.45;filter:grayscale(.2) brightness(.9)}.slice-label{font-size:clamp(1rem,2.2vw,1.25rem);font-weight:700;text-transform:capitalize;color:#0b0b0b;text-shadow:0 1px 0 rgba(255,255,255,.35)}@media (max-width: 900px){.hero{height:clamp(64px,12vh,96px)}.hero.columns{width:280px}}
