/* Category landing page (see landing.js). Phone rules are at the bottom. */
body.is-landing main.listing { display: none; }
.is-landing .cat-hero { height: 100svh; min-height: 560px; }
.is-landing .cat-hero h1 { bottom: 160px; max-width: 14ch; }
.l-hero-btn { position: absolute; z-index: 2; left: max(64px, env(safe-area-inset-left, 0px)); bottom: 62px; width: auto; padding: 0 28px; }
.land { --side: clamp(16px, 4.74vw, 72px); background: #ffffff; color: #1d1a1b; display: flow-root; }
.land .best { padding: 64px 0 72px; }
.l-sec { padding: 40px 0 88px; }
.l-sec h2 { margin: 0 0 50px; padding-left: var(--side); font-family: var(--font-ui); font-weight: 600; font-size: 22.4px; line-height: 1.2; }
.l-wrap { position: relative; }
.l-row { display: flex; gap: 24px; overflow-x: auto; overflow-y: hidden; padding: 0 var(--side); scroll-padding-left: var(--side); scroll-snap-type: x mandatory; scrollbar-width: none; }
.l-row::-webkit-scrollbar { display: none; }
.l-row .cat { flex: none; width: max(220px, calc((100vw - 2 * var(--side) - 96px) / 5)); scroll-snap-align: start; }
.l-row .cat-title { top: 36px; left: 32px; right: 20px; font-size: 30px; line-height: 33px; }
.l-row .cat:hover .cat-title { opacity: 1; }
.l-arrow { top: 50%; transform: translateY(-50%); }
.l-arrow[hidden] { display: none; }
.l-next { right: 19px; }
.l-prev { left: 19px; }
.land .banner { height: min(100svh, 760px); }
.l-guide .banner-title { margin: 14px 0 0; }
.l-support { padding-bottom: 120px; }
.l-support h2 { text-transform: uppercase; font-weight: 500; }
.l-cards { display: contents; }
.l-crumbs { padding: 22px var(--side) 0; font-family: var(--font-ui); font-weight: 400; font-size: 16px; line-height: 22px; color: #333333; }
.l-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.l-crumbs b { font-weight: 700; color: #1d1a1b; }
.l-intro { margin: 118px var(--side) 0; max-width: 54vw; font-family: var(--font-ui); font-weight: 300; font-size: 28px; line-height: 35px; color: #333333; }
.l-intro + .best { padding-top: 104px; }
.l-sgrid { display: grid; grid-template-columns: 2.05fr 1fr 1fr; gap: 24px; padding: 0 var(--side); }
.l-help { position: relative; grid-row: span 2; display: block; overflow: hidden; background: #2b2b2b; color: #ffffff; min-height: 420px; }
.l-help img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.l-help:hover img { transform: scale(1.03); }
.l-help::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 42%, rgba(0,0,0,.15) 100%); }
.l-help .l-ic { position: absolute; z-index: 1; top: 48px; left: 56px; border-color: #ffffff; color: #ffffff; }
.l-help-copy { position: absolute; z-index: 1; left: 56px; right: 56px; bottom: 56px; display: block; }
.l-help-eyebrow { display: block; font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 33px; text-transform: uppercase; }
.l-help-text { display: block; margin-top: 18px; max-width: 520px; font-family: var(--font-ui); font-weight: 300; font-size: 29px; line-height: 38px; }
.l-card { display: flex; flex-direction: column; align-items: flex-start; aspect-ratio: 1 / 1; padding: 32px; background: #f3f0f1; color: #1d1a1b; transition: background-color .15s ease; }
.l-card:hover { background: #e9e4e6; }
.l-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1.4px solid currentColor; border-radius: 50%; }
.l-ic svg { width: 30px; height: 30px; }
.l-card-title { margin-top: 26px; font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 33px; text-transform: uppercase; }
.l-card-link { margin-top: auto; font-family: var(--font-ui); font-weight: 700; font-size: 15px; line-height: 20px; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) {
  .l-intro { max-width: none; margin-top: 72px; font-size: 24px; line-height: 32px; }
  .l-intro + .best { padding-top: 80px; }
  .l-sgrid { grid-template-columns: 1fr 1fr; }
  .l-help { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; min-height: 0; }
  .l-card { aspect-ratio: auto; min-height: 280px; }
  .l-help .l-ic { top: 32px; left: 32px; }
  .l-help-copy { left: 32px; right: 32px; bottom: 32px; }
}
@media (max-width: 720px) {
  .land { --side: 6.1vw; }
  .is-landing .cat-hero { height: clamp(480px, 170vw, 720px); min-height: 0; }
  .is-landing .cat-hero h1 { font-size: min(48px, 9.6vw); line-height: 1.06; left: 24px; right: 16px; bottom: 150px; max-width: none; overflow-wrap: anywhere; }
  .is-landing .l-hero-btn { left: 50%; transform: translateX(-50%); bottom: 54px; height: 48px; min-width: 178px; padding: 0 20px; font-size: 16px; white-space: nowrap; }
  .l-crumbs { display: none; }
  .l-intro { display: block; margin: 0; max-width: none; padding: 36px 24px 0; font-family: var(--font-ui); font-weight: 300; font-size: 19px; line-height: 28px; color: #333333; }
  .land .best { --side: 6.1vw; --tile-w: 61vw; --tile-h: 118vw; --card-pad: 6.1vw; --card-w: calc(61vw + 6.1vw); padding: 56px 0 64px; }
  .land .best h2, .land .l-sec h2 { margin: 0 0 16px; font-size: 13.5px; line-height: 20px; font-weight: 700; color: #333333; }
  .land .best-name { margin-top: 18px; font-size: 13px; line-height: 16px; }
  .land .best-desc { margin-top: 10px; font-size: 18px; line-height: 25px; font-weight: 300; -webkit-line-clamp: 3; }
  .land .best-arrow { top: 38vw; }
  .land .best-next, .land .l-next { right: 5vw; }
  .l-sec { padding: 0 0 64px; }
  .land .banner + .l-sec { padding-top: 64px; }
  .l-row { gap: 6.1vw; }
  .land .l-row .cat { width: 61vw; }
  .land .l-row .cat-title { top: 26px; left: 16px; right: 12px; font-size: 24px; line-height: 26px; }
  .land .l-row .cat.dark .cat-title { color: #1d1a1b; text-shadow: none; }
  .l-arrow { display: flex; right: 5vw; left: auto; top: 30.5vw; width: 45px; height: 45px; transform: translateY(-50%); }
  .l-arrow.l-prev { display: none; }
  .land .banner { height: 200vw; min-height: 480px; max-height: none; }
  .land .banner-copy { left: 24px; bottom: 60px; max-width: calc(100% - 48px); }
  .land .banner-eyebrow { font-size: 16.5px; }
  .land .l-guide .banner-title { margin: 24px 0 0; font-size: 23px; line-height: 28px; }
  .land .banner-btn { margin-top: 40px; height: 48px; padding: 0 20px; font-size: 16px; }
  .l-support { padding-bottom: 64px; }
  .l-support h2 { font-weight: 700; }
  .l-sgrid { display: block; padding: 0 24px; }
  .l-help { aspect-ratio: 1 / 1; min-height: 0; }
  .l-help .l-ic { top: 26px; left: 24px; width: 48px; height: 48px; }
  .l-help-copy { left: 24px; right: 24px; bottom: 28px; }
  .l-help-eyebrow { font-size: 16.5px; line-height: 22px; }
  .l-help-text { font-size: 20px; line-height: 26px; margin-top: 12px; }
  .l-cards { display: flex; gap: 6.1vw; margin: 24px -24px 0; padding: 0 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 24px; scrollbar-width: none; }
  .l-cards::-webkit-scrollbar { display: none; }
  .l-card { flex: none; width: 61vw; aspect-ratio: 1 / 1; min-height: 0; padding: 24px; scroll-snap-align: start; }
  .l-ic { width: 48px; height: 48px; }
  .l-ic svg { width: 24px; height: 24px; }
  .l-card-title { margin-top: 18px; font-size: 19px; line-height: 22px; }
  .l-card-link { font-size: 15px; line-height: 20px; padding-top: 10px; }
}