/* ComparePilot polish layer: motion, logo tiles, partner grid, hero search. */
:root{--ease:cubic-bezier(.22,1,.36,1);--ring:0 0 0 4px rgba(226,75,103,.18)}
::selection{background:rgba(226,75,103,.18)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:10px}

/* Header: tightens and lifts on scroll */
.site-header{transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.nav-wrap{transition:height .35s var(--ease)}
.site-header.scrolled{background:rgba(255,255,255,.82);box-shadow:0 8px 30px rgba(21,32,51,.06)}
.site-header.scrolled .nav-wrap{height:64px}
.nav-links a{position:relative;transition:color .2s}
.nav-links a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}.nav-links a:hover:after{transform:scaleX(1)}

/* Buttons: arrow nudge + soft shine */
.btn{position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover:after{transform:translateX(120%)}
.btn span{display:inline-block;transition:transform .25s var(--ease)}.btn:hover span{transform:translateX(4px)}
.btn:active{transform:translateY(0) scale(.98)}
.ghost-btn,.chip,.select-compare,.quiz-option,.rank-item,.popular-card{transition:transform .2s var(--ease),border-color .2s,background .2s,box-shadow .2s,color .2s}
.ghost-btn:hover{border-color:var(--ink)}

/* Hero: soft aura, floating card, search */
.hero{position:relative}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;z-index:0}
.hero:before{width:520px;height:520px;right:-120px;top:-80px;background:radial-gradient(circle,rgba(226,75,103,.22),transparent 70%);animation:drift 14s ease-in-out infinite alternate}
.hero:after{width:440px;height:440px;left:-160px;bottom:-140px;background:radial-gradient(circle,rgba(21,32,51,.14),transparent 70%);animation:drift 18s ease-in-out infinite alternate-reverse}
.hero .container{position:relative;z-index:1}
@keyframes drift{to{transform:translate(40px,30px) scale(1.08)}}
.decision-card{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.decision-pair b,.decision-pair small,.winner-line strong{transition:opacity .35s var(--ease)}
.decision-card.swap .decision-pair b,.decision-card.swap .decision-pair small,.decision-card.swap .winner-line strong{opacity:0}
.score-orb{transition:transform .5s var(--ease)}.score-orb.bump{animation:bump .6s var(--ease)}
@keyframes bump{40%{transform:scale(1.18)}}

.hero-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:7px 7px 7px 18px;max-width:560px;box-shadow:0 14px 40px rgba(21,32,51,.07);transition:box-shadow .3s var(--ease),border-color .3s}
.hero-search:focus-within{border-color:var(--ink);box-shadow:0 18px 50px rgba(21,32,51,.12)}
.hero-search svg{flex-shrink:0;color:var(--muted)}
.hero-search input{flex:1;border:0;outline:0;font:inherit;font-size:16px;background:transparent;color:var(--ink);min-width:0;padding:10px 4px}
.hero-search .btn{padding:13px 18px}
.quick-picks{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.quick-picks button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:rgba(255,255,255,.7);color:var(--ink);border-radius:999px;padding:8px 13px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .2s var(--ease),border-color .2s,background .2s}
.quick-picks button:hover{transform:translateY(-2px);border-color:var(--ink);background:#fff}
.quick-picks svg{width:15px;height:15px;color:var(--accent)}

/* Logo tiles: monogram marks, colour from the name */
.logo-tile{--h:220;width:46px;height:46px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;color:#fff;font-weight:850;font-size:19px;letter-spacing:-.04em;background:linear-gradient(140deg,hsl(var(--h) 62% 52%),hsl(calc(var(--h) + 28) 58% 38%));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px hsla(var(--h),60%,40%,.22);transition:transform .35s var(--ease)}
.logo-tile.sm{width:38px;height:38px;border-radius:11px;font-size:16px}
.tool-card-top>.tool-head{display:flex;flex-direction:row;align-items:center;gap:13px}
.tool-card:hover .logo-tile,.partner-card:hover .logo-tile{transform:rotate(-6deg) scale(1.06)}

/* Featured partners */
.partners{padding:96px 0 20px}
.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.partner-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.partner-card:before{content:"";position:absolute;inset:-1px;border-radius:20px;padding:1px;background:linear-gradient(140deg,var(--accent),transparent 45%,transparent 60%,var(--ink));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.partner-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(21,32,51,.12);border-color:transparent}
.partner-card:hover:before{opacity:1}
.partner-top{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.partner-top h3{margin:0;font-size:21px;letter-spacing:-.04em}
.partner-top small{display:block;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.02em;margin-top:2px}
.partner-flag{position:absolute;top:16px;right:16px;font-size:10px;font-weight:850;letter-spacing:.1em;color:var(--green);background:rgba(31,122,90,.09);border-radius:999px;padding:5px 9px}
.partner-best{font-size:14px;line-height:1.5;margin:0 0 12px}
.partner-best b{display:block;font-size:10px;letter-spacing:.12em;color:var(--muted);margin-bottom:3px}
.partner-points{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:7px;font-size:13px;color:var(--muted);line-height:1.45}
.partner-points li{display:flex;gap:8px}.partner-points li:before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:6px}
.partner-card .btn{margin-top:auto;width:100%;padding:13px 16px;font-size:14px}
.partner-card .affiliate-note{display:block;margin-top:9px;font-size:11px;color:var(--muted);text-align:center}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.tool-grid .tool-card{animation:rise .6s var(--ease) both}
.tool-grid .tool-card:nth-child(2){animation-delay:40ms}.tool-grid .tool-card:nth-child(3){animation-delay:80ms}.tool-grid .tool-card:nth-child(4){animation-delay:120ms}.tool-grid .tool-card:nth-child(5){animation-delay:160ms}.tool-grid .tool-card:nth-child(6){animation-delay:200ms}.tool-grid .tool-card:nth-child(n+7){animation-delay:240ms}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.tool-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.tool-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(21,32,51,.1);border-color:#c9d1dc}
.compare-result>*{animation:rise .5s var(--ease) both}
.quiz-card>*{animation:rise .45s var(--ease) both}
.quiz-option:hover,.rank-item:hover{transform:translateX(4px)}
.popular-card:hover{transform:translateY(-3px)}
.compare-tray{transition:transform .45s var(--ease),opacity .45s var(--ease)}

@media(max-width:1100px){.partner-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){
  .partner-grid{grid-template-columns:1fr}
  .hero-search{padding-left:14px}.hero-search .btn{padding:12px 14px}
  .hero:before{width:320px;height:320px;right:-140px}.hero:after{display:none}
  .partners{padding-top:64px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
.partners .section-heading h2{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.06em;margin:0}
.partner-flag{position:static;align-self:flex-start;margin-bottom:12px}
.hero-grid>*{min-width:0}
@media(max-width:650px){.hero h1{font-size:clamp(50px,15vw,64px)}.hero-search input{font-size:15px}.decision-card{width:100%}}
@media(max-width:650px){.split-heading{gap:18px}}