body[data-helper-page] {
  background-color: #fff;
  color: #17122a;
  font-family: Inter, Helvetica, Arial, sans-serif;
}
body[data-helper-page] > main {
  --rank-ink: #17122a;
  --rank-muted: #605d6d;
  --rank-purple: #5630a0;
  --rank-pale: #f4f0fa;
  --rank-line: #e4dfeb;
  display: block;
  width: 100%;
  margin: 0;
  color: var(--rank-ink);
  background: #fff;
  font-family: Inter, Helvetica, Arial, sans-serif;
}
body[data-helper-page] > main * { box-sizing: border-box; }
body[data-helper-page] > main h1,
body[data-helper-page] > main h2,
body[data-helper-page] > main h3,
body[data-helper-page] > main p,
body[data-helper-page] > main figure { margin: 0; }
body[data-helper-page] > main section { position: relative; }
body[data-helper-page] > main img { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-helper-page] > main a { color: inherit; }
body[data-helper-page] > main a:focus-visible { outline: 3px solid #a86eff; outline-offset: 4px; }
body[data-helper-page] > main .rankings-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, .84fr);
  align-items: center;
  gap: clamp(36px, 7vw, 112px);
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 132px) clamp(24px, 8.3vw, 128px) clamp(78px, 9vw, 132px);
}
body[data-helper-page] > main .rankings-intro-copy { max-width: 640px; }
body[data-helper-page] > main .eyebrow {
  margin-bottom: 18px;
  color: var(--rank-purple);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
body[data-helper-page] > main h1 {
  max-width: 760px;
  font-family: Poppins, Inter, Helvetica, Arial, sans-serif;
  font-size: clamp(44px, 5.2vw, 76px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.02;
}
body[data-helper-page] > main .intro-lede {
  max-width: 590px;
  margin-top: 24px;
  color: var(--rank-muted);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.65;
}
body[data-helper-page] > main .rankings-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
  padding: 0 22px;
  border: 1px solid var(--rank-purple);
  border-radius: 9px;
  background-color: var(--rank-purple);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
body[data-helper-page] > main .rankings-button:hover { background-color: #3c207b; transform: translateY(-2px); }
body[data-helper-page] > main .rankings-button span { font-size: 20px; }
body[data-helper-page] > main .intro-image {
  position: relative;
  height: clamp(310px, 34vw, 492px);
  overflow: hidden;
  border-radius: 20px;
  background: #dfd4ed;
  box-shadow: 0 24px 60px rgba(37, 20, 72, .17);
}
body[data-helper-page] > main .intro-image img { object-position: center; }
body[data-helper-page] > main .intro-plate,
body[data-helper-page] > main .comparison-plate,
body[data-helper-page] > main .feature-artwork {
  display: flex;
  height: 100%;
  min-height: 180px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(24px, 4vw, 54px);
  background: radial-gradient(ellipse at 80% 18%, rgba(231, 195, 255, .78), transparent 31%), linear-gradient(135deg, #9b75ca, #392072 72%);
  color: #fff;
}
body[data-helper-page] > main .intro-plate span,
body[data-helper-page] > main .intro-plate i,
body[data-helper-page] > main .comparison-plate span,
body[data-helper-page] > main .comparison-plate i,
body[data-helper-page] > main .feature-artwork span { font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .17em; }
body[data-helper-page] > main .intro-plate strong,
body[data-helper-page] > main .comparison-plate strong,
body[data-helper-page] > main .feature-artwork strong { font-family: Poppins, Inter, Helvetica, Arial, sans-serif; font-size: clamp(30px, 3.3vw, 47px); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; }
body[data-helper-page] > main .feature-artwork { height: 220px; min-height: 0; padding: 25px; }
body[data-helper-page] > main .feature-artwork strong { font-size: clamp(24px, 2.5vw, 34px); }
body[data-helper-page] > main .feature-artwork-alt { background: radial-gradient(ellipse at 80% 24%, rgba(234, 211, 156, .88), transparent 31%), linear-gradient(135deg, #af8d4b, #564016 74%); }
body[data-helper-page] > main .comparison-plate { background: radial-gradient(ellipse at 83% 17%, rgba(173, 127, 224, .65), transparent 33%), linear-gradient(135deg, #6245a0, #26144e 72%); }
body[data-helper-page] > main figcaption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  width: fit-content;
  max-width: calc(100% - 32px);
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 7px;
  background: rgba(255,255,255,.94);
  color: var(--rank-ink);
  font-size: 12px;
  font-weight: 600;
}
body[data-helper-page] > main .reading-guide,
body[data-helper-page] > main .dimensions-section,
body[data-helper-page] > main .related-section {
  padding: clamp(72px, 8.5vw, 124px) clamp(24px, 9vw, 138px);
}
body[data-helper-page] > main .reading-guide,
body[data-helper-page] > main .dimensions-section { background: #f8f6fb; }
body[data-helper-page] > main .section-heading { max-width: 760px; margin: 0 auto 46px; text-align: center; }
body[data-helper-page] > main .section-heading h2,
body[data-helper-page] > main .comparison-copy h2,
body[data-helper-page] > main .canada-card h2,
body[data-helper-page] > main .closing-card h2 {
  font-family: Poppins, Inter, Helvetica, Arial, sans-serif;
  font-size: clamp(31px, 3.3vw, 46px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.1;
}
body[data-helper-page] > main .section-heading > p:last-child,
body[data-helper-page] > main .section-heading-split > p,
body[data-helper-page] > main .comparison-copy > p,
body[data-helper-page] > main .canada-card > div > p:last-child,
body[data-helper-page] > main .closing-card > div > p:last-child {
  margin-top: 18px;
  color: var(--rank-muted);
  font-size: 16px;
  line-height: 1.7;
}
body[data-helper-page] > main .reading-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1160px; margin: 0 auto; }
body[data-helper-page] > main .guide-card {
  min-height: 232px;
  padding: 28px;
  border: 1px solid var(--rank-line);
  border-radius: 14px;
  background-color: #fff;
}
body[data-helper-page] > main .step-number { display: inline-block; margin-bottom: 32px; color: #9c7cca; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
body[data-helper-page] > main .guide-card h3,
body[data-helper-page] > main .feature-card h3,
body[data-helper-page] > main .dimension-row h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
body[data-helper-page] > main .guide-card p,
body[data-helper-page] > main .feature-card p,
body[data-helper-page] > main .dimension-row p { margin-top: 10px; color: var(--rank-muted); font-size: 14px; line-height: 1.6; }
body[data-helper-page] > main .featured-section { padding: clamp(76px, 8.8vw, 130px) clamp(24px, 9vw, 138px); }
body[data-helper-page] > main .section-heading-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); align-items: end; gap: 48px; max-width: 1160px; margin-bottom: 44px; text-align: left; }
body[data-helper-page] > main .section-heading-split > p { margin: 0; }
body[data-helper-page] > main .feature-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; max-width: 1160px; margin: 0 auto; }
body[data-helper-page] > main .feature-card { overflow: hidden; border: 1px solid var(--rank-line); border-radius: 14px; background: #fff; }
body[data-helper-page] > main .feature-card-large .feature-artwork { height: 248px; }
body[data-helper-page] > main .feature-card > div { padding: 22px; }
body[data-helper-page] > main .card-kicker { display: block; margin-bottom: 10px; color: var(--rank-purple); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
body[data-helper-page] > main .feature-card-note { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 25px; background: var(--rank-pale); }
body[data-helper-page] > main .note-mark { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 26px; border-radius: 50%; background-color: #e3d8f2; color: var(--rank-purple); font-size: 20px; }
body[data-helper-page] > main .feature-card-note a { display: inline-block; margin-top: 20px; color: var(--rank-purple); font-size: 13px; font-weight: 700; text-underline-offset: 4px; }
body[data-helper-page] > main .dimension-list { max-width: 970px; margin: 0 auto; border-top: 1px solid var(--rank-line); }
body[data-helper-page] > main .dimension-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 23px 10px; border-bottom: 1px solid var(--rank-line); }
body[data-helper-page] > main .dimension-index { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background-color: #e9e0f5; color: var(--rank-purple); font-size: 13px; font-weight: 800; }
body[data-helper-page] > main .dimension-tag { padding: 8px 12px; border: 1px solid #d8cbe8; border-radius: 999px; color: #62458a; font-size: 11px; font-weight: 700; }
body[data-helper-page] > main .comparison-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, .8fr); align-items: center; gap: clamp(40px, 9vw, 140px); padding: clamp(76px, 9vw, 130px) clamp(24px, 12vw, 184px); background: #24154a; color: #fff; }
body[data-helper-page] > main .comparison-copy { max-width: 540px; }
body[data-helper-page] > main .comparison-copy .eyebrow,
body[data-helper-page] > main .closing-card .eyebrow { color: #cbb4f2; }
body[data-helper-page] > main .comparison-copy > p { color: #e2dcec; }
body[data-helper-page] > main .comparison-image { height: clamp(280px, 30vw, 420px); overflow: hidden; border-radius: 18px; background: #5d4a78; }
body[data-helper-page] > main .checklist { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
body[data-helper-page] > main .checklist li { position: relative; padding-left: 27px; color: #fff; font-size: 14px; line-height: 1.5; }
body[data-helper-page] > main .checklist li::before { position: absolute; left: 0; color: #d8c5f6; content: "✓"; font-weight: 800; }
body[data-helper-page] > main .canada-note { padding: 66px 24px; background: #f8f6fb; }
body[data-helper-page] > main .canada-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 24px; max-width: 970px; margin: 0 auto; padding: 38px; border: 1px solid #e8e1f0; border-radius: 16px; background: #fff; }
body[data-helper-page] > main .canada-icon { display: grid; width: 66px; height: 66px; place-items: center; border-radius: 18px; background-color: #ede6f7; color: var(--rank-purple); font-size: 16px; font-weight: 800; }
body[data-helper-page] > main .canada-card h2 { font-size: clamp(26px, 3vw, 38px); }
body[data-helper-page] > main .related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 970px; margin: 0 auto; }
body[data-helper-page] > main .related-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; align-items: center; gap: 16px; min-height: 104px; padding: 20px; border: 1px solid var(--rank-line); border-radius: 12px; background: #fff; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
body[data-helper-page] > main .related-card:hover { transform: translateY(-2px); border-color: #a48ac4; }
body[data-helper-page] > main .related-count { color: #9c7cca; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
body[data-helper-page] > main .related-card strong,
body[data-helper-page] > main .related-card small { display: block; }
body[data-helper-page] > main .related-card strong { font-size: 16px; }
body[data-helper-page] > main .related-card small { margin-top: 5px; color: var(--rank-muted); font-size: 12px; line-height: 1.5; }
body[data-helper-page] > main .related-arrow { color: var(--rank-purple); font-size: 19px; }
body[data-helper-page] > main .closing-section { padding: 28px 24px 100px; }
body[data-helper-page] > main .closing-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; max-width: 1160px; margin: 0 auto; padding: clamp(30px, 5vw, 64px); border-radius: 18px; background: linear-gradient(125deg, #382071, #6541a0); color: #fff; }
body[data-helper-page] > main .closing-card > div { max-width: 650px; }
body[data-helper-page] > main .closing-card > div > p:last-child { color: #eee8f7; }
body[data-helper-page] > main .rankings-button-light { flex: 0 0 auto; margin: 0; border-color: #fff; background-color: #fff; color: #32196a; }
body[data-helper-page] > main .rankings-button-light:hover { background-color: #ede6f7; }
body[data-helper-page] > main [data-product-contract="TZ_2"] { transform: translateY(0); opacity: 1; }
body[data-helper-page] > main .reveal-pending { transform: translateY(18px); opacity: .01; transition: opacity .55s ease, transform .55s ease; }
body[data-helper-page] > main .reveal-pending.is-revealed { transform: translateY(0); opacity: 1; }
body[data-helper-page] > main .consent-pixel-fallback { width: 1px; height: 1px; }
@media (max-width: 900px) {
  body[data-helper-page] > main .rankings-intro { grid-template-columns: minmax(0, 1fr) minmax(250px, .7fr); gap: 34px; padding-inline: 36px; }
  body[data-helper-page] > main .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-helper-page] > main .feature-card-note { min-height: 250px; }
  body[data-helper-page] > main .comparison-panel { grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr); gap: 36px; padding-inline: 48px; }
  body[data-helper-page] > main .reading-guide,
  body[data-helper-page] > main .dimensions-section,
  body[data-helper-page] > main .related-section,
  body[data-helper-page] > main .featured-section { padding-inline: 42px; }
}
@media (max-width: 650px) {
  body[data-helper-page] > main .rankings-intro { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 50px 22px 62px; }
  body[data-helper-page] > main .intro-image { height: 270px; border-radius: 14px; }
  body[data-helper-page] > main h1 { font-size: clamp(40px, 11vw, 58px); }
  body[data-helper-page] > main .reading-guide,
  body[data-helper-page] > main .dimensions-section,
  body[data-helper-page] > main .related-section,
  body[data-helper-page] > main .featured-section { padding: 64px 22px; }
  body[data-helper-page] > main .section-heading { margin-bottom: 34px; text-align: left; }
  body[data-helper-page] > main .reading-steps,
  body[data-helper-page] > main .feature-grid,
  body[data-helper-page] > main .related-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-helper-page] > main .guide-card { min-height: 0; }
  body[data-helper-page] > main .step-number { margin-bottom: 20px; }
  body[data-helper-page] > main .section-heading-split { display: block; }
  body[data-helper-page] > main .section-heading-split > p { margin-top: 18px; }
  body[data-helper-page] > main .dimension-row { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  body[data-helper-page] > main .dimension-index { width: 36px; height: 36px; }
  body[data-helper-page] > main .dimension-tag { grid-column: 2; justify-self: start; }
  body[data-helper-page] > main .comparison-panel { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 64px 22px; }
  body[data-helper-page] > main .comparison-image { height: 270px; }
  body[data-helper-page] > main .canada-note { padding: 42px 18px; }
  body[data-helper-page] > main .canada-card { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px; }
  body[data-helper-page] > main .closing-section { padding: 18px 16px 64px; }
  body[data-helper-page] > main .closing-card { align-items: flex-start; flex-direction: column; padding: 30px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-helper-page] > main *,
  body[data-helper-page] > main *::before,
  body[data-helper-page] > main *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  body[data-helper-page] > main .reveal-pending { transform: none; opacity: 1; }
}