.evalink-guide {
  --guide-night: #07152f;
  --guide-panel: #102a58;
  --guide-blue: #176bf2;
  --guide-gold: #f4b400;
  --guide-text: #eaf2ff;
  --guide-muted: #b9c8e2;
  color: var(--guide-text);
  background-color: var(--guide-night);
  background-image:
    linear-gradient(rgba(92, 133, 196, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 133, 196, .09) 1px, transparent 1px),
    radial-gradient(circle at 82% 6%, rgba(23, 107, 242, .2), transparent 28rem);
  background-size: 4rem 4rem, 4rem 4rem, auto;
  padding: clamp(4.5rem, 8vw, 9rem) 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.evalink-guide::before,
.evalink-guide::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  filter: blur(3rem);
  pointer-events: none;
}
.evalink-guide::before { top: 2rem; right: -15rem; background: rgba(23, 107, 242, .17); }
.evalink-guide::after { top: 72rem; left: -22rem; background: rgba(244, 180, 0, .07); }

.evalink-guide * { box-sizing: border-box; }
.evalink-guide__inner { max-width: 118rem; margin: 0 auto; padding: 0 2rem; }
.evalink-guide__breadcrumb { display: flex; flex-wrap: wrap; gap: .8rem; color: var(--guide-muted); font-size: 1.4rem; margin-bottom: 4rem; }
.evalink-guide__breadcrumb a { color: inherit; text-decoration: none; }
.evalink-guide__breadcrumb a:hover { color: #fff; }
.evalink-guide__eyebrow { color: #9fc2ff; font-size: 1.3rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.evalink-guide__eyebrow span { color: var(--guide-gold); }
.evalink-guide__hero { max-width: 94rem; margin-bottom: clamp(4rem, 7vw, 7rem); padding: clamp(2.8rem, 5vw, 5rem); border: 1px solid rgba(124, 169, 235, .22); border-radius: 3rem; background: linear-gradient(135deg, rgba(16, 42, 88, .82), rgba(7, 21, 47, .55)); box-shadow: 0 3rem 7rem rgba(0, 0, 0, .18); position: relative; overflow: hidden; }
.evalink-guide__hero::after { content: ''; position: absolute; inset: auto -8rem -11rem auto; width: 28rem; height: 28rem; border: 1px solid rgba(159, 194, 255, .18); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(23, 107, 242, .04), 0 0 0 7rem rgba(23, 107, 242, .025); pointer-events: none; }
.evalink-guide__hero h1 { color: #fff; font-size: clamp(4rem, 7vw, 7.4rem); line-height: .98; letter-spacing: -.045em; margin: 1.6rem 0 2.4rem; }
.evalink-guide__hero h1 span, .evalink-guide__accent { color: var(--guide-gold); }
.evalink-guide__lead { color: var(--guide-muted); font-size: clamp(1.75rem, 2vw, 2.15rem); line-height: 1.7; max-width: 76rem; }
.evalink-google { display: inline-flex; letter-spacing: -.055em; white-space: nowrap; }
.evalink-google > span:nth-child(1), .evalink-google > span:nth-child(4) { color: #4285f4; }
.evalink-google > span:nth-child(2), .evalink-google > span:nth-child(6) { color: #ea4335; }
.evalink-google > span:nth-child(3) { color: #fbbc05; }
.evalink-google > span:nth-child(5) { color: #34a853; }
.evalink-guide__quickfacts { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }
.evalink-guide__quickfacts span { display: inline-flex; align-items: center; gap: .55rem; min-height: 3.8rem; padding: .7rem 1.2rem; border: 1px solid rgba(159, 194, 255, .24); border-radius: 999px; color: #dce9ff; background: rgba(6, 21, 49, .52); font-size: 1.35rem; font-weight: 750; }
.evalink-guide__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 3rem; }
.evalink-guide__button { display: inline-flex; align-items: center; justify-content: center; min-height: 5rem; padding: 1.2rem 2.2rem; border: 1px solid rgba(159, 194, 255, .32); border-radius: 999px; color: #fff; font-weight: 800; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.evalink-guide__button--primary { background: linear-gradient(135deg, #176bf2, #2f83ff); box-shadow: 0 1.2rem 2.8rem rgba(23, 107, 242, .26); }
.evalink-guide__button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.65); }
.evalink-guide__layout { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; gap: 4rem; align-items: start; }
.evalink-guide__content { min-width: 0; }
.evalink-guide__section { scroll-margin-top: 13rem; padding: clamp(3rem, 5vw, 5rem); border: 1px solid rgba(124, 169, 235, .24); border-radius: 2.6rem; background: linear-gradient(145deg, rgba(17, 43, 88, .92), rgba(7, 21, 47, .92)); box-shadow: 0 2rem 5rem rgba(0, 0, 0, .15); margin-bottom: 2rem; }
.evalink-guide__section h2 { display: flex; align-items: flex-start; gap: 1rem; color: #fff; font-size: clamp(2.6rem, 4vw, 4rem); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 1.8rem; }
.evalink-guide__section h2::before { content: '✦'; display: grid; place-items: center; flex: 0 0 3.7rem; width: 3.7rem; height: 3.7rem; margin-top: -.2rem; border-radius: 1.1rem; color: var(--guide-gold); background: rgba(23, 107, 242, .2); font-size: 1.65rem; box-shadow: inset 0 0 0 1px rgba(124, 169, 235, .18); }
.evalink-guide__section h3 { color: #fff; font-size: 2rem; margin: 2.4rem 0 .8rem; }
.evalink-guide__section p, .evalink-guide__section li { color: var(--guide-muted); font-size: 1.7rem; line-height: 1.75; }
.evalink-guide__section strong { color: #fff; }
.evalink-guide__section ul { padding-left: 2rem; }
.evalink-guide__steps, .evalink-guide__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.5rem; }
.evalink-guide__step, .evalink-guide__card { padding: 2.2rem; border: 1px solid rgba(124, 169, 235, .24); border-radius: 1.8rem; background: rgba(21, 55, 111, .56); }
.evalink-guide__step, .evalink-guide__card, .evalink-guide__section { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.evalink-guide__step:hover, .evalink-guide__card:hover { transform: translateY(-4px); border-color: rgba(244, 180, 0, .46); box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, .18); }
.evalink-guide__step span, .evalink-guide__card-icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 1.2rem; background: var(--guide-blue); color: #fff; font-weight: 900; margin-bottom: 1.5rem; }
.evalink-guide__step h3, .evalink-guide__card h3 { margin-top: 0; }
.evalink-guide__aside { position: sticky; top: 12rem; padding: 2.4rem; border: 1px solid rgba(124, 169, 235, .25); border-radius: 2rem; background: rgba(10, 29, 63, .92); }
.evalink-guide__aside strong { display: block; color: #fff; font-size: 1.6rem; margin-bottom: 1.2rem; }
.evalink-guide__aside a { display: block; color: var(--guide-muted); padding: .8rem 0; text-decoration: none; line-height: 1.4; }
.evalink-guide__aside a:hover { color: var(--guide-gold); }
.evalink-guide__notice { border-color: rgba(244, 180, 0, .48); background: linear-gradient(145deg, rgba(65, 48, 6, .42), rgba(7, 21, 47, .95)); }
.evalink-guide__comparison { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; margin-top: 2.5rem; border: 1px solid rgba(124, 169, 235, .25); border-radius: 1.8rem; }
.evalink-guide__comparison th, .evalink-guide__comparison td { padding: 1.6rem; text-align: left; border-bottom: 1px solid rgba(124, 169, 235, .18); color: var(--guide-muted); font-size: 1.55rem; }
.evalink-guide__comparison th { color: #fff; background: rgba(23, 107, 242, .16); }
.evalink-guide__comparison tr:last-child td { border-bottom: 0; }
.evalink-guide__closing { text-align: center; padding: clamp(4rem, 7vw, 7rem) 2rem 1rem; }
.evalink-guide__closing h2 { color: #fff; font-size: clamp(3rem, 5vw, 5rem); margin: 0 0 1.4rem; }
.evalink-guide__closing p { color: var(--guide-muted); font-size: 1.8rem; max-width: 68rem; margin: 0 auto 2.5rem; }

@media (max-width: 900px) {
  .evalink-guide__layout { grid-template-columns: 1fr; }
  .evalink-guide__aside { position: static; order: -1; }
  .evalink-guide__steps, .evalink-guide__cards { grid-template-columns: 1fr; }
}

@media (max-width: 749px) {
  .evalink-guide { padding-top: 3.2rem; background-size: 3.2rem 3.2rem, 3.2rem 3.2rem, auto; }
  .evalink-guide__inner { padding: 0 1.4rem; }
  .evalink-guide__breadcrumb { margin-bottom: 2.8rem; }
  .evalink-guide__hero h1 { font-size: clamp(3.8rem, 13vw, 5.4rem); }
  .evalink-guide__hero { padding: 2.7rem 2rem; border-radius: 2.2rem; }
  .evalink-guide__section { padding: 2.5rem 2rem; border-radius: 2rem; }
  .evalink-guide__section p, .evalink-guide__section li { font-size: 1.65rem; }
  .evalink-guide__actions, .evalink-guide__button { width: 100%; }
  .evalink-guide__comparison { display: block; overflow-x: auto; }
}