/* Elegant edition · the comparison stays in the foreground, motion supports it. */
:root {
  --ink:#172039;
  --blue:#5061e8;
  --blue-dark:#3e4fcb;
  --purple:#8360d6;
  --soft-blue:#f0f2ff;
  --ease-elegant:cubic-bezier(.22,.7,.2,1);
}
html { scrollbar-gutter:stable; }
::selection { color:#23367e; background:#e2e7ff; }
.header { background:rgba(255,255,255,.82); transition:background .4s,box-shadow .4s,border-color .4s; }
.header.is-scrolled { background:rgba(255,255,255,.94); border-bottom-color:#e6eaf5; box-shadow:0 8px 28px #25365408; }
.hero { background:linear-gradient(125deg,#fff 24%,#fafaff 62%,#f4f7ff 100%); }
.hero-glow { opacity:.75; background:radial-gradient(ellipse at 50% 48%,#dce2ff85,transparent 66%); }
.hero-grid { min-height:550px; align-items:center; }
.hero-copy { padding-bottom:26px; }
.hero h1 { font-weight:750; letter-spacing:-2.7px; }
.gradient-text { background-image:linear-gradient(110deg,#4074e7 2%,#5665df 54%,#9064ce); }
.hero-description { color:#69758e; }
.search-panel { border-color:#e5e9f5; border-radius:19px; background:rgba(255,255,255,.93); box-shadow:0 9px 24px #33486c05,0 25px 58px #54648c0a; transition:border-color .4s,box-shadow .4s; }
.search-panel:focus-within { border-color:#bbc7f0; box-shadow:0 0 0 4px #566fe708,0 18px 42px #33486c0b; }
.search-field { border-color:#e7ebf6; }
.button,.icon-button,.detail-button,.card-action { transition:background .28s,box-shadow .35s,border-color .28s,color .28s,transform .4s var(--ease-elegant); }
.button:not(:disabled):hover { transform:translateY(-1px); }
.button:not(:disabled):active,.card-action:active { transform:translateY(0) scale(.985); }
.button-primary,.host-card[data-front="true"] .card-action {
  background:radial-gradient(100px circle at var(--button-light-x,40%) var(--button-light-y,0%),#ffffff20,transparent 80%),linear-gradient(115deg,#526de6,#5555d6);
  border:1px solid #ffffff14;
  box-shadow:0 4px 8px #4257cd12,0 8px 20px #4257cd16,inset 0 1px 0 #ffffff25;
}
.button-primary:not(:disabled):hover,.host-card[data-front="true"] .card-action:hover {
  background:radial-gradient(120px circle at var(--button-light-x,40%) var(--button-light-y,0%),#ffffff24,transparent 80%),linear-gradient(115deg,#4965dd,#514fcf)!important;
  box-shadow:0 5px 12px #4257cd1c,0 12px 26px #4257cd20;
}
.button .icon,.text-button .icon,.detail-button .icon,.card-action .icon { transition:transform .4s var(--ease-elegant); }
.button:hover .icon:last-child:not(:first-child),.text-button:hover .icon:last-child,.detail-button:hover .icon,.card-action:hover .icon { transform:translateX(3px); }
.button:focus-visible,.card-action:focus-visible,.carousel-navigation button:focus-visible { outline:3px solid #93a5fb; outline-offset:4px; }

/* The selected category glides in one piece instead of blinking between buttons. */
.enhanced-tabs { position:relative; isolation:isolate; }
.enhanced-tabs .category-tab { position:relative; z-index:1; }
.enhanced-tabs .category-tab.active { background:transparent; box-shadow:none; }
.tab-indicator { position:absolute; z-index:0; top:0; left:0; border-radius:9px; background:var(--soft-blue); pointer-events:none; transition:width .5s var(--ease-elegant),height .5s var(--ease-elegant),transform .5s var(--ease-elegant); }
.hero-tabs .tab-indicator { background:linear-gradient(115deg,#5773e7,#575bd9); box-shadow:0 3px 8px #4559d11a,inset 0 1px 0 #ffffff2e; }

/* Card rail: JS owns only the outer transform. Pointer tilt has a separate surface. */
.hero-visual { padding-top:0; }
.visual-label { font-size:9px; letter-spacing:1.7px; color:#76809f; margin-top:0; }
.live-dot { width:5px; height:5px; box-shadow:0 0 0 4px #6c77ea0b; background:#7c84dc; }
.carousel { --card-width:254px; height:534px; margin:auto; isolation:isolate; max-width:650px; }
.carousel-cards { perspective:1250px; perspective-origin:50% 37%; transform-style:preserve-3d; touch-action:pan-y; }
.carousel-platform { width:85%; height:79px; left:7.5%; bottom:109px; background:radial-gradient(ellipse,#e3e8fa 0%,#eff2fd 56%,#f8faff 73%); border:1px solid #e5eafa; box-shadow:0 9px 0 #e8edfa6b,0 18px 28px #4f65a308; transform:rotate(-3deg); }
.orbit { border-color:#dfe5f564; }
.orbit-one { top:58px; height:270px; width:98%; transform:rotate(-19deg); }
.orbit-two { top:35px; height:335px; width:95%; left:3%; opacity:.55; border-style:solid; transform:rotate(20deg); }
.host-card {
  position:absolute;
  top:40px;
  left:calc(50% - var(--card-width)/2);
  width:var(--card-width);
  min-height:0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:21px;
  box-shadow:none!important;
  transform-origin:center center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transition:none!important;
  filter:none!important;
  will-change:auto;
}
.carousel[data-animating="true"] .host-card { will-change:transform,opacity; pointer-events:none; }
.host-card::after { display:none; }
.host-card[data-position="center"],.host-card[data-position="left"],.host-card[data-position="right"] { filter:none; border:0; }
.card-surface {
  --depth:0; --sheen:50%; --light-x:35%; --light-y:10%;
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:346px;
  padding:22px 23px 19px;
  border-radius:inherit;
  border:1px solid #dee5f3;
  background:linear-gradient(155deg,#fff 44%,#fafbff 100%);
  box-shadow:0 3px 6px #28396903,0 15px 30px #3d537712,0 34px 64px #41528c0d,inset 0 1px 0 #fff;
  transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition:transform .55s var(--ease-elegant),border-color .4s,box-shadow .45s;
  overflow:hidden;
  isolation:isolate;
}
.card-surface::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(240px circle at var(--light-x) var(--light-y),#ffffffed,transparent 75%); }
.card-surface::after { content:""; position:absolute; pointer-events:none; inset:0; border-radius:inherit; opacity:calc(.1 + var(--depth) * .13); background:linear-gradient(112deg,transparent 20%,#d8e3ff55 43%,#fff 50%,transparent 64%); background-size:230% 100%; background-position:var(--sheen) 0; }
.host-card[data-position="center"] .card-surface { border-color:#d2dcf3; box-shadow:0 3px 8px #28396904,0 16px 34px #41588814,0 34px 70px #52699917,inset 0 1px 0 #fff; }
.card-topline { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:14px; }
.card-category { font-size:8px; letter-spacing:1px; margin:0; color:#7b88a3; }
.card-sequence { font-size:9px; font-variant-numeric:tabular-nums; color:#99a5bc; letter-spacing:.8px; }
.host-card .wordmark { font-size:21px; line-height:1.4; }
.card-name { font-size:10px; margin-top:7px; color:#7d8aa4; }
.card-price { margin-top:16px; gap:5px; }
.card-price strong { font-size:39px; line-height:1.1; font-weight:740; letter-spacing:-1.7px; }
.card-price span { font-size:12px; color:#3d4862; }
.card-price small { font-size:10px; margin-left:2px; }
.card-renewal { font-size:9px; margin-top:6px; color:#8d99b0; }
.card-features { margin:16px 0; padding:0; }
.card-features li { font-size:11px; margin:8px 0; gap:8px; color:#68758e; }
.card-features .icon { width:12px; height:12px; color:#41a68e; }
.card-action { position:relative; z-index:1; margin-top:auto; align-items:center; gap:10px; min-height:41px; border-radius:9px; font-size:11px; padding:10px 12px; }
.card-action .icon { width:14px; height:14px; }
.floating-compare { z-index:1100; bottom:67px; width:321px; padding:12px 14px; border:1px solid #e3e8f6; background:#ffffffed; border-radius:14px; box-shadow:0 4px 8px #30457304,0 13px 30px #435d9510; transition:box-shadow .4s,border-color .4s,background .4s; }
.floating-compare:hover { background:#fff; border-color:#cdd8f3; box-shadow:0 6px 12px #30457308,0 18px 36px #435d951a; }
.floating-compare strong { font-size:11px; }
.floating-compare small { color:#8591a7; font-size:9px; }
.floating-icon { width:33px; height:33px; background:#f0f3ff; color:#687add; }
.carousel-navigation { z-index:1200; bottom:6px; gap:5px; height:44px; white-space:nowrap; }
.carousel-navigation .icon-button { width:38px; height:38px; color:#8290aa; border:1px solid transparent; }
.carousel-navigation .icon-button:hover { background:#fff; border-color:#e2e7f4; box-shadow:0 3px 12px #34477406; color:var(--blue); }
.carousel-navigation .icon-button .icon { width:16px; height:16px; }
.carousel-counter { font-size:10px; line-height:1; color:#a1abc0; margin-right:8px; letter-spacing:.3px; font-variant-numeric:tabular-nums; }
.carousel-counter strong { font-weight:650; color:#636f8c; }
.carousel-dots { gap:0; align-items:center; }
.carousel-dot { position:relative; width:23px; height:40px; }
.carousel-dot::before { height:4px; width:4px; background:#c8d1e7; transition:width .6s var(--ease-elegant),background .4s; }
.carousel-dot[aria-current="true"]::before { width:19px; background:#7583da; }
.carousel-divider { margin:0 6px; height:14px; background:#e0e5f1; }
.carousel-progress { position:absolute; z-index:1200; left:50%; transform:translateX(-50%); bottom:2px; width:152px; height:2px; border-radius:10px; background:#e8edf9; overflow:hidden; }
.carousel-progress-fill { display:block; width:100%; height:100%; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg,#a8b9f0,#7f88d6); }
.carousel[data-playback="paused"] .carousel-progress-fill { opacity:.4; }
.visual-note { font-size:9px; letter-spacing:.1px; margin-top:11px; color:#909bb1; }
.providers-strip { margin-top:27px; border-top-color:#e6ebf5; }
.provider-logos .wordmark { opacity:.78; transition:opacity .4s; }
.provider-logos .wordmark:hover { opacity:1; }

/* Quiet surfaces, clear data and responsive feedback. */
.results-panel { border-color:#e6eaf3; box-shadow:0 12px 40px #273c6004; }
.hosting-table tr { transition:background-color .35s; }
.hosting-table tbody tr:hover { background:#f8faff; }
.hosting-table tbody tr.is-selected { background:#f0f4ff; }
.hosting-table input[type=checkbox] { accent-color:var(--blue); }
.detail-button { border-color:#dce4f6; }
.detail-button:hover { background:#f0f3ff; border-color:#aebfec; }
.guide-card { box-shadow:0 4px 16px #384d7103; transition:transform .6s var(--ease-elegant),box-shadow .5s,border-color .4s; }
.guide-card:hover { transform:translateY(-4px); border-color:#d1daf3; box-shadow:0 17px 34px #445a9210; }
.guide-card .guide-art { transition:filter .5s; }
.comparison-aside { border-color:#e8ecf5; box-shadow:0 8px 30px #435e7a03; }
.reveal-ready { opacity:0; }
.closing-card { background:linear-gradient(112deg,#18233e,#2b355e); box-shadow:inset 0 1px 0 #ffffff1c; }
#content-modal { border:1px solid #e1e7f2; border-radius:24px; box-shadow:0 20px 40px #1c2d4414,0 50px 140px #15254435; }
#content-modal[open] { animation:none; }
#content-modal::backdrop { background:#17233d52; backdrop-filter:blur(8px); }
#content-modal[open]::backdrop { animation:elegant-backdrop-in .38s var(--ease-elegant); }
#content-modal.is-closing::backdrop { animation:elegant-backdrop-out .19s ease forwards; }
.modal-header { background:#fffffff5; }
.modal-header::after { content:""; position:absolute; bottom:-1px; left:0; height:2px; width:100%; transform:scaleX(var(--read-progress,0)); transform-origin:left; background:linear-gradient(90deg,#91a6e9,#9b87de); }
.modal-close { width:40px; height:40px; background:#f2f5fb; }
.modal-close .icon { transition:transform .45s var(--ease-elegant); }
.modal-close:hover .icon { transform:rotate(90deg); }
.spec-item { background:linear-gradient(150deg,#f7f9fd,#fafbff); }
@keyframes elegant-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes elegant-backdrop-out { from { opacity:1; } to { opacity:0; } }

@media(min-width:1440px) { .hero h1 { font-size:60px; } }
@media(min-width:761px) and (max-width:1150px) {
  .hero-grid { gap:23px; min-height:519px; }
  .carousel { --card-width:227px; height:518px; }
  .card-surface { padding:20px; min-height:333px; }
  .host-card .wordmark { font-size:19px; }
  .card-price strong { font-size:35px; }
  .card-features li { font-size:10px; }
  .floating-compare { width:292px; }
  .carousel-counter { display:none; }
}
@media(max-width:760px) {
  .hero-grid { min-height:0; gap:28px; }
  .hero-copy { padding-bottom:0; }
  .hero h1 { letter-spacing:-1.6px; }
  .hero-visual { max-width:560px; margin-top:6px; }
  .carousel { --card-width:238px; height:521px; max-width:530px; }
  .host-card { top:35px; }
  .card-surface { min-height:344px; padding:22px; }
  .host-card .wordmark { font-size:20px; }
  .card-price strong { font-size:36px; }
  .card-features li { font-size:10px; }
  .floating-compare { bottom:68px; width:300px; }
  .carousel-platform { bottom:110px; }
  .carousel-counter { display:inline; }
  .visual-note { font-size:9px; }
  #content-modal { border-radius:19px; }
  .modal-close { width:38px; height:38px; }
}
@media(max-width:420px) {
  .carousel { --card-width:218px; height:510px; }
  .card-surface { padding:20px 18px; min-height:333px; }
  .host-card .wordmark { font-size:19px; }
  .card-price strong { font-size:35px; }
  .card-category { font-size:7px; }
  .card-sequence { font-size:8px; }
  .card-action { min-height:40px; font-size:10px; }
  .floating-compare { width:278px; bottom:72px; }
  .floating-compare strong { font-size:10px; }
  .floating-compare small { font-size:8px; }
  .carousel-navigation { gap:0; bottom:11px; }
  .carousel-counter { display:none; }
  .carousel-progress { bottom:7px; }
  .visual-note { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .card-surface { transform:none!important; }
  .reveal-ready { opacity:1; }
  .host-card,.card-surface,.tab-indicator,.guide-card { transition:none!important; }
  #content-modal::backdrop { animation:none!important; }
}
@media print { .reveal-ready { opacity:1!important; } }

.host-card[data-front="false"] .card-action { background:#eef2ff; color:#7481be; box-shadow:none; border:1px solid #edf1fa; }