/*
 * Trial app-style homepage (templates/default/homepage_v2.php).
 * Mirrors the Flutter app's v2 home screen. Only loaded by that template and
 * every rule is scoped under .home-v2, so nothing leaks into the rest of the
 * site or the classic homepage.
 *
 * Palette from simplysimApp lib/config/theme.dart (BrandColors.pink).
 */

/* Poppins 500/600/700, latin subset, self-hosted next to the 400 weight
   that custom.css already loads site-wide. 700 is preloaded in <head>. */
@font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('../img/assets/fonts/poppins/poppins-500-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('../img/assets/fonts/poppins/poppins-600-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('../img/assets/fonts/poppins/poppins-700-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.home-v2 {
   --hv2-navy: #14183A;
   --hv2-pink: #E8236E;
   --hv2-pink-dark: #C2145A;
   --hv2-pink-soft: #FDE7EF;
   --hv2-pill-border: #E4E8F0;
   /* Neutrals: pink is kept for the hero accent and primary buttons only. */
   --hv2-slate: #5B6178;
   --hv2-body: #4A4F63;
   --hv2-neutral: #F3F5F9;
   --hv2-neutral-border: #E4E8F0;
   --hv2-grey600: #6B6B6B;
   --hv2-grey500: #8A8A8A;
   --hv2-grey100: #F0F0F0;
   --hv2-bg: #FAFAFA;
   --hv2-card-shadow: 0 6px 24px rgba(20, 24, 58, 0.07);
   --hv2-gutter: 16px;
   background: var(--hv2-bg);
   color: #3a3e40;
   overflow-x: hidden;
   overflow-x: clip;
   font-family: 'Poppins', 'proxima-nova', Arial, Helvetica, sans-serif;
}

/* Content column: 16px gutter on phones, centred max-width on desktop.
   content-box like UIkit's own .uk-container, so the content is 1200 wide. */
.home-v2 .hv2-wrap,
.home-v2 .uk-container {
   box-sizing: content-box;
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--hv2-gutter);
   padding-right: var(--hv2-gutter);
}

@media (min-width: 960px) {
   .home-v2 {
      --hv2-gutter: 32px;
   }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-hero {
   position: relative;
   z-index: 5; /* keeps the search dropdown above the sections below */
   /* --hv2-head-pad: room for the see-through site header (set below). */
   padding: calc(28px + var(--hv2-head-pad, 0px)) 0 28px;
}

/* Clips the photo and wash only, so the search dropdown can overhang. */
.home-v2 .hv2-hero-media {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   z-index: 0;
}

.home-v2 .hv2-hero-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top center;
   z-index: 0;
}

/* Same wash as HeroV2: white 0.85 > 0.92 at 22% > 0.70 at the bottom. */
.home-v2 .hv2-hero-wash {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
   background: linear-gradient(to bottom,
         rgba(255, 255, 255, 0.85) 0%,
         rgba(255, 255, 255, 0.92) 22%,
         rgba(255, 255, 255, 0.70) 100%);
}

.home-v2 .hv2-hero-inner {
   position: relative;
   z-index: 2;
}

.home-v2 .hv2-copy {
   max-width: 600px;
}

.home-v2 .hv2-title {
   font-family: 'Poppins', sans-serif;
   font-size: 30px;
   font-weight: 700;
   line-height: 1.15;
   letter-spacing: -0.2px;
   color: var(--hv2-navy);
   margin: 0;
}

.home-v2 .hv2-title-visual {
   display: block;
}

/* The real H1 text sits in a visually hidden span (for crawlers and
   screen readers); this visual copy carries the rotating word. */
.home-v2 .hv2-title-visual > span {
   display: block;
}

/* Rotating last word (script in homepage_v2.php). The current word stays
   in flow so the line height never changes; the slot width is set by JS
   and animates between words, like the app's AnimatedSize. */
.home-v2 .hv2-rot {
   display: inline-block;
   position: relative;
   vertical-align: top;
   white-space: nowrap;
}

.home-v2 .hv2-rot.is-ready {
   transition: width .45s cubic-bezier(0.33, 1, 0.68, 1);
}

.home-v2 .hv2-rot-word {
   display: inline-block;
   white-space: nowrap;
   transition: opacity .45s cubic-bezier(0.33, 1, 0.68, 1), transform .45s cubic-bezier(0.33, 1, 0.68, 1);
}

.home-v2 .hv2-rot-word.is-current {
   position: relative;
   opacity: 1;
   transform: none;
}

.home-v2 .hv2-rot-word.is-entering,
.home-v2 .hv2-rot-word.is-leaving,
.home-v2 .hv2-rot-word.hv2-rot-probe {
   position: absolute;
   left: 0;
   top: 0;
}

.home-v2 .hv2-rot-word.is-entering {
   opacity: 0;
   transform: translateY(0.47em);
   transition: none;
}

.home-v2 .hv2-rot-word.is-leaving {
   opacity: 0;
   transform: translateY(-0.47em);
}

.home-v2 .hv2-rot-word.hv2-rot-probe {
   visibility: hidden;
   transition: none;
}

.home-v2 .hv2-title .hv2-pink {
   color: var(--hv2-pink);
}

.home-v2 .hv2-sub {
   font-size: 14px;
   line-height: 1.5;
   color: var(--hv2-grey600);
   margin: 8px 0 0;
}

/* Search pill: restyles the shared destination_search markup in place. */
.home-v2 .hv2-search {
   position: relative;
   margin-top: 18px;
}

.home-v2 .hv2-search .uk-search {
   display: block;
}

.home-v2 .hv2-search .uk-search-icon {
   display: none;
}

.home-v2 .hv2-search-pin {
   position: absolute;
   left: 16px;
   top: 26px;
   transform: translateY(-50%);
   z-index: 3;
   color: var(--hv2-grey500);
   font-size: 18px;
   line-height: 1;
   pointer-events: none;
}

.home-v2 .hv2-search #destination-search {
   height: 52px;
   border-radius: 26px;
   border: 0 !important;
   background: #fff;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   padding-left: 46px !important;
   padding-right: 56px !important;
   font-family: 'Poppins', sans-serif;
   font-size: 16px;
   color: var(--hv2-navy);
}

.home-v2 .hv2-search #destination-search::placeholder {
   color: var(--hv2-grey500);
   opacity: 1;
}

.home-v2 .hv2-search #destination-search:focus {
   outline: none;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 2px rgba(20, 24, 58, 0.10);
}

.home-v2 .hv2-search #use-location-btn {
   width: 52px;
   height: 52px;
   margin: 0 !important;
   top: 0 !important;
   right: 0 !important;
   transform: none !important;
   display: flex;
   align-items: center;
   justify-content: center;
}

.home-v2 .hv2-search #use-location-btn i {
   color: var(--hv2-pink) !important;
   zoom: 1 !important;
   font-size: 20px;
}

/* Crosshairs, like the app's my_location icon. */
.home-v2 .hv2-search #use-location-btn .fa-location-arrow::before {
   content: "\f05b";
}

.home-v2 .hv2-search #search-results {
   border-radius: 18px;
   overflow-x: hidden;
   box-shadow: 0 10px 30px rgba(20, 24, 58, 0.14);
   margin-top: 8px;
   text-align: left;
}

.home-v2 .hv2-multi {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 12px;
   font-size: 13px;
   font-weight: 600;
   color: var(--hv2-navy);
   text-decoration: none;
   max-width: 100%;
}

.home-v2 .hv2-multi:hover {
   color: var(--hv2-navy);
   text-decoration: underline;
   text-underline-offset: 3px;
}

.home-v2 .hv2-multi span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.home-v2 .hv2-multi .fa-chevron-right {
   font-size: 11px;
}

/* ------------------------------------------------------------------ */
/* Round flag rows (recently viewed + popular)                         */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-flags {
   margin-top: 24px;
}

.home-v2 .hv2-flags + .hv2-flags {
   margin-top: 20px;
}

.home-v2 .hv2-row-title {
   font-family: 'Poppins', sans-serif;
   font-size: 15px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--hv2-navy);
   margin: 0 0 14px;
}

.home-v2 .hv2-flag-row {
   display: flex;
   gap: 10px;
   list-style: none;
   padding: 4px var(--hv2-gutter) 6px;
   margin: 0 calc(var(--hv2-gutter) * -1);
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-padding-left: var(--hv2-gutter);
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
}

.home-v2 .hv2-flag-row::-webkit-scrollbar {
   display: none;
}

.home-v2 .hv2-flag-row > li {
   flex: 0 0 84px;
   width: 84px;
   margin: 0;
   scroll-snap-align: start;
}

.home-v2 .hv2-flag {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   text-decoration: none;
   color: var(--hv2-navy);
}

.home-v2 .hv2-flag:hover {
   text-decoration: none;
   color: var(--hv2-navy);
}

.home-v2 .hv2-flag-img {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   overflow: hidden;
   background: var(--hv2-grey100);
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
   transition: transform .15s ease, box-shadow .15s ease;
}

.home-v2 .hv2-flag:hover .hv2-flag-img {
   transform: translateY(-2px);
   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

.home-v2 .hv2-flag-img img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.home-v2 .hv2-flag-name {
   margin-top: 6px;
   font-size: 12px;
   font-weight: 500;
   line-height: 1.2;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* Tablet and up: centred hero, compact type, centred flag rows.
   Phone (< 768px) keeps the app's left-aligned layout above. */
@media (min-width: 768px) {
   .home-v2 .hv2-hero {
      padding: calc(36px + var(--hv2-head-pad, 0px)) 0 30px;
   }

   /* Same side padding as the header's .uk-container (30px, then 40px
      from 960px), so the copy and flags line up with the logo. */
   .home-v2 .hv2-hero .hv2-wrap {
      padding-left: 30px;
      padding-right: 30px;
   }

   /* Everything in the hero shares the container's left edge. */
   .home-v2 .hv2-copy {
      max-width: none;
      text-align: left;
   }

   .home-v2 .hv2-title {
      font-size: 36px;
      font-weight: 700;
   }

   .home-v2 .hv2-sub {
      font-size: 16px;
      margin-top: 8px;
   }

   .home-v2 .hv2-search {
      max-width: 640px;
      margin: 24px 0 0;
      text-align: left;
   }

   .home-v2 .hv2-search #destination-search {
      height: 56px;
      border-radius: 28px;
   }

   .home-v2 .hv2-search-pin {
      top: 28px;
   }

   .home-v2 .hv2-search #use-location-btn {
      width: 56px;
      height: 56px;
   }

   .home-v2 .hv2-multi {
      font-size: 14px;
      margin-top: 16px;
   }

   .home-v2 .hv2-flags {
      margin-top: 26px;
   }

   .home-v2 .hv2-flags + .hv2-flags {
      margin-top: 18px;
   }

   .home-v2 .hv2-row-title {
      font-size: 17px;
      text-align: left;
      margin-bottom: 12px;
   }

   /* A grid that always fits the container (12 across at 1200px)
      instead of a scroller. Tiles are left-aligned, so the first flag
      sits on the same edge as the headline and nothing pokes out. */
   .home-v2 .hv2-flag-row {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
      gap: 16px 6px;
      overflow: visible;
      margin: 0;
      padding: 4px 0 6px;
      scroll-snap-type: none;
   }

   .home-v2 .hv2-flag-row > li {
      width: auto;
      min-width: 0;
   }

   .home-v2 .hv2-flag {
      align-items: flex-start;
      text-align: left;
   }

   .home-v2 .hv2-flag-img {
      width: 56px;
      height: 56px;
   }

   .home-v2 .hv2-flag-name {
      font-size: 13px;
      display: block;
      -webkit-line-clamp: unset;
      overflow: visible;
      padding-right: 4px;
   }
}

@media (min-width: 960px) {
   .home-v2 .hv2-hero .hv2-wrap {
      padding-left: 40px;
      padding-right: 40px;
   }
}

/* ------------------------------------------------------------------ */
/* Desktop: the SimplySIM app beside the hero copy (the app's tablet   */
/* _HeroCopyRowTablet layout). Three CSS-framed phones, fanned, plus   */
/* the store badges. Hidden below 960px.                               */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-app {
   display: none;
}

@media (min-width: 960px) {
   /* Two columns: copy, Recently viewed and Popular stacked on the left,
      the app column spanning all of them on the right. The flexible
      first and last rows soak up any height difference, so whichever
      side is shorter is centred against the other and no gap ever opens
      between the left-hand blocks (with or without Recently viewed). */
   .home-v2 .hv2-hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) clamp(280px, 38%, 420px);
      grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
      column-gap: 48px;
   }

   .home-v2 .hv2-hero-top {
      display: contents;
   }

   .home-v2 .hv2-hero-top .hv2-copy {
      grid-column: 1;
      grid-row: 2;
      min-width: 0;
   }

   .home-v2 #hv2-recent {
      grid-column: 1;
      grid-row: 3;
      min-width: 0;
   }

   .home-v2 .hv2-popular {
      grid-column: 1;
      grid-row: 4;
      min-width: 0;
   }

   .home-v2 .hv2-hero-top .hv2-search {
      max-width: 560px;
   }

   .home-v2 .hv2-app {
      display: block;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: center;
      min-width: 0;
   }
}

/* The fan is sized from the column width: the front phone is 42% wide
   and sits in flow (so it sets the height), the side phones are 38% wide,
   tucked behind and tilted about their bottom centre. Insets are chosen
   so even the tilted top corners stay inside the column. */
.home-v2 .hv2-phones {
   position: relative;
   padding-top: 4%;
}

.home-v2 .hv2-phone {
   box-sizing: border-box;
   padding: 9px;
   border-radius: 20% / 9.2%;
   background: #111318;
   box-shadow: 0 18px 40px rgba(20, 24, 58, 0.22), 0 4px 10px rgba(20, 24, 58, 0.12);
}

.home-v2 .hv2-phone picture,
.home-v2 .hv2-phone img {
   display: block;
   width: 100%;
   height: auto;
}

/* Screen keeps the screenshot's own ratio inside the bezel, so nothing is cropped. */
.home-v2 .hv2-phone img {
   aspect-ratio: 600 / 1304;
   border-radius: 15% / 6.9%;
   object-fit: contain;
   background: #fff;
}

.home-v2 .hv2-phone-left,
.home-v2 .hv2-phone-right {
   position: absolute;
   bottom: 2%;
   width: 38%;
   transform-origin: bottom center;
}

.home-v2 .hv2-phone-left {
   left: 10%;
   transform: rotate(-7deg);
}

.home-v2 .hv2-phone-right {
   right: 10%;
   transform: rotate(7deg);
}

.home-v2 .hv2-phone-front {
   position: relative;
   z-index: 2;
   width: 42%;
   margin: 0 auto;
   box-shadow: 0 24px 50px rgba(20, 24, 58, 0.28), 0 6px 14px rgba(20, 24, 58, 0.14);
}

@media (min-width: 1200px) {
   .home-v2 .hv2-phone {
      padding: 10px;
   }
}

.home-v2 .hv2-app-cta {
   margin-top: 22px;
   text-align: center;
}

.home-v2 .hv2-app-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--hv2-navy);
}

.home-v2 .hv2-app-badges {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 10px;
   margin-top: 10px;
}

.home-v2 .hv2-app-badges a {
   display: block;
   line-height: 0;
}

.home-v2 .hv2-badge-apple {
   height: 44px;
   width: auto;
}

/* Google's badge PNG carries transparent padding: 64px tall gives the
   same 44px visible badge as Apple's, the negative margin trims the gap. */
.home-v2 .hv2-badge-google {
   height: 64px;
   width: auto;
   margin: -10px -9px;
}

/* Mobile copy of the app block, a soft card under Your eSIMs.
   Overflow is clipped so the tilted phones never cause sideways scroll. */
.home-v2 .hv2-app-mobile {
   padding: 8px 0 24px;
}

.home-v2 .hv2-app-mobile-card {
   overflow: hidden;
   padding: 24px 16px 22px;
   border: 1px solid var(--hv2-neutral-border);
   border-radius: 20px;
   background: var(--hv2-neutral);
}

.home-v2 .hv2-app-mobile .hv2-phones {
   max-width: 400px;
   margin: 0 auto;
}

@media (min-width: 960px) {
   .home-v2 .hv2-app-mobile {
      display: none;
   }
}

@media (min-width: 1200px) {
   .home-v2 .hv2-hero {
      padding: calc(44px + var(--hv2-head-pad, 0px)) 0 34px;
   }

   .home-v2 .hv2-title {
      font-size: 42px;
   }

   .home-v2 .hv2-sub {
      font-size: 17px;
   }
}

/* ------------------------------------------------------------------ */
/* Body sections: clean card style                                     */
/* ------------------------------------------------------------------ */
.home-v2 .uk-section,
.home-v2 .uk-section.uk-padding-remove-top {
   /* Half the section rhythm each side: 36px between sections on phone,
      56px on desktop. */
   padding-top: 18px !important;
   padding-bottom: 18px !important;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
   background: transparent;
}

/* uk-padding on shared sections would add a second gutter inside ours. */
.home-v2 .uk-section.uk-padding {
   padding-left: 0 !important;
   padding-right: 0 !important;
}

@media (min-width: 960px) {
   .home-v2 .uk-section,
   .home-v2 .uk-section.uk-padding-remove-top {
      padding-top: 28px !important;
      padding-bottom: 28px !important;
   }
}

.home-v2 h2,
.home-v2 h3,
.home-v2 h4,
.home-v2 .uk-card-title {
   font-family: 'Poppins', sans-serif;
   color: var(--hv2-navy);
}

/* Section headings: drop the grey rule lines, use the app's navy. */
.home-v2 h2.uk-heading-line,
.home-v2 .hv2-section-title {
   font-size: 22px;
   font-weight: 700;
   line-height: 1.25;
   text-align: left !important;
   margin: 0 0 8px;
   overflow: visible;
}

.home-v2 .uk-heading-line > span::before,
.home-v2 .uk-heading-line > span::after {
   display: none;
}

.home-v2 .uk-heading-line > span {
   display: inline;
}

@media (min-width: 960px) {
   .home-v2 h2.uk-heading-line,
   .home-v2 .hv2-section-title {
      font-size: 28px;
   }
}

.home-v2 .uk-section p.uk-text-center.fontl,
.home-v2 .hv2-section-sub {
   text-align: left !important;
   color: var(--hv2-grey600);
   font-size: 14px;
   line-height: 1.6;
   max-width: 860px;
   margin-left: 0;
   margin-top: 0;
   margin-bottom: 20px !important;
}

/* Generic white card */
.home-v2 .hv2-card,
.home-v2 .uk-card-default {
   background: #fff;
   border-radius: 20px !important;
   border: 1px solid var(--hv2-pill-border);
   box-shadow: var(--hv2-card-shadow);
}

.home-v2 .hv2-card {
   box-sizing: border-box;
   padding: 22px 20px;
}

@media (min-width: 960px) {
   .home-v2 .hv2-card {
      padding: 36px 40px;
   }
}

.home-v2 .uk-card-default.uk-card-hover:hover {
   box-shadow: 0 12px 32px rgba(20, 24, 58, 0.12);
}

/* Buttons: pill shaped, brand pink. */
.home-v2 .uk-button {
   border-radius: 999px;
   font-family: 'Poppins', sans-serif;
   font-weight: 600;
   text-transform: none;
}

.home-v2 .uk-button-primary {
   background: var(--hv2-pink) !important;
   border: 0 !important;
   color: #fff !important;
}

.home-v2 .uk-button-primary:hover {
   background: var(--hv2-pink-dark) !important;
   color: #fff !important;
}

.home-v2 .uk-button-default {
   background: #fff;
   border: 1px solid var(--hv2-pill-border);
   color: var(--hv2-navy);
}

.home-v2 .uk-button-default:hover {
   border-color: var(--hv2-navy);
   color: var(--hv2-navy);
}

/* Product cards (product_block) */
.home-v2 .esim-product .uk-card {
   overflow: hidden;
}

.home-v2 .esim-product .uk-card-header {
   border-bottom: 1px solid var(--hv2-grey100);
}

.home-v2 .esim-product .uk-card-title a {
   color: var(--hv2-navy) !important;
}

.home-v2 .esim-product .uk-text-primary {
   color: var(--hv2-navy) !important;
}

.home-v2 .esim-product .uk-card-footer {
   border-top: 1px solid var(--hv2-grey100);
}

.home-v2 .esim-product .uk-card-header img[alt$="Flag"] {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   object-fit: cover;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
}

.home-v2 .add-to-basket {
   background: var(--hv2-pink) !important;
}

.home-v2 .add-to-basket:hover {
   background: var(--hv2-pink-dark) !important;
}

/* Signed-in eSIM strip (home_esims, injected client side) */
.home-v2 .home-esims .esim-card {
   border-radius: 20px;
   border-left: 0;
   box-shadow: var(--hv2-card-shadow);
}

.home-v2 .home-esims .esim-card .esim-cta,
.home-v2 .home-esims a.uk-link-text {
   color: var(--hv2-navy);
}

.home-v2 .home-esims h2 {
   font-weight: 700;
}

/* Phone: the eSIM strip, Popular/Regional/Global, Amazing Offers and Why grids
   scroll sideways instead of stacking (same idiom as .hv2-flag-row).
   Gap replaces UIkit's gutter margin/padding; the vertical padding keeps
   the card shadows from being clipped by the scroller. */
@media (max-width: 639px) {
   .home-v2 .hv2-swipe,
   .home-v2 .hv2-popular-grid .uk-container > [uk-grid],
   .home-v2 .hv2-why .uk-container > [uk-grid] {
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 14px;
      padding: 10px var(--hv2-gutter) 26px;
      margin: -10px calc(var(--hv2-gutter) * -1) -16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-left: var(--hv2-gutter);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
   }

   .home-v2 .hv2-swipe::-webkit-scrollbar,
   .home-v2 .hv2-popular-grid .uk-container > [uk-grid]::-webkit-scrollbar,
   .home-v2 .hv2-why .uk-container > [uk-grid]::-webkit-scrollbar {
      display: none;
   }

   .home-v2 .hv2-swipe > *,
   .home-v2 .hv2-swipe > .uk-grid-margin,
   .home-v2 .hv2-popular-grid .uk-container > [uk-grid] > *,
   .home-v2 .hv2-popular-grid .uk-container > [uk-grid] > .uk-grid-margin,
   .home-v2 .hv2-why .uk-container > [uk-grid] > *,
   .home-v2 .hv2-why .uk-container > [uk-grid] > .uk-grid-margin {
      flex: 0 0 85%;
      width: 85%;
      max-width: 340px;
      margin: 0;
      padding-left: 0;
      scroll-snap-align: start;
   }

   .home-v2 .hv2-swipe-esims > *,
   .home-v2 .hv2-swipe-esims > .uk-grid-margin {
      flex-basis: 78%;
      width: 78%;
   }
}

/* Feature bar: four small white tiles */
.home-v2 .hv2-features .uk-section {
   background: transparent !important;
   padding: 0 !important;
}

.home-v2 .hv2-features .uk-grid > div > .uk-flex {
   background: #fff;
   border-radius: 18px;
   border: 1px solid var(--hv2-pill-border);
   box-shadow: var(--hv2-card-shadow);
   padding: 14px 16px;
   height: 100%;
}

.home-v2 .hv2-features svg path,
.home-v2 .hv2-features svg circle,
.home-v2 .hv2-features svg rect,
.home-v2 .hv2-features svg line {
   stroke: var(--hv2-slate);
}

.home-v2 .hv2-features svg rect[y="7"],
.home-v2 .hv2-features [uk-icon="icon: bolt; ratio: 1.4"] svg path {
   fill: var(--hv2-slate);
   stroke: none;
}

.home-v2 .hv2-features .uk-text-bold {
   color: var(--hv2-navy);
   font-size: 13px;
}

/* Country list (destinations_all, hide_map) */
.home-v2 .hv2-countries .uk-section {
   background: transparent !important;
}

.home-v2 .hv2-countries h2.fontxl {
   font-size: 22px;
   font-weight: 700;
   text-align: left !important;
}

.home-v2 .hv2-countries .uk-card-body {
   border-radius: 16px !important;
   border: 1px solid var(--hv2-pill-border) !important;
   box-shadow: var(--hv2-card-shadow);
}

.home-v2 .hv2-countries .uk-card-body img {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   object-fit: cover;
}

.home-v2 .hv2-countries .fontm {
   color: var(--hv2-navy);
   font-weight: 500;
}

/* FAQ accordion as stacked cards */
.home-v2 .hv2-faq .uk-accordion > li {
   background: #fff;
   border-radius: 16px;
   border: 1px solid var(--hv2-pill-border);
   box-shadow: var(--hv2-card-shadow);
   padding: 14px 18px;
   margin-top: 10px;
}

.home-v2 .hv2-faq .uk-accordion-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--hv2-navy);
}

.home-v2 .hv2-faq .uk-accordion-content {
   margin-top: 10px;
   color: var(--hv2-grey600);
}

.home-v2 .hv2-faq a:not(.uk-button):not(.uk-accordion-title),
.home-v2 .hv2-why a:not(.uk-button) {
   color: var(--hv2-navy);
   text-decoration: underline;
   text-underline-offset: 3px;
}

/* Why SimplySIM cards */
.home-v2 .hv2-why .uk-text-lead {
   text-align: left !important;
   margin-left: 0 !important;
   font-size: 16px;
   color: var(--hv2-grey600);
}

.home-v2 .hv2-why .uk-card-title i {
   color: var(--hv2-slate) !important;
}

.home-v2 .hv2-why .uk-card-title {
   color: var(--hv2-navy);
}

/* Long-form SEO copy card */
.home-v2 .hv2-seo p {
   text-align: left;
   color: #4d4d4d;
   line-height: 1.7;
}

/* ------------------------------------------------------------------ */
/* See-through site header on the v2 homepage                          */
/* body.home-v2-page is added by homepage_v2.php; hv2-scrolled by its  */
/* scroll listener. --hv2-pull / --hv2-head are measured there too;    */
/* the values here are the fallbacks (80px navbar + 4px line).         */
/* ------------------------------------------------------------------ */
body.home-v2-page {
   --hv2-pull: 84px;
   --hv2-head: 84px;
}

@media (max-width: 768px) {
   body.home-v2-page {
      --hv2-pull: 59px;
      --hv2-head: 59px;
   }
}

body.home-v2-page .home-v2 {
   --hv2-head-pad: var(--hv2-head);
}

body.home-v2-page .home-v2 .hv2-hero {
   margin-top: calc(-1 * var(--hv2-pull));
}

body.home-v2-page header.uk-box-shadow-small {
   position: relative;
   transition: background-color .25s ease, box-shadow .25s ease;
}

body.home-v2-page header.uk-box-shadow-small > div[style*="height:4px"] {
   transition: opacity .25s ease;
}

body.home-v2-page:not(.hv2-scrolled) header.uk-box-shadow-small {
   background-color: transparent !important;
   box-shadow: none !important;
}

/* iOS Safari tints the status bar from the sticky header and keeps the last
   colour when it turns transparent, so after scrolling back up it stayed
   white. A solid sky colour gives Safari something to sample; the gradient
   on top blends it into the hero photo (sampled from an iPhone render). */
@media (max-width: 959px) {
   /* No fade: Safari samples once the scroll settles, and mid-fade it would
      catch a near-white colour and keep it until the next pull-down. */
   body.home-v2-page header.uk-box-shadow-small {
      transition: box-shadow .25s ease;
   }

   body.home-v2-page:not(.hv2-scrolled) header.uk-box-shadow-small {
      background-color: #dbe6f0 !important;
      background-image: linear-gradient(#dbe6f0, #e2edf5);
   }

   body.home-v2-page.hv2-scrolled header.uk-box-shadow-small {
      background-image: none;
   }
}

/* custom.css paints .uk-navbar white too */
body.home-v2-page header.uk-box-shadow-small .uk-navbar {
   transition: background-color .25s ease;
}

body.home-v2-page:not(.hv2-scrolled) header.uk-box-shadow-small .uk-navbar {
   background-color: transparent;
}

body.home-v2-page:not(.hv2-scrolled) header.uk-box-shadow-small > div[style*="height:4px"] {
   opacity: 0;
}

/* ------------------------------------------------------------------ */
/* Feature bar overlapping the bottom of the hero                      */
/* (feature_bar.php is uk-visible@s, so this only matters from 640px)  */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-features {
   position: relative;
   z-index: 6;
}

/* Lift the hero above the cards while its search dropdown is open. */
.home-v2 .hv2-hero:has(#search-results:not([hidden])) {
   z-index: 7;
}

.home-v2 .hv2-features .uk-grid > div > .uk-flex {
   border: 0;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(20, 24, 58, 0.10);
}

@media (min-width: 640px) {
   /* Room for the cards' top half, so the flag labels never sit under them. */
   .home-v2 .hv2-hero {
      padding-bottom: 76px;
   }

   .home-v2 .hv2-features {
      margin-top: -38px;
   }
}

/* ------------------------------------------------------------------ */
/* Seasonal offers card (home_v2_seasonal.php): a light card with the  */
/* copy and destination tiles on the left and a beach crop on the      */
/* right; the photo stacks on top on phone.                            */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-season-wrap {
   /* Same rhythm as the .uk-section blocks around it. */
   padding: 36px 0 18px;
}

.home-v2 .hv2-season {
   display: flex;
   flex-direction: column;
   background: #fff;
   border-radius: 24px;
   overflow: hidden;
   box-shadow: var(--hv2-card-shadow), 0 2px 6px rgba(20, 24, 58, 0.04);
}

.home-v2 .hv2-season-media {
   position: relative;
   height: 160px;
   overflow: hidden;
   background: #e9eef5;
}

/* Photo fills the panel; the template picks it from img/assets/home/seasonal/. */
.home-v2 .hv2-season-media img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 50% 50%;
   display: block;
}

.home-v2 .hv2-season-body {
   box-sizing: border-box;
   padding: 22px 20px 24px;
   min-width: 0;
}

.home-v2 .hv2-season-title {
   margin: 0;
   font-size: 24px;
   font-weight: 700;
   line-height: 1.2;
   color: var(--hv2-navy);
}

.home-v2 .hv2-season-title .hv2-pink {
   color: inherit;
}

.home-v2 .hv2-season-sub {
   margin: 10px 0 0;
   font-size: 14px;
   line-height: 1.6;
   color: var(--hv2-grey600);
   max-width: 560px;
}

.home-v2 .hv2-season-ticks {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px 16px;
   list-style: none;
   margin: 16px 0 0;
   padding: 0;
   max-width: 520px;
}

.home-v2 .hv2-season-ticks li {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
   font-size: 13px;
   font-weight: 600;
   color: var(--hv2-navy);
}

.home-v2 .hv2-season-ticks i {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--hv2-neutral);
   color: var(--hv2-slate);
   font-size: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.home-v2 .hv2-season-dest-title {
   margin: 22px 0 10px;
   font-size: 15px;
   font-weight: 600;
   color: var(--hv2-navy);
}

/* Phone: tiles scroll sideways, full-bleed to the card edge. */
.home-v2 .hv2-season-dests {
   display: flex;
   gap: 8px;
   list-style: none;
   margin: 0 -20px;
   padding: 4px 20px 8px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-padding-left: 20px;
   scrollbar-width: none;
}

.home-v2 .hv2-season-dests::-webkit-scrollbar {
   display: none;
}

.home-v2 .hv2-season-dests li {
   flex: 0 0 auto;
   margin: 0;
   scroll-snap-align: start;
}

.home-v2 .hv2-season-dests a {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 6px 14px 6px 6px;
   border-radius: 999px;
   background: #fff;
   border: 1px solid var(--hv2-pill-border);
   box-shadow: 0 3px 10px rgba(20, 24, 58, 0.06);
   font-size: 13px;
   font-weight: 600;
   color: var(--hv2-navy);
   text-decoration: none;
   white-space: nowrap;
   transition: border-color .15s ease, color .15s ease, transform .15s ease;
}

.home-v2 .hv2-season-dests a:hover {
   border-color: #C9CFDB;
   color: var(--hv2-navy);
   transform: translateY(-1px);
   text-decoration: none;
}

.home-v2 .hv2-season-dests img {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   object-fit: cover;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

@media (min-width: 768px) {
   .home-v2 .hv2-season-wrap {
      padding: 56px 0 28px;
   }

   .home-v2 .hv2-season {
      flex-direction: row-reverse;
      align-items: stretch;
   }

   .home-v2 .hv2-season-media {
      flex: 0 0 30%;
      height: auto;
      min-height: 280px;
      margin: 14px 14px 14px 0;
      border-radius: 18px;
   }

   .home-v2 .hv2-season-body {
      flex: 1 1 auto;
      padding: 36px 32px 36px 40px;
   }

   .home-v2 .hv2-season-title {
      font-size: 32px;
   }

   .home-v2 .hv2-season-sub {
      font-size: 15px;
   }

   .home-v2 .hv2-season-dests {
      flex-wrap: wrap;
      margin: 0;
      padding: 4px 0 4px;
      overflow: visible;
      scroll-snap-type: none;
   }
}

@media (prefers-reduced-motion: reduce) {
   .home-v2 .hv2-season-dests a {
      transition: none;
   }
}

/* ------------------------------------------------------------------ */
/* Popular Destinations: 7 flags plus a More tile from 768px; the     */
/* other 7 open as a second row. Phone keeps the full scroll row.      */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-more-tile {
   display: none;
}

@media (min-width: 768px) {
   .home-v2 .hv2-flag-row,
   .home-v2 .hv2-popular .hv2-flag-row {
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 16px 8px;
   }

   .home-v2 .hv2-popular .hv2-flag-row {
      transition: height .3s ease;
   }

   .home-v2 .hv2-flag-row.is-collapsed .hv2-more-item {
      display: none;
   }

   /* Flags shrink with narrow columns instead of wrapping. */
   .home-v2 .hv2-flag-img {
      width: min(56px, 100%);
      height: auto;
      aspect-ratio: 1;
   }

   .home-v2 .hv2-more-tile {
      display: block;
      grid-column: 8;
      grid-row: 1;
   }

   .home-v2 .hv2-more-btn {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      color: var(--hv2-navy);
      text-align: left;
   }

   .home-v2 .hv2-more-circle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(56px, 100%);
      aspect-ratio: 1;
      border-radius: 50%;
      background: #fff;
      color: var(--hv2-navy);
      font-size: 18px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
      transition: transform .15s ease, box-shadow .15s ease;
   }

   .home-v2 .hv2-more-circle i {
      transition: transform .3s ease;
   }

   .home-v2 .hv2-more-btn:hover .hv2-more-circle {
      transform: translateY(-2px);
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
   }

   .home-v2 .hv2-more-btn:hover {
      color: var(--hv2-navy);
   }

   .home-v2 .hv2-more-btn:focus-visible .hv2-more-circle {
      outline: 2px solid var(--hv2-navy);
      outline-offset: 2px;
   }

   .home-v2 .hv2-more-btn[aria-expanded="true"] .hv2-more-circle i {
      transform: rotate(180deg);
   }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
   .home-v2 .hv2-popular .hv2-flag-row,
   .home-v2 .hv2-more-circle i {
      transition: none;
   }
}

/* ------------------------------------------------------------------ */
/* Light content cards (roaming, students, trip planner, affiliate):   */
/* copy on the left, a tinted panel on the right; stacked on phone.    */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-lcard {
   display: flex;
   flex-direction: column;
   gap: 20px;
   box-sizing: border-box;
   padding: 22px 20px;
   background: #fff;
   border: 1px solid rgba(20, 24, 58, 0.08);
   border-radius: 24px;
   box-shadow: var(--hv2-card-shadow);
}

.home-v2 .hv2-lcard-body {
   flex: 1 1 auto;
   min-width: 0;
}

.home-v2 .hv2-lcard-side {
   box-sizing: border-box;
   min-width: 0;
}

.home-v2 .hv2-lcard-title {
   margin: 0;
   font-size: 24px;
   font-weight: 700;
   line-height: 1.2;
   color: var(--hv2-navy);
}

.home-v2 .hv2-lcard-title .hv2-pink {
   color: inherit;
}

.home-v2 .hv2-lcard-title .hv2-purple {
   color: #7A2EC7;
}

.home-v2 .hv2-lcard-text {
   margin: 12px 0 0;
   font-size: 16px;
   line-height: 1.6;
   color: var(--hv2-body);
}

.home-v2 .hv2-lcard-text strong {
   color: var(--hv2-navy);
}

.home-v2 .hv2-pill-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   height: 48px;
   margin: 0;
   padding: 0 22px;
   border: 0;
   border-radius: 999px;
   background: var(--hv2-pink);
   font-family: inherit;
   font-size: 15px;
   font-weight: 600;
   color: #fff;
   text-decoration: none;
   cursor: pointer;
   transition: background-color .15s ease;
}

.home-v2 .hv2-pill-btn:hover {
   background: var(--hv2-pink-dark);
   color: #fff;
   text-decoration: none;
}

.home-v2 .hv2-pill-ghost {
   background: #fff;
   border: 1.5px solid var(--hv2-navy);
   color: var(--hv2-navy);
}

.home-v2 .hv2-pill-ghost:hover {
   background: var(--hv2-navy);
   border-color: var(--hv2-navy);
   color: #fff;
}

.home-v2 .hv2-btn-row {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.home-v2 .hv2-lcard-head {
   display: flex;
   align-items: center;
   gap: 14px;
}

.home-v2 .hv2-checks {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px 16px;
   list-style: none;
   margin: 18px 0 0;
   padding: 0;
   max-width: 560px;
}

.home-v2 .hv2-checks li {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
   font-size: 14px;
   font-weight: 500;
   color: var(--hv2-navy);
}

.home-v2 .hv2-checks i {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--hv2-neutral);
   color: var(--hv2-slate);
   font-size: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
}



/* Roaming: "Did You Know?" stat panel */
.home-v2 .hv2-roam-fact {
   padding: 22px 20px;
   border-radius: 18px;
   background: var(--hv2-neutral);
   border: 1px solid var(--hv2-neutral-border);
   text-align: center;
}

.home-v2 .hv2-roam-fact-title {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
   color: var(--hv2-navy);
}

.home-v2 .hv2-roam-fact-figure {
   margin-top: 8px;
   font-size: 30px;
   font-weight: 700;
   line-height: 1.1;
   color: var(--hv2-navy);
}

.home-v2 .hv2-roam-fact-text {
   margin: 10px 0 0;
   font-size: 14px;
   line-height: 1.55;
   color: var(--hv2-grey600);
}

.home-v2 .hv2-roam-fact-small {
   margin-top: 14px;
   font-size: 12px;
   color: var(--hv2-grey500);
}

.home-v2 .hv2-roam-logos {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 10px 16px;
   margin-top: 10px;
}

.home-v2 .hv2-roam-logos img {
   display: block;
   height: 22px;
   width: auto;
   filter: grayscale(1);
   opacity: 0.75;
   transition: filter .2s ease, opacity .2s ease;
}

.home-v2 .hv2-roam-logos img:hover {
   filter: none;
   opacity: 1;
}

.home-v2 .hv2-roam-logos span {
   font-size: 12px;
   color: var(--hv2-grey500);
}

/* Students: same white card as the rest, form panel on the right */

.home-v2 .hv2-student-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   margin-right: 12px;
   border-radius: 50%;
   background: var(--hv2-neutral);
   color: var(--hv2-navy);
   font-size: 16px;
   vertical-align: 4px;
}

.home-v2 .hv2-student-form {
   padding: 22px 20px;
   border-radius: 18px;
   background: #fff;
   background: var(--hv2-neutral);
   border: 1px solid var(--hv2-neutral-border);
   box-shadow: none;
}

.home-v2 .hv2-student-form-title {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: var(--hv2-navy);
}

.home-v2 .hv2-student-form-text {
   margin: 8px 0 0;
   font-size: 14px;
   line-height: 1.5;
   color: var(--hv2-grey600);
}

.home-v2 .hv2-student-row {
   display: flex;
   gap: 8px;
   margin-top: 14px;
}

.home-v2 .hv2-student-row .uk-input {
   flex: 1 1 auto;
   min-width: 0;
   height: 48px;
   padding: 0 14px;
   border: 1px solid var(--hv2-neutral-border);
   border-radius: 12px;
   background: #fff;
   font-size: 15px;
   color: var(--hv2-navy);
}

.home-v2 .hv2-student-row .uk-input:focus {
   border-color: var(--hv2-navy);
}

.home-v2 .hv2-student-row .hv2-pill-btn {
   flex: 0 0 auto;
   margin-top: 0;
}

.home-v2 .hv2-student-small {
   margin: 12px 0 0;
   font-size: 13px;
   line-height: 1.5;
   color: var(--hv2-grey500);
}

.home-v2 .hv2-student-small a {
   color: var(--hv2-navy);
   text-decoration: underline;
   text-underline-offset: 2px;
}

/* Trip planner: purple accent; app icon beside the headline (a big icon
   tile replaces it on tablet, where the card is wide) */
.home-v2 .hv2-trip-icon-sm {
   display: block;
   flex: 0 0 56px;
   width: 56px;
   height: 56px;
   border-radius: 14px;
   box-shadow: 0 8px 20px rgba(91, 63, 168, 0.25);
}

.home-v2 .hv2-trip-tile {
   display: none;
}

.home-v2 .hv2-badge-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px 12px;
}

.home-v2 .hv2-badge-row a {
   display: block;
   line-height: 0;
}

.home-v2 .hv2-badge-apple {
   height: 44px;
   width: auto;
}

/* Google's badge PNG carries transparent padding (see .hv2-app-badges). */
.home-v2 .hv2-badge-row .hv2-badge-google {
   height: 64px;
   width: auto;
   margin: -10px -9px;
}

.home-v2 .hv2-badge-note {
   font-size: 13px;
   color: var(--hv2-grey500);
}

/* Affiliate: tinted stat panel */
.home-v2 .hv2-aff-stat {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 24px 20px;
   border-radius: 18px;
   background: var(--hv2-neutral);
   border: 1px solid var(--hv2-neutral-border);
   text-align: center;
}

.home-v2 .hv2-aff-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: #fff;
   color: var(--hv2-slate);
   font-size: 28px;
   box-shadow: 0 6px 16px rgba(20, 24, 58, 0.10);
}

.home-v2 .hv2-aff-figure {
   margin-top: 12px;
   font-size: 40px;
   font-weight: 700;
   line-height: 1;
   color: var(--hv2-navy);
}

.home-v2 .hv2-aff-label {
   margin-top: 8px;
   max-width: 220px;
   font-size: 14px;
   line-height: 1.45;
   color: var(--hv2-grey600);
}

@media (max-width: 479px) {
   .home-v2 .hv2-checks {
      grid-template-columns: 1fr;
   }
}

/* Tablet: one card per row, copy left and the tinted panel right. */
@media (min-width: 768px) {
   .home-v2 .hv2-lcard {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 36%;
      grid-template-areas: "body side" "actions side";
      grid-template-rows: auto 1fr;
      gap: 20px 40px;
      padding: 36px 40px;
   }

   .home-v2 .hv2-lcard-body {
      grid-area: body;
   }

   .home-v2 .hv2-lcard-side {
      grid-area: side;
      align-self: center;
   }

   .home-v2 .hv2-lcard-actions {
      grid-area: actions;
   }

   .home-v2 .hv2-lcard-title {
      font-size: 32px;
   }

   .home-v2 .hv2-lcard-text {
      font-size: 17px;
   }

   .home-v2 .hv2-roam-fact,
   .home-v2 .hv2-student-form,
   .home-v2 .hv2-aff-stat {
      padding: 28px 26px;
   }

   .home-v2 .hv2-aff-stat {
      align-self: stretch;
   }

   .home-v2 .hv2-roam-fact-figure {
      font-size: 34px;
   }

   .home-v2 .hv2-trip-icon-sm {
      display: none;
   }

   .home-v2 .hv2-trip-tile {
      display: flex;
      align-self: stretch;
      align-items: center;
      justify-content: center;
      min-height: 220px;
      border-radius: 18px;
      background: linear-gradient(135deg, #F4EEFC, #FBEFF7);
   }

   .home-v2 .hv2-trip-tile img {
      width: 140px;
      height: 140px;
      border-radius: 32px;
      box-shadow: 0 16px 36px rgba(91, 63, 168, 0.28);
   }
}

/* Phone/tablet: the paired cards stack, so space them apart. */
@media (max-width: 959px) {
   .home-v2 .hv2-pair > * + * {
      margin-top: 20px;
   }
}

/* Desktop: pairs of equal-height compact cards, panel under the copy and
   the call to action pinned to the bottom so buttons line up per row. */
@media (min-width: 960px) {
   .home-v2 .hv2-pair {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      gap: 24px;
      align-items: stretch;
   }

   .home-v2 .hv2-pair .hv2-lcard {
      display: flex;
      flex-direction: column;
      gap: 20px;
      height: 100%;
      padding: 32px;
   }

   .home-v2 .hv2-pair .hv2-lcard-side {
      align-self: stretch;
      width: 100%;
   }

   .home-v2 .hv2-pair .hv2-lcard-actions {
      margin-top: auto;
   }

   /* The student card's form is its call to action. */
   .home-v2 .hv2-pair .hv2-student-form {
      margin-top: auto;
   }

   .home-v2 .hv2-pair .hv2-lcard-title {
      font-size: 26px;
   }

   .home-v2 .hv2-pair .hv2-lcard-text {
      font-size: 15.5px;
   }

   .home-v2 .hv2-pair .hv2-roam-fact,
   .home-v2 .hv2-pair .hv2-student-form,
   .home-v2 .hv2-pair .hv2-aff-stat {
      padding: 20px 22px;
   }

   .home-v2 .hv2-pair .hv2-roam-fact-figure {
      font-size: 32px;
   }

   .home-v2 .hv2-pair .hv2-aff-stat {
      flex-direction: row;
      gap: 16px;
      text-align: left;
   }

   .home-v2 .hv2-pair .hv2-aff-icon {
      flex: 0 0 56px;
      width: 56px;
      height: 56px;
      font-size: 24px;
   }

   .home-v2 .hv2-pair .hv2-aff-figure {
      margin-top: 0;
      font-size: 34px;
   }

   .home-v2 .hv2-pair .hv2-aff-label {
      margin-top: 0;
   }

   .home-v2 .hv2-pair .hv2-trip-icon-sm {
      display: block;
   }

   .home-v2 .hv2-pair .hv2-trip-tile {
      display: none;
   }
}

/* Narrow pair cards: the student button drops under the input. */
@media (min-width: 960px) and (max-width: 1099px) {
   .home-v2 .hv2-pair .hv2-student-row {
      flex-direction: column;
   }

   .home-v2 .hv2-pair .hv2-student-row .hv2-pill-btn {
      width: 100%;
   }
}

@media (prefers-reduced-motion: reduce) {
   .home-v2 .hv2-pill-btn,
   .home-v2 .hv2-roam-logos img {
      transition: none;
   }
}

/* Grown-up type: 700 headlines with slightly tighter tracking. */
.home-v2 .hv2-title,
.home-v2 .hv2-lcard-title,
.home-v2 .hv2-season-title,
.home-v2 h2.uk-heading-line,
.home-v2 .hv2-section-title {
   font-weight: 700;
   letter-spacing: -0.01em;
}

.home-v2 .hv2-season-sub,
.home-v2 .hv2-roam-fact-text,
.home-v2 .hv2-student-form-text,
.home-v2 .hv2-aff-label,
.home-v2 .hv2-seo p,
.home-v2 .uk-section p.uk-text-center.fontl {
   color: var(--hv2-body);
}