/* ==========================================================================
   Solutions page (Figma frame 1:3) – design coordinates: 1rem = 10px at 1728px
   Hero, Transform band and footer are shared (main.css).
   ========================================================================== */

/* ---------- 02 Solution finder ---------- */
.finder { position: relative; padding: 13rem 0 14rem; color: #fff;
	background: radial-gradient(51.84rem 39.6rem at 8.64rem 90%, rgba(110, 194, 227, .08), transparent),
		radial-gradient(77.76rem 31.68rem at 50% 0, rgba(249, 112, 20, .12), transparent), var(--canvas); }
.finder__head { text-align: center; }
.finder__head .eyebrow { margin-bottom: 1.2rem; }
.finder__head .h2 { line-height: 6.6rem; letter-spacing: -.03em; }
.finder__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 6.4rem; }

/* Tile: the first one is orange until you hover another (the orange then follows your mouse) */
.finder-tile { position: relative; display: flex; flex-direction: column; height: 36rem; padding: 3.9rem 3.1rem 3.1rem; overflow: hidden; isolation: isolate; color: #fff;
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	transition: border-color .6s var(--ease-out), translate .7s var(--ease-out); }
.finder-tile::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: linear-gradient(131.63deg, #f97014 0%, #bf4d08 71.429%); clip-path: inset(100% 0 0 0); transition: clip-path .8s var(--ease-io); }
.finder-tile.is-active, .finder-tile:hover, .finder-tile:focus-visible { border-color: transparent; }
.finder-tile.is-active::before, .finder-tile:hover::before, .finder-tile:focus-visible::before { clip-path: inset(0 0 0 0); }
.finder__tiles:hover .finder-tile.is-active:not(:hover) { border-color: rgba(255, 255, 255, .18); }
.finder__tiles:hover .finder-tile.is-active:not(:hover)::before { clip-path: inset(0 0 100% 0); }
.finder-tile:hover { translate: 0 -.8rem; } /* 'translate' so it doesn't fight the reveal animation's transform */

.finder-tile__num { position: absolute; right: -.8rem; top: 23.3rem; z-index: -1; font-family: var(--f-head); font-weight: 600; font-size: 14rem; line-height: 15.4rem; letter-spacing: -.03em; white-space: nowrap; opacity: .06; transition: opacity .6s, transform 1s var(--ease-out); }
.finder-tile.is-active .finder-tile__num, .finder-tile:hover .finder-tile__num { opacity: .18; }
.finder-tile:hover .finder-tile__num { transform: translateY(-1.6rem); }
.finder__tiles:hover .finder-tile.is-active:not(:hover) .finder-tile__num { opacity: .06; }

.finder-tile__title { width: 25.6rem; font-family: var(--f-head); font-weight: 600; font-size: max(2.6rem, 19px); line-height: 3.2rem; letter-spacing: -.015em; }
.finder-tile__text { width: 25.6rem; margin-top: auto; font-size: var(--t-body); line-height: 2.4rem; color: var(--text-muted-inv); transition: color .5s; }
.finder-tile.is-active .finder-tile__text, .finder-tile:hover .finder-tile__text { color: rgba(255, 255, 255, .9); }
.finder__tiles:hover .finder-tile.is-active:not(:hover) .finder-tile__text { color: var(--text-muted-inv); }

.finder-tile__pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 1rem; margin-top: 2rem; padding: .9rem 1.5rem; border-radius: 80px;
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	font-family: var(--f-head); font-weight: 600; font-size: max(1.6rem, 14px); line-height: 2rem; letter-spacing: -.005em; white-space: nowrap; transition: background .5s, border-color .5s; }
.finder-tile__pill b { font-weight: 600; color: var(--orange); transition: color .4s, transform .6s var(--ease-out); }
.finder-tile.is-active .finder-tile__pill, .finder-tile:hover .finder-tile__pill { background: rgba(255, 255, 255, .2); border-color: transparent; }
.finder-tile.is-active .finder-tile__pill b, .finder-tile:hover .finder-tile__pill b { color: #fff; }
.finder-tile:hover .finder-tile__pill b { transform: translateX(.6rem); }
.finder__tiles:hover .finder-tile.is-active:not(:hover) .finder-tile__pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.finder__tiles:hover .finder-tile.is-active:not(:hover) .finder-tile__pill b { color: var(--orange); }

/* ---------- 03–05 Hub sections ---------- */
.hub-sec { position: relative; display: grid; grid-template-columns: 64rem 1fr; align-items: center; padding: 14rem 15.4rem 14rem 19.4rem; overflow: hidden; scroll-margin-top: 2rem; }
.hub-sec--light { grid-template-columns: 1fr 64rem; padding: 14rem 19.4rem 14rem 15.4rem; color: var(--text-strong); }
.hub-sec--light .hub-sec__media { order: -1; justify-self: start; }
.hub-sec--dark { color: #fff; }

/* Backgrounds (soft brand glows from the design) */
.hub-sec--v0 { background: radial-gradient(60.48rem 54.84rem at 10% 85%, rgba(110, 194, 227, .08), transparent), radial-gradient(60.48rem 54.84rem at 85% 20%, rgba(249, 112, 20, .09), transparent), var(--canvas); }
.hub-sec--v2 { background: radial-gradient(51.84rem 46.6rem at 10% 10%, rgba(110, 194, 227, .08), transparent), radial-gradient(60.48rem 55.92rem at 85% 50%, rgba(249, 112, 20, .12), transparent), var(--canvas); }
.hub-sec--v1, .hub-sec--v3 { background: radial-gradient(60.48rem 43.3rem at 60% 100%, rgba(15, 51, 102, .08), transparent), radial-gradient(69.12rem 60.62rem at 85% 30%, rgba(110, 194, 227, .24), transparent), radial-gradient(60.48rem 60.62rem at 15% 40%, rgba(249, 112, 20, .22), transparent), #fff; }

.hub-sec__copy { width: 64rem; }
.hub-sec__eyebrow { white-space: pre; margin-bottom: 1.6rem; }
.hub-sec__title { width: 64rem; font-size: 6rem; line-height: 6.6rem; letter-spacing: -.03em; }
.hub-sec__intro { width: 58rem; margin-top: 2.2rem; font-size: var(--t-body-lg); line-height: 2.8rem; color: var(--text-muted-inv); }
.hub-sec--light .hub-sec__intro { color: var(--text-strong); }
.hub-sec__btn { margin-top: 3.6rem; }

/* Product rows */
.prod-list { width: 58rem; margin-top: 3.2rem; }
.prod-row a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.2rem 2.4rem; overflow: hidden; isolation: isolate;
	border: 1px solid transparent; border-bottom-color: var(--line-inv); transition: background .5s var(--ease-out), border-color .5s var(--ease-out); }
.prod-row__body { display: flex; flex-direction: column; gap: .4rem; min-width: 0; transition: transform .6s var(--ease-out); }
.prod-row__title { font-size: max(2rem, 16px); line-height: 2.6rem; letter-spacing: -.01em; transition: color .4s; }
.prod-row__text { max-width: 100%; font-size: var(--t-small); line-height: 2rem; color: var(--text-muted-inv); }
.prod-row__arrow { position: relative; flex: none; width: 2.6rem; height: 3.2rem; overflow: hidden; font-family: var(--f-head); font-weight: 600; font-size: max(2.6rem, 19px); line-height: 3.2rem; color: var(--orange); }
.prod-row__arrow span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .6s var(--ease-out); }
.prod-row__arrow span + span { transform: translateX(-120%); }
.prod-row a:hover .prod-row__arrow span:first-child { transform: translateX(120%); }
.prod-row a:hover .prod-row__arrow span + span { transform: none; }

/* Dark: glass highlight on the first row, follows your mouse */
.hub-sec--dark .prod-row.is-active a, .hub-sec--dark .prod-row a:hover, .hub-sec--dark .prod-row a:focus-visible { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hub-sec--dark .prod-list:hover .prod-row.is-active a:not(:hover) { background: transparent; border-color: transparent; border-bottom-color: var(--line-inv); }
.hub-sec--dark .prod-row a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease-out); }
.hub-sec--dark .prod-row a:hover::before { transform: none; }

/* Light: plain rules, a pale orange wash sweeps in on hover */
.hub-sec--light .prod-row a { padding: 2.2rem 0; border: 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.hub-sec--light .prod-row:first-child a { border-top: 1px solid rgba(0, 0, 0, .12); }
.hub-sec--light .prod-row__text { color: var(--text-strong); }
.hub-sec--light .prod-row a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--orange-50), rgba(255, 243, 234, 0)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.hub-sec--light .prod-row a:hover::before { transform: none; }
.hub-sec--light .prod-row a:hover .prod-row__body { transform: translateX(1.6rem); }
.hub-sec--light .prod-row a:hover .prod-row__title { color: var(--orange); }

/* Image (cut corners or Adept “M”) */
.hub-sec__media { position: relative; display: block; justify-self: end; width: 60rem; height: 44rem; }
.hub-sec--m .hub-sec__media { width: 64rem; height: 40rem; }
.hub-sec__img { position: absolute; inset: 0; display: block; overflow: hidden; clip-path: polygon(5.6rem 0, 100% 0, 100% calc(100% - 5.6rem), calc(100% - 5.6rem) 100%, 0 100%, 0 5.6rem); transition: clip-path .9s var(--ease-out); }
.hub-sec__img.clip-m { clip-path: url(#clip-hero-m); }
.hub-sec--cut .hub-sec__media:hover .hub-sec__img { clip-path: polygon(3.2rem 0, 100% 0, 100% calc(100% - 3.2rem), calc(100% - 3.2rem) 100%, 0 100%, 0 3.2rem); }
.hub-sec__zoom { position: absolute; inset: 0; display: block; transform: scale(1.001); transition: transform 1.2s var(--ease-out); }
.hub-sec__zoom img { width: 100%; height: 112%; margin-top: -6%; object-fit: cover; }
.hub-sec__media:hover .hub-sec__zoom { transform: scale(1.08); }
.hub-sec__sheen { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(249, 112, 20, 0) 30%, rgba(249, 112, 20, .35) 100%); opacity: 0; transition: opacity .8s var(--ease-out); pointer-events: none; }
.hub-sec__media:hover .hub-sec__sheen { opacity: 1; }

/* ---------- 06 Safety netting vs steel mesh ---------- */
.compare { position: relative; padding: 14rem 0 15rem; color: #fff;
	background: radial-gradient(51.84rem 41.4rem at 90% 20%, rgba(110, 194, 227, .09), transparent),
		radial-gradient(69.12rem 49.68rem at 30% 50%, rgba(249, 112, 20, .12), transparent), var(--canvas); }
.compare__grid { display: grid; grid-template-columns: 1fr 82rem; align-items: start; }
.compare__intro .eyebrow { margin-bottom: 1.2rem; }
.compare__title { width: 56rem; font-size: 6rem; line-height: 6.6rem; letter-spacing: -.03em; }
.compare__text { width: 48rem; margin: 2.4rem 0 3.6rem; font-size: var(--t-body-lg); line-height: 2.8rem; color: var(--text-muted-inv); }

.compare__table { position: relative; margin-top: 1rem; isolation: isolate; }
.compare__col { position: absolute; top: 0; bottom: 0; z-index: -1; width: 29rem; transform-origin: top; }
.compare__col--good { left: 24rem; background: linear-gradient(180deg, rgba(249, 112, 20, .95), rgba(249, 112, 20, .55)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.compare__col--bad { left: 53rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.compare__row { position: relative; display: grid; grid-template-columns: 24rem 29rem 29rem; align-items: start; height: 8.4rem; padding-top: 2.6rem; border-top: 1px solid var(--line-inv); transition: background .5s var(--ease-out); }
.compare__row--head { height: 9.6rem; padding-top: 3.4rem; border-top: 0; }
.compare__row:last-child { height: 9.6rem; }
.compare__row:not(.compare__row--head):hover { background: rgba(255, 255, 255, .04); }
.compare__row > span:not(:first-child) { padding-left: 2.8rem; }
.compare__label, .compare__good-h, .compare__bad-h { font-family: var(--f-head); font-weight: 600; font-size: max(2rem, 16px); line-height: 2.6rem; letter-spacing: -.01em; white-space: nowrap; }
.compare__label { transition: color .4s, transform .6s var(--ease-out); }
.compare__row:hover .compare__label { color: var(--orange); transform: translateX(.8rem); }
.compare__bad-h { color: var(--text-muted-inv); }
.compare__cell { display: flex; align-items: center; gap: 1rem; font-size: var(--t-body); line-height: 2.4rem; white-space: nowrap; }
.compare__cell--bad { color: var(--text-muted-inv); }
.compare__tick, .compare__cross { position: relative; flex: none; display: block; transition: transform .6s var(--ease-out); }
.compare__tick { width: 1.4rem; height: 1rem; }
.compare__cross { width: 1rem; height: 1rem; }
.compare__tick img { position: absolute; top: -8.36%; left: -6.31%; width: 112.95%; height: 126.52%; max-width: none; }
.compare__cross img { position: absolute; top: -7.07%; left: -7.07%; width: 114.14%; height: 114.14%; max-width: none; }
.compare__row:hover .compare__tick { transform: scale(1.3) rotate(-8deg); }
.compare__row:hover .compare__cross { transform: rotate(90deg); }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 1023px) {
	/* finder */
	.finder { padding: 8rem 0; }
	.finder__head .h2 { line-height: 1.1; }
	.finder__tiles { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; margin-top: 4rem; }
	.finder-tile { height: auto; min-height: 24rem; padding: 2.8rem 2.4rem 2.4rem; }
	.finder-tile__title, .finder-tile__text { width: auto; }
	.finder-tile__text { margin-top: 4rem; }
	.finder-tile__num { top: auto; bottom: -3rem; font-size: 120px; line-height: 1; }
	.finder-tile:hover { translate: none; }

	/* hub sections */
	.hub-sec, .hub-sec--light { grid-template-columns: minmax(0, 1fr); gap: 4rem; padding: 8rem 2rem; }
	.hub-sec__media, .hub-sec--m .hub-sec__media { order: -1; justify-self: stretch; width: 100%; height: auto; aspect-ratio: 600 / 440; }
	.hub-sec--m .hub-sec__media { aspect-ratio: 640 / 400; }
	.hub-sec__img { clip-path: polygon(3.2rem 0, 100% 0, 100% calc(100% - 3.2rem), calc(100% - 3.2rem) 100%, 0 100%, 0 3.2rem); }
	.hub-sec__copy, .hub-sec__title, .hub-sec__intro, .prod-list { width: auto; }
	.hub-sec__title { font-size: clamp(34px, 8.6vw, 52px); line-height: 1.1; }
	.hub-sec__eyebrow { white-space: normal; }
	.prod-row a { padding: 1.8rem 1.6rem; }
	.hub-sec--light .prod-row a { padding: 1.8rem 0; }
	.prod-row__title { font-size: 17px; line-height: 1.35; }
	.prod-row__text { width: auto; }

	/* compare */
	.compare { padding: 8rem 0; }
	.compare__grid { grid-template-columns: minmax(0, 1fr); gap: 5.6rem; }
	.compare__title, .compare__text { width: auto; }
	.compare__title { font-size: clamp(34px, 8.6vw, 52px); line-height: 1.1; }
	.compare__row { grid-template-columns: 11rem 1fr 1fr; height: auto; min-height: 7.2rem; padding: 1.8rem 0; }
	.compare__row--head { padding-top: 2.4rem; }
	.compare__row > span:not(:first-child) { padding-left: 1.2rem; padding-right: .8rem; }
	.compare__label, .compare__good-h, .compare__bad-h { font-size: 14px; line-height: 1.3; white-space: normal; }
	.compare__cell { align-items: flex-start; font-size: 13px; line-height: 1.4; white-space: normal; }
	.compare__tick, .compare__cross { margin-top: .5rem; }
	.compare__col { width: calc((100% - 11rem) / 2); }
	.compare__col--good { left: 11rem; }
	.compare__col--bad { left: calc(11rem + (100% - 11rem) / 2); }
}

/* Finder tile mouse glow (added by solutions.js) */
.finder-tile__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s;
	background: radial-gradient(28rem 28rem at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .16), transparent 70%); }
.finder-tile:hover .finder-tile__glow { opacity: 1; }