.comparison-page { background: #05070a; }
.comparison-page .nav-current { color: var(--ivory); }
.comparison-page .nav-current::after { display: block; height: 1px; margin-top: 4px; content: ""; background: linear-gradient(90deg, var(--gold), var(--blue), var(--green)); }
.comparison-page .route-current { border-color: rgba(234,209,127,.42); background: linear-gradient(100deg, rgba(200,168,78,.13), rgba(135,206,235,.07), rgba(126,176,139,.08)); }

.compare-hero { position: relative; isolation: isolate; min-height: 760px; padding: clamp(90px,9vw,138px) 0 clamp(100px,10vw,150px); overflow: hidden; background: radial-gradient(circle at 12% 24%, rgba(200,168,78,.16), transparent 28rem), radial-gradient(circle at 83% 31%, rgba(135,206,235,.14), transparent 34rem), radial-gradient(circle at 77% 87%, rgba(126,176,139,.11), transparent 27rem), linear-gradient(125deg, #0d0b08, #070b10 53%, #07100c); }
.compare-hero::before { position: absolute; z-index: -2; inset: 0; content: ""; opacity: .7; background-image: linear-gradient(rgba(200,168,78,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(135,206,235,.035) 1px, transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(to bottom, #000, transparent 91%); }
.compare-hero::after { position: absolute; z-index: -1; top: 7%; right: -3%; content: "/"; color: rgba(242,233,214,.025); font-family: var(--serif); font-size: clamp(28rem,48vw,48rem); line-height: .75; transform: rotate(7deg); }
.compare-hero-grid { display: grid; grid-template-columns: minmax(360px,.77fr) minmax(560px,1.23fr); align-items: center; gap: clamp(52px,7vw,104px); }
.compare-hero-copy { position: relative; z-index: 2; }
.compare-hero-copy h1 { max-width: 680px; font-size: clamp(4rem,6.5vw,6.8rem); }
.compare-hero-copy h1 em { color: var(--green-bright); }
.compare-hero-copy > p:not(.compare-disclaimer) { max-width: 610px; margin-bottom: 30px; color: #aaa398; font-size: clamp(1rem,1.35vw,1.12rem); line-height: 1.78; }
.compare-disclaimer { max-width: 610px; margin: 27px 0 0; padding-left: 14px; border-left: 1px solid rgba(135,206,235,.32); color: #777d7b; font-size: .65rem; line-height: 1.55; }

.realm-map { position: relative; z-index: 1; min-height: 600px; padding: 20px; border: 1px solid rgba(200,168,78,.27); border-radius: 24px; background: linear-gradient(145deg, rgba(20,17,11,.92), rgba(6,14,20,.94) 52%, rgba(7,18,13,.92)); box-shadow: 0 48px 120px rgba(0,0,0,.58), 0 0 80px rgba(135,206,235,.06); }
.realm-map::before { position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,.035); border-radius: 17px; content: ""; pointer-events: none; }
.realm-map-head { position: relative; z-index: 2; min-height: 48px; padding: 0 11px 14px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.realm-map-head span { color: #6f7779; font: 740 .52rem/1 var(--mono); letter-spacing: .12em; }
.realm-map-head strong { color: #a6a095; font: 650 .68rem/1 var(--sans); }
.realm-map-head i { padding: 5px 7px; border: 1px solid rgba(126,176,139,.3); border-radius: 99px; color: var(--green-bright); background: rgba(126,176,139,.07); font: 800 .48rem/1 var(--mono); letter-spacing: .12em; }
.realm-core { position: relative; width: min(360px,82%); min-height: 154px; margin: 55px auto 0; padding: 27px 28px 24px 106px; display: flex; align-items: center; border: 1px solid rgba(234,209,127,.34); border-radius: 16px; background: radial-gradient(circle at 15% 50%, rgba(200,168,78,.18), transparent 38%), linear-gradient(110deg, rgba(25,20,10,.98), rgba(9,18,24,.96)); box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 0 40px rgba(200,168,78,.07); }
.realm-slash { position: absolute; left: 30px; color: var(--blue); font-family: var(--serif); font-size: 6.4rem; line-height: 1; text-shadow: 13px 10px 0 rgba(126,176,139,.33); transform: rotate(4deg); }
.realm-core small, .realm-core strong, .realm-core p { display: block; }
.realm-core small { color: var(--gold-bright); font: 760 .52rem/1 var(--mono); letter-spacing: .13em; }
.realm-core strong { margin-top: 9px; color: var(--ivory); font: 500 1.72rem/1 var(--serif); letter-spacing: -.03em; }
.realm-core p { margin: 8px 0 0; color: #7d827e; font-size: .64rem; line-height: 1.45; }
.realm-links { position: relative; width: 74%; height: 68px; margin: 0 auto; }
.realm-links::before { position: absolute; top: 0; left: 50%; width: 1px; height: 37px; content: ""; background: linear-gradient(var(--gold), rgba(135,206,235,.7)); }
.realm-links::after { position: absolute; top: 36px; left: 0; width: 100%; height: 1px; content: ""; background: linear-gradient(90deg, var(--gold), var(--blue), var(--green)); opacity: .62; }
.realm-links i { position: absolute; top: 33px; width: 7px; height: 7px; border: 1px solid rgba(242,233,214,.4); border-radius: 50%; background: #0b1012; transform: translateX(-50%); }
.realm-links i:nth-child(1) { left: 0; }.realm-links i:nth-child(2) { left: 33.333%; }.realm-links i:nth-child(3) { left: 66.666%; }.realm-links i:nth-child(4) { left: 100%; }
.realm-nodes { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
.realm-nodes article { min-height: 112px; padding: 15px 13px; border: 1px solid rgba(255,255,255,.08); border-top-color: var(--node); border-radius: 11px; background: rgba(255,255,255,.025); }
.realm-nodes article > span { color: var(--node); font: 800 .51rem/1 var(--mono); }
.realm-nodes article strong, .realm-nodes article small { display: block; }
.realm-nodes article strong { margin-top: 20px; color: var(--ivory); font-family: var(--serif); font-size: .92rem; font-weight: 500; line-height: 1; }
.realm-nodes article small { margin-top: 7px; color: #737978; font-size: .55rem; }
.realm-gold { --node: var(--gold-bright); }.realm-blue { --node: var(--blue); }.realm-green { --node: var(--green-bright); }.realm-mix { --node: #c0d8ae; }
.realm-call { width: fit-content; margin: 24px auto 0; padding: 8px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(135,206,235,.18); border-radius: 99px; background: rgba(5,9,12,.72); }
.realm-call span { color: var(--blue-bright); font: 800 .58rem/1 var(--mono); }
.realm-call p { margin: 0; color: #747d7f; font-size: .58rem; }

.compare-thesis { position: relative; padding: clamp(105px,11vw,165px) 0; overflow: hidden; border-block: 1px solid rgba(255,255,255,.055); background: linear-gradient(115deg,#0e0c08,#080d11 52%,#07100b); }
.compare-thesis::after { position: absolute; top: -18rem; right: -10rem; width: 42rem; height: 42rem; border: 1px solid rgba(126,176,139,.08); border-radius: 50%; content: ""; box-shadow: inset 0 0 0 68px rgba(135,206,235,.012), inset 0 0 0 69px rgba(135,206,235,.06); }
.compare-thesis h2 { max-width: 900px; margin: 19px 0 48px; font-size: clamp(3.2rem,5.7vw,5.8rem); line-height: .94; }
.compare-thesis h2 em { color: var(--blue-bright); }
.thesis-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.thesis-grid article { min-height: 230px; padding: 27px 24px; border: 1px solid rgba(255,255,255,.07); border-top-color: var(--accent); border-radius: 13px; background: rgba(6,9,12,.67); }
.thesis-grid article:nth-child(1) { --accent: var(--gold); }.thesis-grid article:nth-child(2) { --accent: var(--blue); }.thesis-grid article:nth-child(3) { --accent: var(--green); }.thesis-grid article:nth-child(4) { --accent: var(--gold-bright); }
.thesis-grid span { color: var(--accent); font: 760 .55rem/1 var(--mono); letter-spacing: .1em; }
.thesis-grid h3 { margin: 50px 0 10px; font-size: 1.45rem; line-height: 1.05; letter-spacing: -.025em; }
.thesis-grid p { margin: 0; color: #898983; font-size: .72rem; line-height: 1.62; }

.comparison { padding: clamp(105px,11vw,170px) 0; background: radial-gradient(circle at 82% 8%, rgba(135,206,235,.06), transparent 34rem), linear-gradient(180deg,#07090c,#05070a); }
.comparison-head { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 70px; }
.comparison-head h2 { max-width: 790px; margin: 17px 0 0; font-size: clamp(3.2rem,5vw,5.3rem); line-height: .95; }
.comparison-head h2 em { color: var(--green-bright); }
.comparison-head > p { max-width: 510px; margin: 0; color: #8e8b84; font-size: .78rem; line-height: 1.72; }
.comparison-index { position: sticky; z-index: 20; top: 76px; margin: 52px 0 42px; padding: 7px; display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; border: 1px solid rgba(255,255,255,.075); border-radius: 12px; background: rgba(7,11,15,.9); box-shadow: 0 17px 50px rgba(0,0,0,.35); backdrop-filter: blur(18px); }
.comparison-index a { min-width: 0; min-height: 43px; padding: 0 9px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 7px; color: #97968f; font-size: .64rem; font-weight: 760; text-decoration: none; transition: color 150ms ease,border-color 150ms ease,background 150ms ease; }
.comparison-index a:hover { border-color: rgba(135,206,235,.2); color: var(--ivory); background: rgba(135,206,235,.04); }
.comparison-index span { color: var(--gold); font: 800 .49rem/1 var(--mono); }

.compare-group { --group: 200,168,78; scroll-margin-top: 145px; margin-top: 22px; padding: clamp(28px,4vw,48px); border: 1px solid rgba(var(--group),.2); border-radius: 19px; background: radial-gradient(circle at 93% 0,rgba(var(--group),.09),transparent 23rem),rgba(10,13,16,.76); box-shadow: 0 28px 80px rgba(0,0,0,.25); }
.compare-group + .compare-group { margin-top: 24px; }
.group-gold { --group: 200,168,78; }.group-blue { --group: 135,206,235; }.group-green { --group: 126,176,139; }.group-mix { --group: 179,193,139; }
.compare-group-heading { margin-bottom: 27px; display: grid; grid-template-columns: 180px 1fr; gap: 25px; }
.compare-group-heading > span { width: fit-content; height: fit-content; padding: 7px 9px; border: 1px solid rgba(var(--group),.28); border-radius: 99px; color: rgb(var(--group)); background: rgba(var(--group),.055); font: 760 .53rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.compare-group-heading h3 { margin: 0; font-size: clamp(2rem,3vw,3.15rem); line-height: 1; }
.compare-group-heading p { margin: 8px 0 0; color: #82847e; font-size: .72rem; }
.compare-table-wrap { overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; }
.compare-table-wrap table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare-table-wrap thead { background: rgba(var(--group),.055); }
.compare-table-wrap th, .compare-table-wrap td { padding: 17px 18px; vertical-align: top; border-right: 1px solid rgba(255,255,255,.055); border-bottom: 1px solid rgba(255,255,255,.055); text-align: left; }
.compare-table-wrap th:last-child, .compare-table-wrap td:last-child { border-right: 0; }
.compare-table-wrap tbody tr:last-child > * { border-bottom: 0; }
.compare-table-wrap thead th { color: #7f817d; font: 760 .54rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.compare-table-wrap thead th:nth-child(1) { width: 18%; }.compare-table-wrap thead th:nth-child(2) { width: 28%; }.compare-table-wrap thead th:nth-child(3) { width: 27%; }.compare-table-wrap thead th:nth-child(4) { width: 27%; }
.compare-table-wrap tbody th { color: var(--ivory); font-family: var(--serif); font-size: .96rem; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; background: rgba(255,255,255,.012); }
.compare-table-wrap td { color: #858783; font-size: .68rem; line-height: 1.55; }
.compare-table-wrap td strong { margin-bottom: 5px; display: block; color: rgb(var(--group)); font-size: .68rem; font-weight: 780; }
.compare-table-wrap td span { display: block; }
.compare-table-wrap tbody tr { transition: background 140ms ease; }
.compare-table-wrap tbody tr:hover { background: rgba(var(--group),.028); }
.matrix-note { max-width: 900px; margin: 31px auto 0; color: #6f7472; font-size: .65rem; line-height: 1.65; text-align: center; }
.matrix-note strong { color: #9b9b94; }

.compare-final { position: relative; isolation: isolate; padding: clamp(110px,13vw,185px) 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,.055); background: radial-gradient(circle at 20% 42%,rgba(200,168,78,.13),transparent 27rem),radial-gradient(circle at 80% 48%,rgba(126,176,139,.11),transparent 30rem),#070a0d; }
.compare-final::before { position: absolute; z-index: -1; top: 50%; left: 50%; content: "/SHOUT"; color: rgba(242,233,214,.022); font-family: var(--serif); font-size: clamp(9rem,21vw,20rem); line-height: .7; transform: translate(-50%,-50%); white-space: nowrap; }
.compare-final-inner { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: clamp(55px,9vw,130px); }
.compare-final-inner > div:first-child > span { color: var(--gold-bright); font: 800 .6rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.compare-final h2 { max-width: 760px; margin: 19px 0 0; font-size: clamp(3.25rem,5.8vw,6.1rem); line-height: .91; }
.compare-final h2 em { color: var(--blue-bright); }
.compare-final-inner > div:last-child > p { max-width: 520px; color: #9b9992; font-size: .83rem; line-height: 1.7; }

@media (max-width: 1180px) {
  .comparison-page .nav-links { gap: 18px; }
  .compare-hero-grid { grid-template-columns: 1fr; }
  .compare-hero-copy { max-width: 800px; }
  .realm-map { width: min(760px,100%); margin-inline: auto; }
  .thesis-grid { grid-template-columns: 1fr 1fr; }
  .comparison-index { grid-template-columns: repeat(4,1fr); }
}

@media (max-width: 1080px) {
  .compare-hero { padding-top: 82px; }
  .comparison-head, .compare-final-inner { grid-template-columns: 1fr; align-items: start; gap: 34px; }
}

@media (max-width: 760px) {
  .compare-hero { min-height: 0; padding: 68px 0 92px; }
  .compare-hero-copy h1 { font-size: clamp(3.45rem,15vw,5.3rem); }
  .realm-map { min-height: 0; padding: 13px; border-radius: 17px; }
  .realm-map-head { grid-template-columns: 1fr auto; gap: 8px; }
  .realm-map-head strong { display: none; }
  .realm-core { width: 92%; min-height: 130px; margin-top: 39px; padding: 22px 20px 20px 82px; }
  .realm-slash { left: 23px; font-size: 5rem; }
  .realm-core strong { font-size: 1.4rem; }
  .realm-links { width: 79%; height: 55px; }
  .realm-links::before { height: 30px; }.realm-links::after { top: 29px; }.realm-links i { top: 26px; }
  .realm-nodes { grid-template-columns: 1fr 1fr; }
  .realm-nodes article { min-height: 91px; }
  .realm-nodes article strong { margin-top: 12px; }
  .realm-call { max-width: 100%; border-radius: 9px; }
  .compare-thesis h2 { margin-bottom: 35px; }
  .thesis-grid { grid-template-columns: 1fr; }
  .thesis-grid article { min-height: 0; }
  .thesis-grid h3 { margin-top: 28px; }
  .comparison-index { top: 64px; margin-top: 37px; grid-template-columns: 1fr 1fr; }
  .comparison-index a { justify-content: flex-start; }
  .comparison-index a:last-child { grid-column: 1/-1; }
  .compare-group { scroll-margin-top: 252px; padding: 22px 14px; border-radius: 14px; }
  .compare-group-heading { grid-template-columns: 1fr; gap: 15px; }
  .compare-table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .compare-table-wrap table, .compare-table-wrap tbody { display: block; }
  .compare-table-wrap thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .compare-table-wrap tr { display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; background: rgba(4,7,9,.42); }
  .compare-table-wrap tr + tr { margin-top: 9px; }
  .compare-table-wrap tbody th { width: 100%; padding: 15px; display: block; border: 0; border-bottom: 1px solid rgba(var(--group),.18); background: rgba(var(--group),.045); font-size: 1.05rem; }
  .compare-table-wrap td { width: 100%; padding: 13px 15px; display: grid; grid-template-columns: 92px 1fr; gap: 12px; border: 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .68rem; }
  .compare-table-wrap td:last-child { border-bottom: 0; }
  .compare-table-wrap td::before { content: attr(data-label); color: #686f70; font: 760 .49rem/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
  .compare-table-wrap td strong { margin: 0 0 5px; }
  .compare-table-wrap td span { grid-column: 2; }
  .matrix-note { text-align: left; }
}

@media (max-width: 430px) {
  .compare-hero-copy h1 { font-size: clamp(3.1rem,15.4vw,4.2rem); }
  .compare-disclaimer { font-size: .61rem; }
  .realm-map-head span { font-size: .45rem; }
  .realm-core { width: 100%; padding-left: 75px; }
  .realm-nodes article { padding: 13px 11px; }
  .realm-nodes article strong { font-size: .86rem; }
  .realm-call { align-items: flex-start; flex-direction: column; }
  .comparison-index { position: relative; top: auto; }
  .compare-group { scroll-margin-top: 76px; }
  .compare-table-wrap td { grid-template-columns: 80px 1fr; padding-inline: 12px; gap: 9px; }
  .compare-final h2 { font-size: clamp(3rem,14.5vw,4.1rem); }
}

@media (prefers-reduced-motion: reduce) {
  .comparison-index { backdrop-filter: none; }
}