/* Lanhu 1920px / 430px artboards. The .pl-page rules cover the content preceding the collection shortcode.
 * Coordinates, type scale and colors come from the exported Photoshop layer data.
 * Keep the existing 1024px mobile breakpoint; scale lengths with the reference width.
 */
.pl-page {
  --pl-u: min(1px, calc(100vw / 1920));
  --pl-ink: #2c252b;
  --pl-paper: #f6f6f6;
  font-family: FamiljenGrotesk, 'Familjen Grotesk', sans-serif;
  font-size: calc(18 * var(--pl-u));
  font-weight: 400;
  line-height: 1.2;
  color: var(--pl-ink);
  background: #fff;
  padding-top: var(--pl-u);
}
.pl-page *, .pl-page *::before, .pl-page *::after { box-sizing: border-box; }
.pl-page h1, .pl-page h2, .pl-page h3, .pl-page p, .pl-page ul, .pl-page ol { margin: 0; padding: 0; color: inherit; line-height: 1.2; letter-spacing: 0; text-wrap: wrap; }
.pl-page h1, .pl-page h2, .pl-page h3 { font-weight: 500; }
.pl-page h2 { font-size: calc(42 * var(--pl-u)); }
.pl-page p { font-size: inherit; font-weight: 400; }
.pl-page picture, .pl-page img { display: block; }
.pl-page img { max-width: 100%; height: auto; }
.pl-page ul, .pl-page ol { list-style: none; }
.pl-page a { color: inherit; text-decoration: underline; text-underline-position: under; }
.pl-page a:hover { color: #cd5837; }
.pl-page a:focus-visible, .pl-page button:focus-visible, .pl-page video:focus-visible { outline: 2px solid #cd5837; outline-offset: 3px; }
.pl-page .pl-container { width: calc(1366 * var(--pl-u)); margin-inline: auto; }
.pl-page .pl-mobile-dash { display: none; }
.pl-page .pl-hero { position: relative; height: calc(600 * var(--pl-u)); overflow: hidden; }
.pl-page .pl-hero-image, .pl-page .pl-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.pl-page .pl-hero-content { position: absolute; inset: calc(194 * var(--pl-u)) 0 auto; color: #fff; }
.pl-page .pl-hero h1 { width: calc(1051 * var(--pl-u)); font-size: calc(60 * var(--pl-u)); }
.pl-page .pl-hero p { margin-top: calc(3 * var(--pl-u)); font-size: calc(24 * var(--pl-u)); font-weight: 500; }
.pl-page .pl-intro { padding: calc(60 * var(--pl-u)) 0 calc(65 * var(--pl-u)); text-align: center; }
.pl-page .pl-intro p { width: calc(782 * var(--pl-u)); margin: calc(14 * var(--pl-u)) auto 0; position: relative; left: calc(-16 * var(--pl-u)); }
.pl-page .pl-how { background: var(--pl-paper); }
.pl-page .pl-how-inner { width: calc(1542 * var(--pl-u)); margin-inline: auto; display: grid; grid-template-columns: calc(833 * var(--pl-u)) calc(550 * var(--pl-u)); gap: calc(70 * var(--pl-u)); }
.pl-page .pl-diagram { height: calc(483 * var(--pl-u)); position: relative; }
.pl-page .pl-diagram-image { width: calc(573 * var(--pl-u)); height: 100%; overflow: hidden; position: relative; }
.pl-page .pl-diagram-image img { width: calc(756 * var(--pl-u)); max-width: none; height: calc(485 * var(--pl-u)); position: absolute; left: calc(-118 * var(--pl-u)); top: calc(-1 * var(--pl-u)); }
.pl-page .pl-annotations li { position: absolute; left: calc(571 * var(--pl-u)); width: calc(259 * var(--pl-u)); font-size: calc(16 * var(--pl-u)); }
.pl-page .pl-annotation-distance { top: calc(128 * var(--pl-u)); }
.pl-page .pl-annotation-intermediate { top: calc(183 * var(--pl-u)); }
.pl-page .pl-annotation-peripheral { top: calc(257 * var(--pl-u)); }
.pl-page .pl-annotation-reading { top: calc(331 * var(--pl-u)); }
.pl-page .pl-number { display: none; }
.pl-page .pl-how-copy { padding-top: calc(118 * var(--pl-u)); }
.pl-page .pl-how-copy h2 { white-space: nowrap; }
.pl-page .pl-how-copy > p { margin-top: calc(10 * var(--pl-u)); }
.pl-page .pl-benefits { margin-top: calc(14 * var(--pl-u)); }
.pl-page .pl-benefits li { display: flex; align-items: center; gap: calc(12 * var(--pl-u)); min-height: calc(28 * var(--pl-u)); font-size: calc(16 * var(--pl-u)); font-weight: 500; }
.pl-page .pl-benefits img { width: calc(17 * var(--pl-u)); height: calc(17 * var(--pl-u)); flex-shrink: 0; }
.pl-page .pl-products { padding: calc(60 * var(--pl-u)) 0 calc(70 * var(--pl-u)); }
.pl-page .pl-products-heading { text-align: center; margin-bottom: calc(35 * var(--pl-u)); }
.pl-page .pl-products-heading p { margin-top: calc(8 * var(--pl-u)); }
.pl-page .pl-lens-cards { display: flex; justify-content: center; align-items: center; gap: calc(86 * var(--pl-u)); position: relative; left: var(--pl-u); }
.pl-page .pl-lens-card { position: relative; width: calc(480 * var(--pl-u)); height: calc(600 * var(--pl-u)); overflow: hidden; }
.pl-page .pl-standard { width: calc(478 * var(--pl-u)); height: calc(598 * var(--pl-u)); }
.pl-page .pl-lens-card picture, .pl-page .pl-lens-card img { width: 100%; height: 100%; object-fit: cover; }
.pl-page .pl-lens-copy { position: absolute; inset: calc(452 * var(--pl-u)) calc(30 * var(--pl-u)) auto; color: #fff; }
.pl-page .pl-lens-copy h3 { font-size: calc(30 * var(--pl-u)); white-space: nowrap; }
.pl-page .pl-lens-copy p { margin-top: calc(8 * var(--pl-u)); font-size: calc(16 * var(--pl-u)); }
.pl-page .pl-premium .pl-lens-copy { top: calc(453 * var(--pl-u)); }
.pl-page .pl-premium .pl-lens-copy p { margin-top: calc(5 * var(--pl-u)); }
.pl-page .pl-lifestyle { padding: calc(70 * var(--pl-u)) 0; background: var(--pl-paper); }
.pl-page .pl-lifestyle-inner { display: grid; grid-template-columns: calc(740 * var(--pl-u)) 1fr; column-gap: calc(114 * var(--pl-u)); }
.pl-page .pl-lifestyle-copy { grid-column: 2; grid-row: 1; padding-top: calc(84 * var(--pl-u)); }
.pl-page .pl-lifestyle-copy h2 { white-space: nowrap; }
.pl-page .pl-lifestyle-copy > p { margin-top: calc(14 * var(--pl-u)); }
.pl-page .pl-video { display: block; grid-column: 1; grid-row: 1; width: calc(740 * var(--pl-u)); height: calc(400 * var(--pl-u)); object-fit: cover; }
.pl-page .pl-activities { display: flex; justify-content: space-between; align-items: flex-start; width: calc(430 * var(--pl-u)); margin-top: calc(18 * var(--pl-u)); }
.pl-page .pl-activities li { display: flex; flex-direction: column; align-items: center; font-size: calc(16 * var(--pl-u)); font-weight: 500; }
.pl-page .pl-activities img { width: calc(36 * var(--pl-u)); height: calc(40 * var(--pl-u)); object-fit: contain; margin-top: calc(6 * var(--pl-u)); }
.pl-page .pl-activities li:nth-child(2) img { transform: translateY(calc(-2 * var(--pl-u))); }
.pl-page .pl-activities li:nth-child(3) img { transform: translateY(calc(-3 * var(--pl-u))); }
.pl-page .pl-activities li:nth-child(4) img { transform: translateY(calc(-6 * var(--pl-u))); }
.pl-page .pl-activities span { margin-top: calc(5 * var(--pl-u)); }
.pl-page .pl-guide { padding: calc(110 * var(--pl-u)) 0 calc(48 * var(--pl-u)); }
.pl-page .pl-guide h2, .pl-page .pl-guide-intro { text-align: center; }
.pl-page .pl-guide-intro { margin-top: calc(10 * var(--pl-u)); }
.pl-page .pl-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(28 * var(--pl-u)) calc(30 * var(--pl-u)); margin-top: calc(39 * var(--pl-u)); }
.pl-page .pl-guide-card { display: grid; grid-template-columns: calc(201 * var(--pl-u)) 1fr; align-items: center; column-gap: calc(30 * var(--pl-u)); min-height: calc(121 * var(--pl-u)); }
.pl-page .pl-guide-image, .pl-page .pl-guide-image img { width: calc(201 * var(--pl-u)); height: calc(121 * var(--pl-u)); object-fit: contain; }
.pl-page .pl-guide-copy h3 { font-size: calc(18 * var(--pl-u)); white-space: nowrap; }
.pl-page .pl-guide-copy p { margin-top: calc(7 * var(--pl-u)); font-size: calc(16 * var(--pl-u)); }
.pl-page .pl-note { padding-bottom: calc(70 * var(--pl-u)); }
.pl-page .pl-note-box { padding: calc(46 * var(--pl-u)) 0; background: var(--pl-paper); }
.pl-page .pl-note-content { position: relative; width: calc(854 * var(--pl-u)); margin: 0 auto; text-align: center; }
.pl-page .pl-note p { display: block; overflow: visible; font-size: calc(16 * var(--pl-u)); }
.pl-page .pl-read-more { display: none; }

/* Match the Blue Light page collection layout; product cards keep css/style.css styles. */
.pl-collection {
  color: #2c252b;
  font-size: 16px;
  line-height: normal;
}
.pl-collection h1, .pl-collection h2, .pl-collection h3, .pl-collection p { margin: 0; }
.pl-collection img { display: block; height: auto; max-width: 100%; }
.pl-collection .weidu-topic-collection {
  padding-top: 0;
  padding-bottom: clamp(44px, 3.65vw, 70px);
}
@media (max-width: 767px) {
  .pl-collection { font-size: 14px; }
  .pl-collection .weidu-topic-collection { padding-bottom: 30px; }
}

@media (max-width: 1024px) {
  .pl-page { --pl-u: calc(100vw / 430); font-size: calc(16 * var(--pl-u)); padding-top: 0; }
  .pl-page h2 { font-size: calc(26 * var(--pl-u)); }
  .pl-page .pl-container { width: calc(390 * var(--pl-u)); }
  .pl-page .pl-desktop-dash, .pl-page .pl-desktop-space, .pl-page .pl-desktop-break { display: none; }
  .pl-page .pl-mobile-dash { display: inline; }
  .pl-page .pl-hero { height: calc(717 * var(--pl-u)); }
  .pl-page .pl-hero-image { height: calc(724 * var(--pl-u)); position: absolute; top: calc(-7 * var(--pl-u)); }
  .pl-page .pl-hero-content { top: calc(42 * var(--pl-u)); width: calc(395 * var(--pl-u)); color: var(--pl-ink); text-align: center; }
  .pl-page .pl-hero h1 { width: 100%; font-size: calc(34 * var(--pl-u)); }
  .pl-page .pl-hero p { width: calc(389 * var(--pl-u)); font-size: calc(16.052 * var(--pl-u)); font-weight: 400; margin: calc(6 * var(--pl-u)) auto 0; }
  .pl-page .pl-intro { padding: calc(32 * var(--pl-u)) calc(20 * var(--pl-u)) calc(14 * var(--pl-u)); }
  .pl-page .pl-intro h2 { font-size: calc(28 * var(--pl-u)); color: #000; }
  .pl-page .pl-intro p { width: 100%; left: 0; margin-top: calc(12 * var(--pl-u)); }
  .pl-page .pl-how { background: #fff; }
  .pl-page .pl-how-inner { display: block; width: 100%; }
  .pl-page .pl-diagram { height: auto; }
  .pl-page .pl-diagram-image { width: 100%; height: calc(434 * var(--pl-u)); }
  .pl-page .pl-diagram-image img { position: static; width: 100%; height: 100%; }
  /* Preserve the desktop illustration's aspect ratio until its mobile export is supplied. */
  .pl-page .pl-diagram-image[data-pl-mobile-shared] img { object-fit: contain; }
  .pl-page .pl-annotations { width: calc(390 * var(--pl-u)); margin: 20px auto; position: relative; }
  .pl-page .pl-annotations li { position: static; display: flex; align-items: flex-start; gap: calc(15 * var(--pl-u)); width: 100%; min-height: calc(50 * var(--pl-u)); }
  .pl-page .pl-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 calc(22 * var(--pl-u)); height: calc(22 * var(--pl-u)); border-radius: 50%; color: #fff; background: var(--pl-ink); font-size: calc(14 * var(--pl-u)); margin-top: calc(3 * var(--pl-u)); }
  .pl-page .pl-how-copy { width: calc(390 * var(--pl-u)); margin: calc(18 * var(--pl-u)) auto 0; padding-top: 0; }
  .pl-page .pl-how-copy h2 { color: #000; }
  .pl-page .pl-how-copy > p { margin-top: calc(8 * var(--pl-u)); }
  .pl-page .pl-benefits { margin-top: calc(11 * var(--pl-u)); }
  .pl-page .pl-benefits img { width: calc(18 * var(--pl-u)); height: calc(18 * var(--pl-u)); }
  .pl-page .pl-products { padding: calc(42 * var(--pl-u)) calc(20 * var(--pl-u)) calc(55 * var(--pl-u)); }
  .pl-page .pl-products-heading { text-align: left; margin-bottom: calc(16 * var(--pl-u)); color: #000; }
  .pl-page .pl-products-heading p { margin-top: calc(3 * var(--pl-u)); }
  .pl-page .pl-lens-cards { flex-direction: column; gap: calc(20 * var(--pl-u)); left: 0; }
  .pl-page .pl-lens-card, .pl-page .pl-standard { width: 100%; height: calc(450 * var(--pl-u)); }
  .pl-page .pl-premium { height: calc(451 * var(--pl-u)); }
  .pl-page .pl-lens-copy { inset: calc(325 * var(--pl-u)) calc(16 * var(--pl-u)) auto; }
  .pl-page .pl-premium .pl-lens-copy { top: calc(305 * var(--pl-u)); }
  .pl-page .pl-lens-copy h3 { font-size: calc(22 * var(--pl-u)); }
  .pl-page .pl-lens-copy p, .pl-page .pl-premium .pl-lens-copy p { margin-top: calc(5 * var(--pl-u)); }
  .pl-page .pl-lifestyle { padding: calc(34 * var(--pl-u)) 0 calc(40 * var(--pl-u)); }
  .pl-page .pl-lifestyle-inner { display: flex; flex-direction: column; gap: calc(22 * var(--pl-u)); }
  .pl-page .pl-lifestyle-copy { padding: 0; width: 100%; }
  .pl-page .pl-lifestyle-copy > p { margin-top: calc(6 * var(--pl-u)); }
  .pl-page .pl-activities { width: 100%; margin-top: calc(7 * var(--pl-u)); }
  .pl-page .pl-video { width: 100%; height: calc(240 * var(--pl-u)); }
  .pl-page .pl-guide { padding: calc(53 * var(--pl-u)) 0 calc(52 * var(--pl-u)); }
  .pl-page .pl-guide h2, .pl-page .pl-guide-intro { text-align: left; }
  .pl-page .pl-guide-intro { margin-top: calc(6 * var(--pl-u)); }
  .pl-page .pl-guide-grid { grid-template-columns: 1fr; gap: 0; margin-top: calc(25 * var(--pl-u)); }
  .pl-page .pl-guide-card { display: flex; flex-direction: column; gap: calc(20 * var(--pl-u)); padding: calc(24 * var(--pl-u)) calc(15 * var(--pl-u)) calc(17 * var(--pl-u)); border-bottom: 1px solid #e0e0e0; }
  .pl-page .pl-guide-card:first-child { padding-top: 0; }
  .pl-page .pl-guide-card:last-child { border: 0; padding-bottom: 0; }
  .pl-page .pl-guide-image, .pl-page .pl-guide-image img { width: calc(340 * var(--pl-u)); height: calc(150 * var(--pl-u)); }
  .pl-page .pl-guide-copy { width: 100%; }
  .pl-page .pl-note { padding-bottom: calc(45 * var(--pl-u)); }
  .pl-page .pl-note-box { padding: calc(12 * var(--pl-u)) calc(16 * var(--pl-u)); }
  .pl-page .pl-note-content { width: 100%; text-align: left; }
  .pl-page .pl-note .footer-text-collapsed { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pl-page .pl-read-more { display: block; position: absolute; right: 0; bottom: 0; background: var(--pl-paper); color: #989898; font-family: inherit; font-size: calc(12 * var(--pl-u)); line-height: 1.2; font-weight: 400; text-decoration: underline; padding: 0 0 0 calc(8 * var(--pl-u)); border: 0; cursor: pointer; }
  .pl-page .footer-text-expanded + .pl-read-more { position: static; margin-top: calc(4 * var(--pl-u)); }
}