/* Homepage: a stable shopping action and a quiet, photographic window into travel. */
.home-hero{padding-top:42px;padding-bottom:36px;gap:56px;align-items:center}
.home-hero .hero-copy{padding:0}
.home-hero h1{font-size:clamp(58px,6.35vw,86px);margin:21px 0 22px}
.home-hero .hero-description{font-size:18px;line-height:1.55;max-width:470px;margin:0 0 24px}
.home-hero .popular-shortcuts{margin-top:13px}
.hero-assurances{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:23px;font-size:12px;color:var(--muted)}
.hero-assurances>span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.hero-assurances .icon{width:16px;height:16px;flex-shrink:0;color:#42665b}
/* The three ticks on ONE line at desktop (the founder, 26 Sep 2026: "5% back in Runway credits"): the type stays 12px and the words stay; below 1200px the room comes from the gaps and icons only, never under 16px between ticks and 14px icons (4px from icon to word). One line from about 1075px up; narrower, a whole tick moves to a second row, never a phrase split. Phones stack them (below). */
@media(max-width:1199px) and (min-width:651px){.hero-assurances{gap:10px 16px}.hero-assurances>span{gap:4px}.hero-assurances .icon{width:14px;height:14px}}
/* Where the trio takes two lines (651 to 1100px; the founder's iPad, 26 Sep 2026) its ticks sit in columns as wide as the widest tick (18.5em), so a wrapped tick's icon is under the icon above it, never under words, and every tick stays whole; a column too narrow for two stacks them, icons in one column, as on a phone. 8px between rows, the popular row's own. */
@media(max-width:1100px) and (min-width:651px){.hero-assurances{display:grid;grid-template-columns:repeat(auto-fill,minmax(18.5em,max-content));gap:8px 16px}}
.home-hero-visual{height:486px;overflow:hidden;background:#e5eef0}
.hero-frames{position:absolute;inset:0}
.home-hero-visual .hero-photo{position:absolute;inset:0}
.home-hero-visual:after{background:linear-gradient(180deg,#12303512,transparent 37%,#12282b0a 53%,#102326ba)}
.hero-photo-rail{position:absolute;z-index:2;left:24px;right:24px;bottom:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;color:white}
.hero-photo-rail .hero-destination{position:static;display:flex;align-items:flex-end;justify-content:flex-start;gap:12px;min-width:0;flex:1}
.hero-photo-rail .hero-destination>span:first-child{font-size:39px;line-height:1.08;letter-spacing:-.045em}
.hero-photo-rail .hero-destination>.icon{width:21px;height:21px;flex-shrink:0;margin-bottom:5px}
.hero-photo-rail .hero-destination:hover [data-hero-greeting]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.home-hero-visual :focus-visible{outline:2px solid white;outline-offset:3px}
.home-destinations{padding-top:39px;border-top:1px solid var(--line)}
.home-destinations .section-heading{margin-bottom:24px}
.home-destinations .section-heading .eyebrow{display:none}
.home-destinations .section-heading h2{font-size:40px}

@media(max-width:1100px) and (min-width:801px){
  .home-hero{gap:32px}
  .home-hero-visual{height:465px}
  .hero-photo-rail{gap:10px}
  .hero-photo-rail .hero-destination>span:first-child{font-size:31px}
  .hero-photo-rail .hero-destination>.icon{display:none}
}
@media(max-width:800px){
  .home-hero{gap:27px}
  .home-hero-visual{height:330px}
}
@media(max-width:650px){
  .home-hero{padding-top:24px;padding-bottom:26px;gap:18px}
  .home-hero h1{font-size:clamp(52px,16.5vw,74px);margin:17px 0 19px}
  .home-hero .hero-description{font-size:16px;line-height:1.5;margin-bottom:21px}
  .home-hero .popular-shortcuts{margin-top:11px;gap:10px;font-size:12px}
  /* The phone's trio, a neat stacked list (the founder, 26 Sep 2026): icons in
     one column, each label whole on its own line; 10px between lines, 18px
     above from the popular row and 18px below to the photo (the hero's gap),
     so search, popular row, ticks and photo breathe evenly ("the spacing on
     mobile just feels off"). */
  .hero-assurances{flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px;font-size:12px;line-height:1.25}
  .hero-assurances>span{gap:6px}
  .hero-assurances .icon{width:14px;height:14px}
  .home-hero-visual{height:218px;border-radius:12px}
  .home-hero-visual .hero-photo{border-radius:12px}
  .hero-photo-rail{left:16px;right:16px;bottom:16px;gap:10px}
  .hero-photo-rail .hero-destination>span:first-child{font-size:28px}
  .hero-photo-rail .hero-destination>.icon{display:none}
  .home-destinations{padding-top:27px;padding-bottom:39px}
  .home-destinations .section-heading{flex-direction:row;align-items:flex-end;gap:16px;margin-bottom:18px}
  .home-destinations .section-heading h2{font-size:30px;max-width:245px;line-height:1.08}
  .home-destinations .section-heading>.text-link{font-size:12px;flex-shrink:0;gap:6px}
  .home-destinations .section-heading>.text-link>.icon{width:16px;height:16px}
  .home-destinations .filter-tabs{margin-bottom:19px}
}
@media(max-width:370px){
  .hero-photo-rail .hero-destination>span:first-child{font-size:22px}
  .home-destinations .section-heading h2{font-size:27px}
}

.home-hero .popular-shortcuts a{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.home-hero .popular-shortcuts .flag{width:17px;height:13px;border-radius:2px;flex-shrink:0;box-shadow:0 0 0 1px #15272510}
/* THE POPULAR ROW WRAPS TIGHT (the founder's iPad, 26 Sep 2026): a chip that
   wraps sits 8px under the row above at every width, the trio's own spacing,
   with "Popular:" on the first row; phones keep each chip's price. Each chip's
   target reaches to the middle of the gaps around it (24px tall, the WCAG
   minimum), so neighbouring targets meet and never overlap. */
.home-hero .popular-shortcuts{row-gap:8px;line-height:16px}
.home-hero .popular-shortcuts a{position:relative;padding-block:0}
.home-hero .popular-shortcuts a::after{content:'';position:absolute;inset:-4px -7px}
/* On a phone "Popular:" is a star and the chips sit 7px apart (8px left 1.4px to spare at 375), so the three fit one line (the founder, 26 Sep 2026: "try tighten the space between popular and each of the trio first before you drop popular or use some sort of icon to indicate popular if possible"); each chip's target still meets its neighbours' (3.5px each side). */
.home-hero .popular-shortcuts .popular-icon{display:none}
@media(max-width:650px){.home-hero .popular-shortcuts{column-gap:7px}.home-hero .popular-shortcuts>.popular-label{display:inline-flex;align-items:center}.home-hero .popular-shortcuts .popular-word{display:none}.home-hero .popular-shortcuts .popular-icon{display:block;width:16px;height:16px;color:var(--muted)}.home-hero .popular-shortcuts a::after{inset:-10px -3.5px}}
/* On a phone the row is one line, so each chip's target can stand 36px tall (10px above and below its 16px line) without meeting another chip: 1px clear of the search field above, 8px clear of the ticks below. */
/* The phone row's one short name (the founder, 26 Sep 2026: "i don't see any harm at all in having USA on phone for that little use case"): the link carries both words; the short one shows at 650px and below only. */
.home-hero .popular-shortcuts a>.name,.home-hero .popular-shortcuts a>.name-short,.home-hero .popular-shortcuts a:hover>.name,.home-hero .popular-shortcuts a:hover>.name-short{font-size:inherit;font-weight:inherit;color:inherit}
.home-hero .popular-shortcuts .name-short{display:none}
@media(max-width:650px){.home-hero .popular-shortcuts .name{display:none}.home-hero .popular-shortcuts .name-short{display:inline}}
/* "Where do you need data?" whole on the narrowest phones (the typed text stays 16px). */
@media(max-width:400px){.home-hero .search-field input::placeholder{font-size:15px}}
/* The example cards name their country by the engine's name, set in capitals by the eyebrow style (engine ADR-170: never typed). */
.example-heading .example-trip,.ready-place>div>span{text-transform:uppercase}
/* The homepage FAQ (the founder, 26 Sep 2026): one heading, five rows, and the way to Help & support under the last one. */
.faq-main{min-width:0}
.faq-main>.faq-help{margin-top:24px}

/* The shortlist is engine-owned; expansion is browser presentation. */
.home-popular-more{display:flex;justify-content:center;margin-top:24px}
.home-popular-more:empty{display:none}
.home-popular-toggle{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 18px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:background .18s,border-color .18s}
.home-popular-toggle .icon{width:16px;height:16px}
.home-popular-toggle[aria-expanded="true"] .icon{transform:rotate(180deg)}
.home-popular-toggle:hover{background:#f4f8f6;border-color:#94aaa3;text-decoration:none}
.home-popular-toggle:focus-visible{outline:3px solid #226974;outline-offset:3px}
.home-destinations{scroll-margin-top:110px}
body:not([data-destination-card-view="flags"]) #home-destinations[data-home-region="Popular"]>.destination-card{display:block}
body:not([data-destination-card-view="flags"]) #home-destinations[data-home-region="Popular"][data-popular-expanded="false"]>.destination-card:nth-child(n+11){display:none}
@media(max-width:650px){
 body:not([data-destination-card-view="flags"]) #home-destinations[data-home-region="Popular"][data-popular-expanded="false"]>.destination-card:nth-child(n+7){display:none}
 .home-popular-more{margin-top:20px}
 .home-popular-toggle{min-width:160px}
 .home-destinations{scroll-margin-top:24px}
}