/* Lens guide (lenses page): designs, technology, coatings, tints, fitting, progressives.
   The site's language: square edges, hairlines, Archivo titles, Jost text, teal = clinic, gold = showroom. */
section.lg { max-width: 72rem; margin: 0 auto; padding: clamp(56px, 8vw, 104px) 0 0; }
.lg__kicker { margin: 0 0 8px; font: 700 .74rem/1 var(--sc-font-display); font-variation-settings: "wdth" 125; letter-spacing: .16em; text-transform: uppercase; color: var(--noor-clinic, #0B7F7A); }
.lg__title { margin: 0; font: 800 clamp(1.9rem, 1.4rem + 2vw, 3rem)/1.02 var(--sc-font-display); letter-spacing: -.02em; }
.lg__lead { max-width: 42rem; margin: 12px 0 28px; font-size: 1.08rem; line-height: 1.65; color: var(--sc-ink-soft); }
.lg h3 { margin: 0; font: 700 1.08rem/1.25 var(--sc-font-display); }
.lg p { line-height: 1.6; }

/* designs: tabs + map */
.lgd { display: grid; grid-template-columns: 13rem 1fr; gap: 28px; align-items: start; }
.lgd__tabs { display: grid; gap: 4px; }
.lgd__group { margin: 12px 0 2px; font: 700 .68rem var(--sc-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.lgd__group:first-child { margin-top: 0; }
.lgd__tabs button { all: unset; box-sizing: border-box; display: flex; align-items: center; min-height: 44px; padding: 0 14px; cursor: pointer;
  font: 600 1rem var(--sc-font-display); background: #fff; box-shadow: inset 0 0 0 1px rgba(26,26,26,.14);
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.lgd__tabs button[aria-selected="true"] { background: var(--sc-ink, #1A1A1A); color: #fff; box-shadow: inset 4px 0 0 var(--noor-show, #C98A12); }
.lgd__tabs button:focus-visible { outline: 2px solid var(--noor-clinic, #0B7F7A); outline-offset: 2px; }
.lgd__tabs button:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .lgd__tabs button:not([aria-selected="true"]):hover { box-shadow: inset 0 0 0 1.5px var(--sc-ink, #1A1A1A); } }
.lgd__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; padding: 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(26,26,26,.12); }
.lgd.is-swap .lgd__panel > * { animation: lgd-in 360ms cubic-bezier(.23, 1, .32, 1); }
@keyframes lgd-in { from { opacity: 0; transform: translateY(6px); } }
.lgd__map { margin: 0; }
.lgd__map svg { width: 100%; height: auto; display: block; }
.lgd__key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font: 500 .82rem var(--sc-font-text); }
.lgd__key .k::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: var(--c); }
.k--far { --c: #0B7F7A; } .k--mid { --c: #E2AE4A; } .k--near { --c: #C98A12; }
.k--soft { --c: repeating-linear-gradient(45deg, #F1EFEA 0 3px, #C9C6BF 3px 5px); }
.k--soft::before { background: repeating-linear-gradient(45deg, #F1EFEA 0 3px, #C9C6BF 3px 5px) !important; box-shadow: inset 0 0 0 1px rgba(26,26,26,.15); }
.lgd__kind { margin: 0; font: 700 .7rem var(--sc-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--noor-clinic, #0B7F7A); }
.lgd__name { margin: 4px 0 8px !important; font: 800 2rem/1 var(--sc-font-display) !important; letter-spacing: -.02em; }
.lgd__name small { display: block; margin-top: 6px; font: 500 .9rem var(--sc-font-text); color: var(--sc-ink-soft); letter-spacing: 0; }
.lgd__lead { margin: 0 0 14px; font-size: 1.04rem; }
.lgd__facts { margin: 0 0 16px; display: grid; gap: 10px; }
.lgd__facts div { padding-left: 12px; border-left: 3px solid var(--noor-show, #C98A12); }
.lgd__facts dt { font: 700 .7rem var(--sc-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.lgd__facts dd { margin: 2px 0 0; }
.lgd__tech { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lgd__tech li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; font: 600 .86rem var(--sc-font-text); background: #fff; box-shadow: inset 0 0 0 1px rgba(26,26,26,.16); }
.lgd__tech li .nic { width: 22px; height: 22px; }
.lgd__tech li.none { padding: 0; box-shadow: none; font-weight: 400; color: var(--sc-ink-soft); }

/* technology, fitting: icon cards */
.lgt, .lgm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(26,26,26,.12); box-shadow: 0 0 0 1px rgba(26,26,26,.12); }
.lgm { grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: m; }
.lgt li, .lgm li { padding: 22px 20px; background: #fff; display: grid; align-content: start; gap: 10px; }
.lgt p, .lgm p { margin: 0; font-size: .96rem; color: var(--sc-ink-soft); }
.lgm li { counter-increment: m; position: relative; }
.lgm li::after { content: counter(m, decimal-leading-zero); position: absolute; top: 18px; right: 18px; font: 600 .74rem var(--sc-font-display); color: var(--sc-ink-soft); }

/* coatings table */
.lgc__wrap { overflow-x: auto; box-shadow: 0 0 0 1px rgba(26,26,26,.12); background: #fff; }
.lgc { width: 100%; min-width: 46rem; border-collapse: collapse; }
.lgc th, .lgc td { padding: 14px 12px; border-bottom: 1px solid rgba(26,26,26,.1); text-align: center; vertical-align: middle; }
.lgc thead th { font: 600 .82rem/1.25 var(--sc-font-text); background: #FAF8F4; }
.lgc thead th:first-child, .lgc tbody th { text-align: left; }
.lgc thead .nic-tile { margin: 0 auto 8px; }
.lgc tbody th b { display: block; font: 700 1.04rem var(--sc-font-display); }
.lgc tbody th small { display: block; margin-top: 2px; font-size: .86rem; color: var(--sc-ink-soft); font-weight: 400; }
.lgc td { color: #A3A3A0; font-size: .9rem; }
.lgc td.y { color: transparent; font-size: 0; }
.lgc td.y::before { content: ""; display: inline-block; width: 22px; height: 22px; background: var(--noor-clinic, #0B7F7A);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.lgc tbody tr:first-child { background: #EEF6F5; }
.nic-tile--sm { width: 38px; height: 38px; } .nic-tile--sm .nic { width: 22px; height: 22px; }

/* tints */
.lgx { display: grid; gap: 22px; }
/* the viewer: one real frame over a real room; only the lenses take the colour */
.tv { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8; border-radius: 22px; overflow: hidden; background: #DCD8CF;
  box-shadow: 0 1px 2px rgba(26,26,26,.06), 0 18px 44px -18px rgba(26,26,26,.32); }
.tv__room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.tv__glasses { position: relative; width: min(74%, 620px); margin-top: -2%; }   /* no transform here: the tint must blend with the room behind */
.tv__glasses img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)); }
.tv__tint { position: absolute; inset: 0; mix-blend-mode: multiply; transition: background-color 260ms ease;
  -webkit-mask: url("../lens-lab/glasses-black-lens-alpha.png") 0 0 / 100% 100% no-repeat; mask: url("../lens-lab/glasses-black-lens-alpha.png") 0 0 / 100% 100% no-repeat; }
.tv__tint.is-mirror { mix-blend-mode: normal; opacity: .9; }
.tv__name { position: absolute; left: 16px; bottom: 14px; margin: 0; padding: 7px 14px; border-radius: 999px; color: #fff; font: 600 .9rem/1.2 var(--sc-font-display);
  background: rgba(22,24,23,.48); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lgx__g h3 { margin-bottom: 10px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.lgx__row { display: flex; flex-wrap: wrap; gap: 8px; }
.lgx__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: #1A1A1A; font: 500 .9rem/1 var(--sc-font-text); box-shadow: inset 0 0 0 1px rgba(26,26,26,.12);
  transition: transform 140ms cubic-bezier(.23,1,.32,1), box-shadow 160ms ease; }
.lgx__chip:active { transform: scale(.97); }
.lgx__chip:focus-visible { outline: 2px solid #0B7F7A; outline-offset: 2px; }
.lgx__chip[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px #1A1A1A; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .lgx__chip:hover { box-shadow: inset 0 0 0 1px rgba(26,26,26,.35); } .lgx__chip[aria-checked="true"]:hover { box-shadow: inset 0 0 0 1.5px #1A1A1A; } }
.lgx__dot { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(26,26,26,.18); }
@media (max-width: 700px) { .tv { aspect-ratio: 4 / 3; } .tv__glasses { width: 88%; } }

/* progressives */
.lgp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lgp li { position: relative; padding: 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(26,26,26,.12); border-top: 4px solid var(--c, #0B7F7A); }
.lgp li:nth-child(1) { --c: #0B7F7A; } .lgp li:nth-child(2) { --c: #E2AE4A; } .lgp li:nth-child(3) { --c: #C98A12; } .lgp li:nth-child(4) { --c: #8A8A86; }
.lgp__d { display: block; margin-bottom: 10px; font: 800 1.6rem/1 var(--sc-font-display); color: var(--c); }
.lgp p { margin: 6px 0 0; font-size: .95rem; color: var(--sc-ink-soft); }
.lgp__try { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 24px 0 0; color: var(--sc-ink-soft); }

@media (max-width: 899px) {
  .lgd, .lgd__panel { grid-template-columns: 1fr; }
  .lgd__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lgd__group { grid-column: 1 / -1; }
  .lgt { grid-template-columns: 1fr; } .lgm { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lgp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .lgm, .lgp { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .lgd.is-swap .lgd__panel > * { animation: none; } }
.lgc th, .lgc td, .lgc small { text-transform: none; letter-spacing: 0; font-family: var(--sc-font-text); }
.lgc thead th { font-weight: 600; }
.lgc tbody th b { font-family: var(--sc-font-display); }

/* ---------------------------------------------------------------- polish pass (Emil Kowalski principles) */
:root { --lg-ease: cubic-bezier(.23, 1, .32, 1); }

/* section menu: sticky under the site chrome, scrolls sideways on phones */
.lgn { position: sticky; top: calc(var(--chrome-h, 72px) + 8px); z-index: 20; display: flex; gap: 4px; width: max-content; max-width: 100%; margin: clamp(48px, 7vw, 88px) auto 0;
  padding: 4px; overflow-x: auto; scrollbar-width: none; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(26,26,26,.12), 0 10px 28px -18px rgba(26,26,26,.45); }
.lgn::-webkit-scrollbar { display: none; }
.lgn a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; text-decoration: none; color: var(--sc-ink, #1A1A1A);
  font: 600 .88rem var(--sc-font-display); transition: background-color 160ms ease, color 160ms ease; }
.lgn a[aria-current] { background: var(--sc-ink, #1A1A1A); color: #fff; }
.lgn a:focus-visible { outline: 2px solid var(--noor-clinic, #0B7F7A); outline-offset: -2px; }
.lgn a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .lgn a:not([aria-current]):hover { background: #F1EFEA; } }
section.lg { scroll-margin-top: calc(var(--chrome-h, 72px) + 76px); }
.lgn + section.lg { padding-top: 40px; }

/* design tabs: one highlight that slides to the chosen tab */
.lgd__tabs { position: relative; isolation: isolate; }
.lgd__tabs button { position: relative; z-index: 1; justify-content: space-between; gap: 8px; background: transparent; transition: color 200ms ease, box-shadow 160ms ease, transform 140ms var(--lg-ease); }
.lgd__tabs button[aria-selected="true"] { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px transparent; }
.lgd__tabs button:not([aria-selected="true"]) { background: #fff; }
.lgd__ind { position: absolute; left: 0; right: 0; top: 0; z-index: 0; background: var(--sc-ink, #1A1A1A); box-shadow: inset 4px 0 0 var(--noor-show, #C98A12); pointer-events: none; }
.lgd__pkg { font: 600 .7rem var(--sc-font-display); letter-spacing: .04em; padding: 3px 6px; color: var(--noor-show, #C98A12); box-shadow: inset 0 0 0 1px currentColor; white-space: nowrap; }
.lgd__tabs button[aria-selected="true"] .lgd__pkg { color: #F0C46A; }
.lgd.is-swap .lgd__panel > * { animation: none; }
.lgd__name small b { color: var(--noor-show, #C98A12); font-weight: 600; }

/* map / see-through toggle */
.lgd__map { position: relative; }
.lgd__views { display: inline-flex; margin-bottom: 10px; padding: 3px; box-shadow: inset 0 0 0 1px rgba(26,26,26,.14); }
.lgd__views button { all: unset; cursor: pointer; padding: 7px 12px; font: 600 .82rem var(--sc-font-display); transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--lg-ease); }
.lgd__views button[aria-pressed="true"] { background: var(--sc-ink, #1A1A1A); color: #fff; }
.lgd__views button:active { transform: scale(.97); }
.lgd__views button:focus-visible { outline: 2px solid var(--noor-clinic, #0B7F7A); outline-offset: 2px; }
.lgd__note { margin: 10px 0 0; font-size: .86rem; color: var(--sc-ink-soft); }

/* package card link to its design */
.lab-pkg__design { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 0 16px; padding: 6px 0 10px; font: 600 .84rem var(--sc-font-display); color: var(--noor-show, #C98A12); text-decoration: none; }
.lab-pkg__design span { transition: transform 200ms var(--lg-ease); }
.lab-pkg__design:focus-visible { outline: 2px solid var(--noor-clinic, #0B7F7A); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lab-pkg__design:hover span { transform: translateX(3px); } .lab-pkg__design:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* how thin can it go */
.lgk { padding: 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(26,26,26,.12); }
.lgk__ctl { display: grid; gap: 10px; max-width: 30rem; margin-bottom: 20px; font: 600 .95rem var(--sc-font-display); }
.lgk__ctl b { font: 800 1.6rem var(--sc-font-display); margin-left: 8px; font-variant-numeric: tabular-nums; }
.lgk__ctl input { accent-color: var(--noor-clinic, #0B7F7A); width: 100%; min-height: 32px; }
.lgk__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lgk__rows li { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 5rem; align-items: center; gap: 16px; padding: 6px 0; border-bottom: 1px solid rgba(26,26,26,.08); }
.lgk__mat { display: grid; font-size: .86rem; color: var(--sc-ink-soft); } .lgk__mat b { font: 700 1rem var(--sc-font-display); color: var(--sc-ink, #1A1A1A); }
.lgk__rows svg { width: 100%; height: 44px; color: color-mix(in oklab, var(--noor-clinic, #0B7F7A) calc(40% + var(--w, 1) * 60%), #CFE6E4); }
.lgk__mm { text-align: right; font: 700 1.05rem var(--sc-font-display); font-variant-numeric: tabular-nums; }
.lgk__note { margin: 16px 0 0; font-size: .86rem; color: var(--sc-ink-soft); max-width: 48rem; }
@media (max-width: 599px) { .lgk__rows li { grid-template-columns: 6.5rem minmax(0, 1fr) 4rem; gap: 10px; } .lgk { padding: 16px; } }

@media (prefers-reduced-motion: reduce) { .lgd__ind { transition: none !important; } .lab-pkg__design span, .lgn a { transition: none; } }

/* before / after comparison */
.cmp { margin: 0 0 28px; max-width: 46rem; }
.cmp__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cmp__pair .cmp { max-width: none; margin: 0; }
.cmp__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #EDEAE4; box-shadow: 0 0 0 1px rgba(26,26,26,.12); touch-action: pan-y; }
[data-compare="polar"] .cmp__frame { aspect-ratio: 16 / 9; }
.cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.cmp__top { will-change: clip-path; }
.cmp__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(26,26,26,.25); pointer-events: none; will-change: transform; }
.cmp__handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; translate: -50% -50%; display: grid; place-items: center;
  border-radius: 50%; background: #fff; color: #1A1A1A; font: 700 1rem var(--sc-font-display); box-shadow: 0 6px 18px -8px rgba(26,26,26,.6); }
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp__range:focus-visible ~ .cmp__handle, .cmp__frame:focus-within .cmp__handle { box-shadow: 0 0 0 2px var(--noor-clinic, #0B7F7A); }
.cmp__tag { position: absolute; top: 12px; padding: 5px 9px; font: 700 .72rem var(--sc-font-display); letter-spacing: .12em; text-transform: uppercase; background: rgba(26,26,26,.78); color: #fff; pointer-events: none; }
.cmp__tag--l { left: 12px; } .cmp__tag--r { right: 12px; background: var(--noor-clinic, #0B7F7A); }
.cmp figcaption { margin-top: 10px; font-size: .92rem; color: var(--sc-ink-soft); }
@media (max-width: 899px) { .cmp__pair { grid-template-columns: 1fr; } }

/* lenses page: the way into the guide */
.lg-teaser { max-width: 72rem; margin: clamp(48px, 7vw, 80px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: clamp(22px, 3vw, 36px); background: #fff; box-shadow: inset 0 0 0 1px rgba(26,26,26,.12); border-left: 5px solid var(--noor-show, #C98A12); }
.lg-teaser p:not(.lg__kicker) { margin: 10px 0 0; max-width: 40rem; color: var(--sc-ink-soft); }
@media (max-width: 699px) { .lg-teaser { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Kie visuals in the guide */
.lg__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 28px; }
.lg__intro .lg__lead { margin: 0; }
.lg__fig { margin: 0; overflow: hidden; background: #F4F1EB; aspect-ratio: 16 / 9; }
.lg__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lgcm { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.lgcm li { display: grid; gap: 10px; align-content: start; }
.lgcm img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #F4F1EB; }
.lgcm span { font-size: .9rem; color: var(--sc-ink-soft); line-height: 1.45; }
.lgcm b { display: block; color: var(--sc-ink, #1A1A1A); font-weight: 600; }
.lgf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.lgf__fig { margin: 0; position: relative; }
.lgf__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.lgf__fig svg { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 4 / 3; pointer-events: none; }
.lgf__fig svg line, .lgf__fig svg path { stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.lgf__fig svg .g { stroke: #F0C46A; } .lgf__fig svg .d { stroke-dasharray: 6 8; stroke-width: 2; opacity: .9; }
.lgf__fig svg .t { stroke-width: 2; } .lgf__fig svg .p { fill: none; stroke: #8FE3C4; stroke-width: 3; }
.lgf__fig svg .n circle { fill: #1A1A1A; stroke: #fff; stroke-width: 2; }
.lgf__fig svg .n text { fill: #fff; font: 600 15px Jost, sans-serif; text-anchor: middle; }
.lgf__fig figcaption { margin-top: 8px; font-size: .9rem; color: var(--sc-ink-soft); }
.lgp__img { width: calc(100% + 40px); margin: -20px -20px 14px; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (max-width: 899px) { .lg__intro, .lgf { grid-template-columns: 1fr; } .lgcm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lgk__fig { margin: 0 0 16px; position: relative; overflow: hidden; background: #F4F1EB; }
.lgk__fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.lgk__fig figcaption { position: absolute; left: 0; right: 0; bottom: 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0 17%; text-align: center; }
.lgk__fig figcaption span { justify-self: center; padding: 5px 10px; font: 600 .82rem var(--sc-font-text); background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(26,26,26,.12); }
.lgk__fig img { aspect-ratio: 21 / 8; object-position: 50% 62%; }
.lgp__img { max-width: none; }
@media (max-width: 699px) { .lgk__fig img { aspect-ratio: 16 / 9; } .lgk__fig figcaption { padding: 0 8%; } .lgk__fig figcaption span { font-size: .72rem; padding: 4px 6px; } }
@media (max-width: 599px) {
  .lgd__tabs button { padding: 0 10px; }
  .lgd__pkg { font-size: .62rem; padding: 2px 4px; }
}

/* what a progressive is, and why its sides are softer */
.lgw { display: grid; gap: 28px; margin: 18px 0 40px; }
@media (min-width: 960px) { .lgw { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: start; } }
.lgw__text p { max-width: 62ch; }
.lgw__text h3 { margin: 26px 0 8px; }
.lgw__tips { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; line-height: 1.55; }
.lgw__views { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (min-width: 960px) { .lgw__views { grid-template-columns: 1fr; position: sticky; top: calc(var(--chrome-h, 72px) + 76px); } }
.lgw__view { margin: 0; }
.lgw__pic { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(26,26,26,.06), 0 14px 34px -18px rgba(26,26,26,.3); }
.lgw__pic svg { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; background: #EDEAE4; }
.lgw__tag { position: absolute; translate: -50% -50%; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.9); color: #1A1A1A;
  font: 600 .76rem/1.2 var(--sc-font-display); box-shadow: 0 1px 3px rgba(0,0,0,.18); white-space: nowrap; pointer-events: none; }
.lgw__tag--soft { background: rgba(22,24,23,.62); color: #fff; }
.lgw__view figcaption { font-style: normal; margin-top: 10px; font-size: .92rem; line-height: 1.45; color: var(--sc-ink-soft, #5C5C58); }
.lgw__view figcaption b { display: block; color: #1A1A1A; font-weight: 600; }
.lgw__next { margin-top: 8px; }
@media (max-width: 560px) { .lgw__tag { font-size: .68rem; padding: 3px 8px; } .lgw__tag:nth-of-type(2) { display: none; } }

/* for kids: three simple pictures, then MYO-D */
.kid-cards { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .kid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kid-card { padding: 18px 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(26,26,26,.05), 0 14px 34px -18px rgba(26,26,26,.26); }
.kid-card svg { display: block; width: 100%; height: auto; margin-bottom: 8px; font-family: var(--sc-font-display); }
.kid-card h3 { margin: 6px 0 6px; }
.kid-card p { margin: 0; color: var(--sc-ink-soft); }
.kid-myod { display: grid; gap: 22px; margin-top: 22px; padding: 24px; border-radius: 22px; background: #1A1A1A; color: #fff; }
@media (min-width: 860px) { .kid-myod { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; } }
.kid-myod h3 { margin: 0 0 8px; font-size: 1.35rem; color: #fff; }
.kid-myod p { color: rgba(255,255,255,.86); max-width: 58ch; }
.kid-myod .lg__kicker { color: #F3C76E; margin: 0 0 6px; }
.kid-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 14px; }
.kid-myod .btn { background: #F3C76E !important; color: #1A1A1A !important; }
.kid-myod .textlink { color: #fff; }
.kid-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kid-facts li { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.08); line-height: 1.5; }
.kid-facts b { color: #F3C76E; }
.kid-src { margin: 14px 0 0; font-size: .82rem; color: var(--sc-ink-soft); max-width: 90ch; }

/* tints on a face: the photo keeps its own 3:2 shape so the lens mask lines up at every width */
.tv.tv--face { aspect-ratio: 3 / 2; display: block; }
.tv--face .tv__room { object-fit: fill; object-position: 0 0; }
.tv--face .tv__tint { position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask: url("../lens-lab/face-lens-mask.png") 0 0 / 100% 100% no-repeat; mask: url("../lens-lab/face-lens-mask.png") 0 0 / 100% 100% no-repeat; }
.tv--face .tv__tint.is-mirror { mix-blend-mode: normal; opacity: .88; }