:root { --gold: #ffbf59; }
.review-float { position: fixed; z-index: 18; right: 24px; bottom: 23px; width: 315px; padding: 24px 22px 18px; border: 1px solid #d4e3ee; border-radius: 7px; background: #f0f5f9; color: #122638; box-shadow: 0 22px 70px rgba(0, 0, 0, .4), 8px 10px 0 rgba(92, 176, 255, .18); transform: rotate(2deg); animation: review-hover 6s ease-in-out infinite; }
.review-float[hidden] { display: none; }
.review-float::before { content: ""; position: absolute; top: -10px; left: 25px; width: 55px; height: 11px; background: var(--blue); transform: rotate(-5deg); opacity: .85; }
.review-float-close { position: absolute; z-index: 2; top: 8px; right: 10px; border: 0; background: transparent; color: #5f7285; font-size: 20px; line-height: 1; cursor: pointer; }
.review-float a { display: block; }
.review-float-stars { display: inline-block; margin: -43px 0 16px; padding: 7px 11px; border-radius: 6px; background: #071627; color: var(--gold); font-size: 17px; letter-spacing: .06em; box-shadow: 0 8px 17px rgba(0, 0, 0, .18); }
.review-float blockquote { margin: 0 0 15px; font-size: 15px; line-height: 1.4; font-weight: 600; }
.review-float cite { display: block; margin-bottom: 20px; color: #536b7f; font: 500 10px/1.4 var(--mono); }
.review-float-link { display: block; padding-top: 12px; border-top: 1px solid rgba(26, 66, 102, .18); color: #276a9c; font: 600 10px var(--mono); letter-spacing: .07em; }
@keyframes review-hover { 50% { box-shadow: 0 27px 75px rgba(0, 0, 0, .45), 8px 10px 0 rgba(92, 176, 255, .23); } }
.legend-page .site-header, .reviews-page .site-header { background: linear-gradient(180deg, rgba(3, 12, 27, .88), rgba(3, 12, 27, .28)); }
.lore-kicker { margin: 0; color: var(--blue); font: 600 10px var(--mono); letter-spacing: .17em; }
.lore-hashtags { color: #91aac5; font: 500 11px/1.8 var(--mono); }
.lore-section-heading h2 { margin: 18px 0 0; font: 800 clamp(65px, 9vw, 145px)/.83 var(--display); letter-spacing: -.022em; }
.lore-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 45px; }
.lore-actions a { padding: 17px 22px; border: 1px solid rgba(136, 198, 255, .52); color: var(--blue); font: 600 11px var(--mono); letter-spacing: .09em; transition: background .2s, transform .2s; }
.lore-actions a:hover { background: rgba(83, 165, 255, .15); transform: translateY(-3px); }

/* The original ad, staged as an exaggerated product launch. */
.legend-stage { position: relative; min-height: 760px; height: 100svh; overflow: hidden; }
.legend-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.legend-stage-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 10, 22, .98), rgba(2, 10, 22, .82) 41%, rgba(2, 10, 22, .15)), linear-gradient(0deg, rgba(2, 10, 22, .5), transparent 40%); }
.legend-stage-copy { position: relative; z-index: 1; max-width: 1050px; padding: clamp(190px, 22vh, 260px) clamp(24px, 8vw, 150px) 110px; }
.legend-stage h1 { margin: 22px 0 30px; font: 800 clamp(69px, 9vw, 145px)/.81 var(--display); letter-spacing: -.022em; }
.legend-stage h1 em { color: var(--blue); font-style: normal; }
.legend-stage-copy > p:last-child { max-width: 650px; color: #d0deed; font-size: clamp(19px, 2vw, 27px); line-height: 1.4; }
.legend-manifesto { display: grid; grid-template-columns: .55fr 1.45fr; gap: 30px; padding: 135px clamp(24px, 8vw, 150px); color: #0d2132; background: #e9eff5; }
.legend-manifesto .lore-kicker { color: #2e77b2; margin-top: 13px; }
.legend-manifesto h2 { grid-column: 2; margin: 0; font: 800 clamp(62px, 8vw, 135px)/.83 var(--display); }
.legend-manifesto h2 em { color: #277ebf; font-style: normal; }
.legend-manifesto > p:last-child { grid-column: 2; max-width: 800px; margin: 20px 0 0; font-size: clamp(20px, 2.1vw, 29px); line-height: 1.4; }
.legend-results, .legend-voices, .legend-features { padding: 130px clamp(24px, 8vw, 150px); }
.legend-results { background: radial-gradient(ellipse at 85% 15%, rgba(29, 104, 197, .19), transparent 45%), #071323; }
.lore-footnote { margin-top: 20px; color: #8eaecb; font: 500 11px var(--mono); }
.legend-voices { background: #10243a; }
.legend-voice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(15px, 2.7vw, 38px); align-items: center; align-self: center; width: min(100%, 1020px); margin-top: clamp(26px, 4vh, 54px); padding: 22px 18px 32px; }
.legend-voice-grid blockquote { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1; min-height: 0; margin: 0; padding: clamp(16px, 1.8vw, 28px); background: #f8df9a; color: #22303c; box-shadow: 3px 5px 5px rgba(0, 0, 0, .14), 12px 19px 27px rgba(0, 0, 0, .42); transform: rotate(-5deg) translate(-8px, 16px); }
.legend-voice-grid blockquote::before { content: ""; position: absolute; z-index: 2; top: -10px; left: 35%; width: 31%; height: 22px; background: rgba(221, 230, 232, .78); box-shadow: 0 2px 6px rgba(0, 0, 0, .14); transform: rotate(3deg); }
.legend-voice-grid blockquote:nth-child(2) { z-index: 1; background: #cfe9ed; transform: rotate(3deg) translate(7px, -12px); }
.legend-voice-grid blockquote:nth-child(2)::before { left: 29%; transform: rotate(-5deg); }
.legend-voice-grid blockquote:nth-child(2)::after { content: ""; position: absolute; right: 0; bottom: 0; width: 33px; height: 33px; background: linear-gradient(135deg, #b5d6db 0%, #e7f4f5 47%, #93b6bd 100%); clip-path: polygon(0 100%, 100% 0, 100% 100%); filter: drop-shadow(-3px -3px 3px rgba(30, 61, 68, .3)); }
.legend-voice-grid blockquote:nth-child(3) { background: #f5ced1; transform: rotate(-3deg) translate(11px, 24px); }
.legend-voice-grid blockquote:nth-child(3)::before { left: 42%; transform: rotate(6deg); }
.legend-voice-grid p { margin: 0 0 10px; font-size: clamp(16px, 1.3vw, 21px); line-height: 1.3; font-weight: 650; }
.legend-voice-grid cite { font: 600 clamp(9px, .7vw, 11px)/1.4 var(--mono); color: #3d5967; }
.legend-features { background: #071323; }
.legend-safety { background: #3d211d; }
.legend-finale { padding: 120px clamp(24px, 8vw, 150px); background: radial-gradient(ellipse at 80% 80%, rgba(45, 135, 230, .27), transparent 50%), #071a2d; }
.legend-finale h2 { margin: 18px 0 24px; font: 800 clamp(70px, 9vw, 150px)/.83 var(--display); }
.legend-finale h2 em { color: var(--blue); font-style: normal; }
.legend-finale > p:not(.lore-kicker) { max-width: 870px; color: #bdcddd; font-size: clamp(17px, 1.7vw, 23px); line-height: 1.55; }
.legend-finale .legend-terms { margin-top: 15px; font-size: clamp(14px, 1.1vw, 17px) !important; }
.legend-finale .lore-actions { margin-top: 24px; }
.legend-finale .lore-hashtags { margin-top: 20px; font: 500 11px/1.8 var(--mono) !important; }

/* Rating summary and a feed of individual critic cards. */
.reviews-hero { position: relative; min-height: 535px; overflow: hidden; display: flex; flex-direction: column; justify-content: end; padding: 150px clamp(24px, 8vw, 150px) 75px; background: radial-gradient(circle at 78% 20%, rgba(44, 142, 255, .32), transparent 29%), radial-gradient(circle at 58% 110%, rgba(255, 150, 92, .12), transparent 40%), #08172a; }
.reviews-hero-orbit { position: absolute; width: 600px; height: 600px; right: 7%; top: -240px; border: 1px solid rgba(120, 185, 254, .18); border-radius: 50%; box-shadow: 0 0 0 90px rgba(92, 155, 254, .025), 0 0 0 175px rgba(92, 155, 254, .02); pointer-events: none; }
.reviews-hero > *:not(.reviews-hero-orbit) { position: relative; }
.reviews-hero h1 { margin: 24px 0 20px; font: 800 clamp(95px, 14vw, 220px)/.8 var(--display); }
.reviews-hero h1 em { color: var(--blue); font-style: normal; }
.reviews-hero > p:last-child { max-width: 760px; color: #c0d3e6; font-size: clamp(19px, 2vw, 28px); line-height: 1.4; }
.rating-board { display: grid; grid-template-columns: .75fr 1.1fr .75fr; gap: 65px; align-items: center; margin: -1px clamp(24px, 8vw, 150px) 0; padding: 52px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rating-main > strong { display: block; margin-top: 5px; font: 800 145px/.8 var(--display); letter-spacing: -.024em; }
.rating-main > strong span { color: #9ab8d3; font: 500 35px var(--display); letter-spacing: 0; }
.rating-stars { width: max-content; margin: 12px 0; background: linear-gradient(90deg, var(--gold) 88%, #60738a 88%); background-clip: text; color: transparent; font-size: 25px; letter-spacing: .1em; }
.rating-main small { color: #9eb8d0; font: 500 9px var(--mono); letter-spacing: .08em; }
.rating-bars { display: grid; gap: 13px; }
.rating-bars > div { display: grid; grid-template-columns: 70px 1fr 25px; gap: 12px; align-items: center; color: #a8bed4; font: 600 10px var(--mono); }
.rating-bars i { height: 8px; border-radius: 20px; background: rgba(182, 204, 229, .17); overflow: hidden; }
.rating-bars b { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--copper)); border-radius: inherit; }
.rating-bars > div:nth-child(1) b { width: 75%; }
.rating-bars > div:nth-child(2) b, .rating-bars > div:nth-child(5) b { width: 12.5%; }
.rating-bars > div:nth-child(3) b, .rating-bars > div:nth-child(4) b { width: 0; }
.rating-bars strong { color: #e3edf5; text-align: right; }
.rating-audience { border-left: 1px solid var(--line); padding-left: 45px; }
.rating-audience span { color: var(--blue); font: 600 10px var(--mono); letter-spacing: .13em; }
.rating-audience strong { display: block; margin: 15px 0; color: var(--blue); font: 800 clamp(75px, 7vw, 120px)/.8 var(--display); }
.rating-audience p { max-width: 280px; color: #a9bfd4; font-size: 13px; line-height: 1.5; }
.review-feed { padding: 100px clamp(24px, 8vw, 150px) 130px; }
.review-feed-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 55px; }
.review-feed h2 { margin: 20px 0 0; font: 800 clamp(62px, 8vw, 130px)/.82 var(--display); }
.review-feed h2 em { color: var(--blue); font-style: normal; }
.review-filters { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.review-filters button { padding: 10px 14px; border: 1px solid var(--line); background: transparent; color: #c1d0de; font: 600 10px var(--mono); letter-spacing: .07em; cursor: pointer; }
.review-filters button[aria-pressed=true] { background: var(--blue); color: var(--night); border-color: var(--blue); }
.review-filters button span { margin-left: 7px; opacity: .65; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-card { position: relative; display: flex; flex-direction: column; min-height: 375px; padding: 25px; border-radius: 8px; background: #edf3f8; color: #142639; box-shadow: 0 20px 45px rgba(0, 0, 0, .17); transition: transform .2s, box-shadow .2s; }
.review-card:nth-child(3n+2) { background: #e8f1fc; }
.review-card:nth-child(3n) { background: #f7ece7; }
.review-card:hover { transform: translateY(-7px) rotate(-.5deg); box-shadow: 0 28px 60px rgba(0, 0, 0, .26); }
.review-card[hidden] { display: none; }
.review-card-top { display: flex; gap: 12px; align-items: center; }
.review-avatar { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: #173b61; color: #fff; font: 700 14px var(--display); }
.review-card-top > div { min-width: 0; }
.review-author { display: block; font-weight: 700; font-size: 14px; line-height: 1.3; }
.review-card-top small { color: #667b91; font: 500 9px var(--mono); letter-spacing: .06em; }
.review-more { margin-left: auto; align-self: start; color: #7b91a7; }
.review-stars { margin: 25px 0 10px; color: #df9b19; font-size: 23px; letter-spacing: .09em; }
.review-card blockquote { margin: 0 0 25px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.43; }
.review-card > a { display: flex; justify-content: space-between; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(30, 73, 107, .18); color: #2c6998; font: 600 10px var(--mono); letter-spacing: .08em; }
.review-empty { margin: 50px 0; color: var(--muted); }
.reviews-end { padding: 115px clamp(24px, 8vw, 150px); background: radial-gradient(ellipse at 80% 85%, rgba(80, 144, 232, .25), transparent 55%), #0a2037; }
.reviews-end h2 { margin: 20px 0 25px; font: 800 clamp(75px, 10vw, 165px)/.83 var(--display); }
.reviews-end h2 em { color: var(--blue); font-style: normal; }
.reviews-end > p:not(.lore-kicker, .lore-hashtags) { color: #d0dce7; font-size: clamp(19px, 2vw, 28px); }

@media (max-width: 1100px) {
  .rating-board { grid-template-columns: 1fr 1.3fr; gap: 35px; }
  .rating-audience { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: 30px 0 0; }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .legend-voice-grid { gap: 18px; }
}
@media (max-width: 700px) {
  .review-float { right: 13px; bottom: 10px; width: min(245px, calc(100vw - 26px)); padding: 8px 12px 7px; transform: none; animation: none; }
  .review-float::before { display: none; }
  .review-float-stars { margin: 0; padding: 0; background: transparent; color: #d48b08; font-size: 12px; box-shadow: none; }
  .review-float blockquote { display: block; margin: 2px 0 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; line-height: 1.2; }
  .review-float cite { display: none; }
  .review-float-link { padding-top: 4px; font-size: 8px; }
  .review-float-close { top: 5px; right: 6px; }
  .legend-stage { height: auto; min-height: 760px; }
  .legend-stage > img { object-position: 65% center; }
  .legend-stage-shade { background: linear-gradient(90deg, rgba(2, 10, 22, .87), rgba(2, 10, 22, .45)), linear-gradient(0deg, rgba(2, 10, 22, .8), transparent 55%); }
  .legend-stage-copy { padding: 190px 24px 100px; }
  .legend-stage h1 { font-size: clamp(63px, 14vw, 100px); }
  .legend-stage-copy > p:last-child { font-size: 19px; }
  .legend-manifesto, .legend-results, .legend-voices, .legend-features, .legend-safety, .legend-finale { padding: 85px 24px; }
  .legend-manifesto { display: block; }
  .legend-manifesto h2 { margin-top: 30px; font-size: 66px; }
  .legend-manifesto > p:last-child { font-size: 20px; }
  .lore-section-heading h2 { font-size: 70px; }
  .legend-voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; max-width: 380px; padding: 8px 12px 18px; }
  .legend-voice-grid blockquote, .legend-voice-grid blockquote:nth-child(2), .legend-voice-grid blockquote:nth-child(3) { min-height: 0; padding: 12px; }
  .legend-voice-grid blockquote:nth-child(1) { transform: rotate(-3deg) translate(-3px, 7px); }
  .legend-voice-grid blockquote:nth-child(2) { transform: rotate(2deg) translate(4px, -4px); }
  .legend-voice-grid blockquote:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 9px) / 2); transform: rotate(-2deg) translate(8px, 0); }
  .legend-voice-grid p { margin-bottom: 6px; font-size: clamp(10px, 2.8vw, 13px); line-height: 1.24; }
  .legend-voice-grid cite { font-size: 7px; }
  .legend-voice-grid blockquote::before { top: -6px; height: 13px; }
  .legend-voice-grid blockquote:nth-child(2)::after { width: 23px; height: 23px; }
  .legend-finale h2 { font-size: 77px; }
  .lore-actions a { width: 100%; }
  .reviews-hero { min-height: 450px; padding: 145px 24px 60px; }
  .reviews-hero h1 { font-size: clamp(75px, 16vw, 120px); }
  .reviews-hero > p:last-child { font-size: 19px; }
  .rating-board { display: block; margin: 0 24px; padding: 35px 0; }
  .rating-main > strong { font-size: 110px; }
  .rating-bars { margin-top: 35px; }
  .rating-audience { margin-top: 35px; }
  .review-feed { padding: 85px 24px; }
  .review-feed-heading { display: block; }
  .review-feed h2 { font-size: 70px; }
  .review-filters { margin-top: 35px; }
  .review-grid { grid-template-columns: 1fr; }
  .review-card { min-height: 300px; }
  .reviews-end { padding: 90px 24px; }
  .reviews-end h2 { font-size: 80px; }
}
@media (prefers-reduced-motion: reduce) { .review-float { animation: none; } }