/* Ski Rental Finder — landing page.
   A deliberate visual reset: this stylesheet shares no rules with site.css. Only the
   elements in the current build step are styled; nothing is anticipated. */

/* Site-wide typeface. Hanken Grotesk is the project's existing contemporary grotesk and
   is kept as the primary family, so every other page already inherits the same type. */
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hanken-400.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hanken-500.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hanken-600.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hanken-700.woff2) format("woff2");font-weight:700;font-display:swap}:root{
  --lp-sans:"Hanken Grotesk",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Sampled from the supplied hero photograph: deep shadow navy and the hazy blue ridge. */
  --lp-navy:#0D2135;
  --lp-blue:#4F749A;
  --lp-gutter:22.4px;
}@media (min-width:760px){:root{--lp-gutter:41.6px}}@media (min-width:1280px){:root{--lp-gutter:57.6px}}*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body.lp{margin:0;font:400 13.6px/1.5 var(--lp-sans);color:var(--lp-navy);background:#0D2135;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}img{display:block;max-width:100%}.lp-skip{position:absolute;left:-7999.2px;top:6.4px;z-index:60;background:var(--lp-navy);color:#fff;padding:8px 11.2px;border-radius:6.4px}.lp-skip:focus{left:6.4px}/* ---------- hero ---------- */
.lp-hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background-image:
    linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)),
    url("/assets/img/lp-hero.webp");
  background-size:cover,cover;
  background-position:center,72% 50%;
  background-repeat:no-repeat,no-repeat;
}@media (min-width:900px){.lp-hero{background-position:50% 50%}}/* Subtle upper-right contrast for site navigation */
.lp-hero::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:55%;
  height:28%;
  z-index:1;
  pointer-events:none;

  background:radial-gradient(
    ellipse 85% 90% at 100% 0%,
    rgba(7,21,34,.60) 0%,
    rgba(7,21,34,.48) 35%,
    rgba(7,21,34,.24) 65%,
    rgba(7,21,34,0) 100%
  );
}/* ---------- lower-left cartographic treatment ----------
   Two independent layers over the photograph:
     .lp-hero::before  navy contrast, a plain radial gradient (no mask)
     .lp-topo          the contour lines, faded with a CSS mask
   The navy is deliberately wider than the contours so the lines never land directly on
   bright, highly detailed terrain. Neither layer alters the source PNG or the photo. */

/* Navy contrast layer. Paints above the hero's background image and below .lp-topo. */
.lp-hero::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:85%;
  height:78%;
  z-index:0;
  pointer-events:none;

  background:radial-gradient(
      ellipse 100% 100% at left bottom,
      rgba(7,21,34,.97) 0%,
      rgba(7,21,34,.97) 45%,
      rgba(7,21,34,.93) 58%,
      rgba(7,21,34,.80) 68%,
      rgba(7,21,34,.55) 78%,
      rgba(7,21,34,.25) 87%,
      rgba(7,21,34,0)   100%);
}@media (min-width:900px){.lp-hero::before{
    width:85%;
    height:78%;
  }
}/* Contour lines only. */
.lp-topo{
  position:absolute;
  left:0;
  bottom:0;
  width:60%;
  height:68%;
  z-index:1;
  pointer-events:none;
  /* One ellipse anchored in the bottom-left corner: strongest at the extreme corner,
     falling off both to the right and upward, fully transparent well inside the element's
     own edges so no rectangular boundary can appear. */
  --lp-fade:radial-gradient(125% 115% at 0% 100%,
      #000 0%,
      rgba(0,0,0,.92) 14%,
      rgba(0,0,0,.62) 30%,
      rgba(0,0,0,.30) 46%,
      rgba(0,0,0,.10) 60%,
      rgba(0,0,0,0) 74%);
  -webkit-mask-image:var(--lp-fade);
          mask-image:var(--lp-fade);
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}.lp-topo::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("/assets/img/lp-topo.webp");
  background-image:image-set(url("/assets/img/lp-topo.avif") type("image/avif"),
                             url("/assets/img/lp-topo.webp") type("image/webp"));
  /* Height is pinned to the viewport, not to the container, so growing the container
     exposes MORE of the map at the SAME contour scale rather than magnifying the lines.
     Sampled from deep inside the asset's content band so its vertical edges never show. */
  background-size:auto 166svh;
  background-position:50% 86%;
  background-repeat:no-repeat;
  opacity:.80;
}@media (min-width:900px){.lp-topo{width:65%;height:60%}.lp-topo::before{
    background-size:auto 160svh;
    opacity:.45;
  }
}/* ---------- logo ---------- */
.lp-logo{
  position:absolute;
  top:48px;
  left:80px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:9.6px;
  text-decoration:none;
  color:#fff;
}.lp-logo img{width:30.4px;height:auto}.lp-logo span{font-size:15.2px;font-weight:600;letter-spacing:-.012em;white-space:nowrap}@media (min-width:760px){.lp-logo img{width:35.2px}.lp-logo span{font-size:16.8px}}/* ---------- headline ---------- */
.lp-copy{
  position:relative;
  z-index:2;
  min-height:100svh;
  padding:0;
}.lp-h1{
  position:absolute;
  left:80px;
  top:calc((83.2px + 50svh) / 2);
  transform:translateY(-50%);
  margin:0;
  font-weight:700;
  font-size:clamp(40px,4.6vw,108px);
  line-height:.96;
  letter-spacing:-.042em;
}.lp-h1 span{display:block}.lp-h1 .l1{color:var(--lp-navy)}.lp-h1 .l2{color:var(--lp-blue)}/* Below 360px the clamp minimum would wrap "Find your gear." onto two lines; step it
   down so the two-line lockup holds on the narrowest phones. */
@media (max-width:359px){.lp-h1{font-size:33.6px}}/* ---------- search component ----------
   Geometry taken from the supplied reference screenshot and scaled by 0.583
   (reference field height 127px -> 74px). Reference measurements, in screenshot pixels:
     field 1552 x 127, radius 20      tab band height 92, top radius 42
     active tab 410 wide              inactive tab 354 wide      group 764 wide
   Ratios preserved: tab height / field height 0.72; active tab / field width 0.264;
   tab group / field width 0.492. */
.lp-s{
  position:absolute;
  top:50svh;
  left:80px;
  transform:translateY(-50%);
  z-index:5;
  width:100%;
  max-width:720px;
  margin-top:0;
  --lp-s-navy:#0F2232;
  --lp-s-line:rgba(255,255,255,.38);
  --lp-s-tab-h:43.2px;
  --lp-s-field-h:59.2px;
  --lp-s-tab-r:19.2px;
}.lp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}/* tabs: two shapes sitting directly on top of the field */
.lp-s-tabs{display:flex;align-items:flex-end;margin:0 0 -1px}.lp-s-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9.6px;
  height:var(--lp-s-tab-h);
  margin:0;
  padding:0 11.2px;
  border:1px solid var(--lp-s-line);
  border-bottom:0;
  border-radius:var(--lp-s-tab-r) var(--lp-s-tab-r) 0 0;
  position:relative;
  z-index:0;
  background:rgba(13,33,53,.10);
  -webkit-backdrop-filter:blur(1px);
          backdrop-filter:blur(1px);
  font:600 13.6px/1 var(--lp-sans);
  letter-spacing:-.005em;
  color:rgba(255,255,255,.90);
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}.lp-s-tab[data-lp-tab="mountain"]{width:190.4px}/* The two tabs overlap by 24px and the selected one is lifted above the seam, so each tab
   keeps BOTH rounded top corners and its full border in either state, with no doubled
   border where they meet. Selection changes the fill, never the shape. */
.lp-s-tab[data-lp-tab="location"]{width:184px;margin-left:-19.2px;padding-left:27.2px}.lp-s-tab .fa-solid{font-size:17.6px;line-height:1}.lp-s-tab[aria-selected="true"]{
  background:var(--lp-s-navy);
  color:#fff;
  z-index:1;
}@media (hover:hover){.lp-s-tab[aria-selected="false"]:hover{background:rgba(13,33,53,.20);color:#fff}}.lp-s-tab:focus-visible{outline:2px solid #fff;outline-offset:-3.2px}/* field */
.lp-s-field{
  position:relative;
  display:flex;
  align-items:center;
  height:var(--lp-s-field-h);
  padding:0 33.6px 0 24.8px;
  border-radius:9.6px;
  background:#F7F6F7;
  box-shadow:0 8px 27.2px rgba(7,21,34,.22);
}.lp-s-icon{flex:none;font-size:20px;color:var(--lp-s-navy);width:20.8px;text-align:center}.lp-s-input{
  flex:1;
  min-width:0;
  margin-left:19.2px;
  border:0;
  outline:0;
  background:transparent;
  font:400 18.4px/1.2 var(--lp-sans);
  letter-spacing:-.012em;
  color:var(--lp-s-navy);
}.lp-s-input::placeholder{color:#5B5F69;opacity:1}.lp-s-input::-webkit-search-cancel-button{display:none}.lp-s-field:focus-within{box-shadow:0 8px 27.2px rgba(7,21,34,.22),0 0 0 2px rgba(15,34,50,.45)}.lp-s-go{
  flex:none;
  display:grid;
  place-items:center;
  width:28.8px;
  height:28.8px;
  margin-left:12.8px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--lp-s-navy);
  font-size:16.8px;
  cursor:pointer;
  transition:transform .18s ease,color .18s ease;
}.lp-s-go:hover{transform:translateX(2.4px)}.lp-s-go:focus-visible{outline:2px solid var(--lp-s-navy);outline-offset:2px}/* suggestions */
.lp-s-list{
  position:absolute;
  left:0;right:0;
  top:calc(100% + 6.4px);
  z-index:5;
  padding:6.4px;
  border-radius:9.6px;
  background:#F7F6F7;
  box-shadow:0 14.4px 35.2px rgba(7,21,34,.30);
  max-height:min(56vh,313.6px);
  overflow:auto;
}.lp-s-list[hidden]{display:none}.lp-s-opt{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:9.6px 12.8px;
  border-radius:6.4px;
  text-decoration:none;
  color:var(--lp-s-navy);
}.lp-s-opt[aria-selected="true"],.lp-s-opt:hover{background:rgba(15,34,50,.08)}.lp-s-opt-n{font-weight:600;font-size:13.6px;letter-spacing:-.01em}.lp-s-opt-w{flex:none;font-size:11.2px;color:#5B5F69}.lp-s-none{margin:0;padding:12.8px;font-size:12.8px;color:#5B5F69}/* responsive: same component, no redesign */
@media (max-width:900px){
  .lp-s{--lp-s-tab-h:38.4px;--lp-s-field-h:51.2px;--lp-s-tab-r:16px}
  .lp-s-tab{font-size:11.2px;gap:7.2px;padding:0 8px}
  .lp-s-tab[data-lp-tab="mountain"]{width:auto;flex:1 1 0;max-width:168px}
  .lp-s-tab[data-lp-tab="location"]{width:auto;flex:1 1 0;max-width:148.8px;margin-left:-16px;padding-left:20.8px}
  .lp-s-field{padding:0 11.2px 0 16px;border-radius:8.8px}
  .lp-s-icon{font-size:16px;width:16.8px}
  .lp-s-input{margin-left:11.2px;font-size:13.6px}
  .lp-s-go{width:27.2px;height:27.2px;margin-left:6.4px;font-size:14.4px}
  .lp-s-opt-n{font-size:12.8px}
}@media (max-width:420px){.lp-s-tab .fa-solid{font-size:12px}.lp-s-tab{font-size:10.4px;gap:5.6px}.lp-s-input{font-size:12.8px}
}/* ---------- added: browse row, stats, site links ----------
   All new selectors, all namespaced .lp-x*. Nothing above this comment is touched.
   The block is absolutely positioned against .lp-copy (already position:relative) so it
   contributes NO height to .lp-hero. That keeps the hero at exactly 100svh, which in turn
   keeps the photograph's cover framing, .lp-hero::before (navy) and .lp-topo — all of
   which are sized as percentages of the hero and anchored to its bottom — numerically
   identical to before this block existed. `left` matches .lp-copy's own padding-left, so
   the row, the stats and the links share the search component's left edge and max width. */
.lp-x{
  position:absolute;
  left:80px;
  top:calc(50svh + 65.6px);
  z-index:4;
  width:720px;
  max-width:calc(100vw - 160px);
  color:#fff;
}/* OR / Browse all mountains */
.lp-x-browse{display:flex;align-items:center;gap:11.2px;min-width:0}.lp-x-rule{flex:none;width:20.8px;height:1px;background:rgba(255,255,255,.34)}.lp-x-or{
  flex:none;
  font:600 9.2px/1 var(--lp-sans);
  letter-spacing:.18em;
  color:rgba(255,255,255,.62);
}.lp-x-link{
  display:inline-flex;
  align-items:center;
  gap:9.6px;
  margin-left:8px;
  padding:3.2px 2px;
  text-decoration:none;
  color:#fff;
  font:600 13.6px/1 var(--lp-sans);
  letter-spacing:-.008em;
  transition:color .18s ease;
}.lp-x-link .fa-solid{display:none}@media (hover:hover){.lp-x-link:hover .fa-solid{color:#fff}.lp-x-link:hover .lp-x-arrow{transform:translateX(3.2px)}
}.lp-x-link:focus-visible{outline:2px solid #fff;outline-offset:3.2px;border-radius:3.2px}/* four statistics, dividers only, no cards or backgrounds */
.lp-x-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:calc(25svh - 84px) 0 0;
  padding:0;
}.lp-x-stats > div{padding:0 17.6px;min-width:0}.lp-x-stats > div:first-child{padding-left:0}.lp-x-stats > div + div{border-left:2px solid rgba(255,255,255,.32)}.lp-x-stats dt{
  font:600 clamp(30.4px,3.5vw,43.2px)/1 var(--lp-sans);
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:#fff;
}.lp-x-stats dd{
  margin:5.6px 0 0;
  font:400 13.6px/1.3 var(--lp-sans);
  letter-spacing:.004em;
  color:rgba(255,255,255,.66);
}/* top-right site navigation */
.lp-x-nav{
  position:fixed;
  top:48px;
  right:80px;
  z-index:10;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:25.6px;
  margin:0;
}.lp-x-nav a{
  font:500 13.6px/1 var(--lp-sans);
  letter-spacing:.004em;
  text-decoration:none;
  color:rgba(255,255,255,.88);
  padding:2.4px 0;
  white-space:nowrap;
  transition:color .18s ease;
}.lp-x-nav a:hover{color:#fff}.lp-x-nav a:focus-visible{outline:2px solid #fff;outline-offset:2.4px;border-radius:2.4px}/* reflow only; the hero and search above are untouched at every width */
@media (max-width:900px){
  .lp-x-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .lp-x-stats > div:nth-child(3){padding-left:0;border-left:0}
  .lp-x-stats dt{font-size:17.6px}
  .lp-x-stats dd{font-size:10px}
  .lp-x-link{font-size:12px;gap:8px}
}@media (max-width:560px){.lp-x-browse{flex-wrap:wrap;gap:8px}.lp-x-link{margin-left:0}.lp-x-stats > div{padding:0 11.2px}.lp-x-nav{gap:6.4px 16px}
}/* ===========================================================================
   MOBILE HERO  (< 900px)
   The desktop hero positions .lp-h1, .lp-s and .lp-x absolutely at left:100px,
   which at phone widths pushed the search form and tabs ~100px past the right
   edge and left the stats in a 175px column. Rather than patching each offset,
   the whole hero returns to normal flow here and becomes a single gutter-
   aligned column. Desktop (>=900px) is untouched.
   ========================================================================= */
@media (max-width: 899px){
  :root { --lp-gutter: 16px; }

  /* ---- the photograph gets its own layer on phones ----
     Why: the 1672x941 source at `cover` in a 375x812 box renders 1443x812,
     i.e. the box height EXACTLY, with 854.4px of horizontal overflow and zero
     vertical overflow. background-position-Y therefore does nothing at any
     phone width, and the only ways to raise the skier inside a single
     background layer are to zoom (which crops him further) or to crop a
     portrait version of the asset.

     So the photo moves out of .lp-hero's background and onto .lp-hero::after,
     which is free on phones (it carries the desktop nav scrim, disabled
     here). That layer keeps the identical `cover` scale and the identical 93%
     horizontal crop, and is simply TRANSLATED up by --lp-photo-lift. Nothing
     is scaled and the sunset composition is unchanged; the image just sits
     higher in the frame. The strip this exposes at the bottom is filled with
     the average colour of the photo's own bottom edge, and sits under the
     navy where it is already 0.90-0.96 opaque.

     .lp-topo and .lp-hero::before are untouched, so the coverage and the
     diagonal from the previous pass are preserved exactly. */
  .lp-hero {
    /* Measured at 375x812 with the skier's rendered extent: helmet CSS y 199,
       boots and ski tails CSS y 520, search field bottom 420 — so 69% of him
       sits above the search interface and 31%, the lower legs and skis, below
       it. 120px buried the skis behind the panel. */
    --lp-photo-lift: 80px;
    isolation: isolate;                 /* contains the z-index:-1 photo layer */
    background-image: none;
    background-color: rgb(91,112,146);  /* sampled from the photo's bottom edge */
  }
  .lp-hero::after {
    display: block;                     /* re-enabled; it is the photo now */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--lp-photo-lift));
    width: auto;
    height: 100%;
    z-index: -1;                        /* above the fill, below navy and topo */
    pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)),
      url("/assets/img/lp-hero.webp");
    background-size: cover, cover;
    background-position: center, 93% 50%;
    background-repeat: no-repeat, no-repeat;
  }

  /* ---- cartographic treatment, rebalanced for the phone ----
     On desktop the navy and the contours sit in the lower-LEFT corner as a
     radial. On a tall phone that leaves the right half of the statistics on
     bare photograph. These two rules replace the corner radial with a soft
     DIAGONAL: it begins near the left edge at about the tab row and falls
     away toward the lower right, so the picture keeps the skier and the
     sunset above it while the artwork owns the base of the hero.

     Measured at 375x812: tabs 38.8-44.5%, search field bottom 51.7%,
     statistics 54.4-73.3%. The 200deg axis runs down-and-left, which is what
     makes the boundary sit higher on the left than on the right. Long,
     closely spaced stops keep it a gradient rather than an edge. */
  .lp-hero::before {
    width: 100%;
    height: 86%;
    background:
      linear-gradient(200deg,
        rgba(7,21,34,0)    0%,
        rgba(7,21,34,0)   34%,
        rgba(7,21,34,.08) 42%,
        rgba(7,21,34,.22) 50%,
        rgba(7,21,34,.42) 59%,
        rgba(7,21,34,.64) 68%,
        rgba(7,21,34,.82) 78%,
        rgba(7,21,34,.92) 89%,
        rgba(7,21,34,.96) 100%),
      radial-gradient(ellipse 120% 90% at left bottom,
        rgba(7,21,34,.55) 0%,
        rgba(7,21,34,.28) 45%,
        rgba(7,21,34,0)   78%);
  }

  .lp-topo {
    width: 100%;
    height: 78%;
    /* Matches the navy's diagonal, a little further down so the contours sit
       inside the navy rather than on its leading edge, and carries them
       across the full width behind the statistics. */
    --lp-fade: linear-gradient(200deg,
        rgba(0,0,0,0)    0%,
        rgba(0,0,0,0)   42%,
        rgba(0,0,0,.10) 50%,
        rgba(0,0,0,.34) 60%,
        rgba(0,0,0,.62) 70%,
        rgba(0,0,0,.86) 82%,
        #000           94%);
  }
  .lp-topo::before { opacity: .88; }

  /* Contrast scrim. The headline is dark type and the stats are white, so the
     column grades from a light wash at the top to a dark base at the bottom:
     each block gets the backing it needs without touching the artwork. */
  .lp-copy::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(255,255,255,.22) 0%, rgba(255,255,255,.34) 32%,
      rgba(255,255,255,.12) 54%, rgba(10,22,36,.18) 72%,
      rgba(10,22,36,.52) 100%);
  }
  .lp-copy > * { position: relative; z-index: 1; }

  .lp-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 17.6px;
    /* headline starts ~27% down the hero; the 76.8px floor keeps it clear of the
       overlaid header on short viewports */
    padding: max(76.8px, 27svh) var(--lp-gutter) 32px;
    min-height: 100svh;
  }

  /* every absolutely-positioned hero block rejoins the flow */
  .lp-h1, .lp-s, .lp-x {
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .lp-h1, .lp-x { position: static; }
  /* .lp-s stays POSITIONED, not static. The suggestions list is
     `position:absolute; top:calc(100% + 6.4px)` and takes its containing block
     from the nearest positioned ancestor. Making .lp-s static handed that job
     to .lp-copy, so "100%" became the bottom of the whole hero column: the
     list rendered at y 820-932 on an 649.6px screen and .lp-hero's
     `overflow:hidden` clipped it away. `relative` takes .lp-s out of absolute
     placement exactly as `static` did, while keeping it the containing block
     the list measures against. */
  /* ...and it must out-stack its siblings. `.lp-copy > *` sets z-index:1 on
     every child, which both overrode .lp-s's own z-index:5 and tied it with
     .lp-x; on a tie the later sibling paints on top, so the stats block sat
     over the suggestions and swallowed the taps (hit test at the top of the
     list returned A.lp-x-link). */
  .lp-s { position: relative; z-index: 5; }

  .lp-h1 {
    font-size: clamp(27.2px, 9.4vw, 41.6px);
    line-height: 1.02;
    letter-spacing: -.028em;
    margin-bottom: 2px;
  }

  /* ---- search: tabs share the row, field fills the column ---- */
  .lp-s { --lp-s-tab-h: 36.8px; --lp-s-field-h: 48px; }
  .lp-s-tabs { display: flex; width: 100%; }
  .lp-s-tab {
    flex: 1 1 0;
    min-width: 0;                              /* lets the label shrink, not overflow */
    gap: 6.4px;
    padding: 0 8px;
    font-size: 11.6px;
  }
  .lp-s-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lp-s-field { width: 100%; min-width: 0; }
  .lp-s-input { min-width: 0; font-size: 12.8px; } /* 12.8px stops iOS zoom-on-focus */
  .lp-s-go { flex: none; }

  /* suggestions: long resort names wrap/truncate instead of widening the box */
  .lp-sg { max-width: 100%; left: 0; right: 0; width: auto; }
  .lp-sg-item, .lp-sg b, .lp-sg small {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ---- stats: a deliberate 2x2 block, the anchor of the mobile composition ---- */
  .lp-x-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14.4px 11.2px;
    margin: 3.2px 0 0;
  }
  .lp-x-stats > div { padding: 0; }
  .lp-x-stats > div + div { border-left: 0; }
  .lp-x-stats > div:nth-child(even) { padding-left: 11.2px; border-left: 2px solid rgba(255,255,255,.3); }
  .lp-x-stats dt { font-size: clamp(24px, 8.4vw, 32px); }
  .lp-x-stats dd { margin-top: 3.2px; font-size: 11.2px; line-height: 1.3; color: rgba(255,255,255,.8); }

  .lp-x-browse { flex-wrap: wrap; }
}@media (max-width: 374px){:root{ --lp-gutter: 12.8px; }.lp-s-tab{ font-size: 10.4px; padding: 0 6.4px; gap: 4.8px; }
}