/**
 * Flighta homepage — sections below the services bar (Figma "Filghta" › Home-Flight, 1440 frame).
 * Flights, Private Jets, Hotels, Packages, Meet & Greet, Transportation, Visa, Insurance, FAQ, CTA.
 * Everything is namespaced `fh-` and only loaded by b2c/home.blade.php.
 */
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap");

:root {
    --fh-maroon: #5C1A2A;
    --fh-btn: #541725;
    --fh-btn-hover: #3F101B;
    --fh-orange: #E8820C;
    --fh-gold: #F2AE58;
    --fh-navy: #1C3D6E;
    --fh-ink: #101828;
    --fh-body: #364153;
    --fh-muted: #6A7282;
    --fh-faint: #99A1AF;
    --fh-line: #F3F4F6;
    --fh-line-2: #E5E7EB;
    --fh-tint: #FDF0E8;
    --fh-green: #00A63E;
    --fh-font: "Titillium Web", "Cairo", "Segoe UI", sans-serif;
    --fh-radius: 16px;
    --fh-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
}

/* ── Section shell ───────────────────────────────────────── */
.fh-section {
    position: relative;
    z-index: 1;
    padding: 60px 24px 20px;
    font-family: var(--fh-font);
    color: var(--fh-ink);
}

.fh-section *,
.fh-section *::before,
.fh-section *::after,
.fh-cta *,
.fh-cta *::before,
.fh-cta *::after {
    box-sizing: border-box;
}

.fh-section--first { padding-top: 30px; padding-bottom: 0px; }
.fh-section--white { background: #FFFFFF; }
.fh-section--gray  { background: #F9FAFB; }
.fh-section--peach { background: #FDF4EE; }
.fh-section--maroon {
    padding-top: 64px;
    padding-bottom: 64.5px;
    background: linear-gradient(-135deg, #481320 0%, #561A28 100%);
    color: #FFFFFF;
}

.fh-container {
    max-width: 1200px;
    margin: 0 auto;
}

.fh-section h2, .fh-section h3, .fh-section p, .fh-section ul, .fh-section ol {
    margin: 0;
    padding: 0;
}

.fh-section ul, .fh-section ol { list-style: none; }

/* ── Section header ──────────────────────────────────────── */
.fh-head {
    display: flex;
    align-items: flex-start;
    gap: 12.5px;
    margin-bottom: 41px;
}

.fh-head__icon {
    flex: 0 0 35.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35.5px;
    height: 36px;
    border-radius: 9px;
    background: var(--fh-tint);
    font-size: 19px;
    line-height: 1;
}

.fh-head--no-tile { margin-bottom: 44.5px; }
.fh-head--no-tile .fh-head__icon {
    justify-content: flex-start;
    background: transparent;
    font-size: 23px;
}

.fh-head__text { padding-top: 2.4px; }

.fh-head__title {
    font-family: var(--fh-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    color: var(--fh-ink);
}

.fh-head__subtitle {
    margin-top: 8.4px !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--fh-muted);
}

.fh-head__bar {
    display: block;
    width: 48.5px;
    height: 4px;
    margin-top: 8.2px;
    border-radius: 2px;
    background: var(--fh-orange);
}

/* dark header (Meet & Greet): title centred on the icon, bar under the icon */
.fh-head--dark { position: relative; align-items: center; margin-bottom: 0; padding-bottom: 19.5px; }
.fh-head--dark .fh-head__icon { background: rgba(255, 255, 255, 0.12); }
.fh-head--dark .fh-head__text { padding-top: 0; }
.fh-head--dark .fh-head__title { color: #FFFFFF; }
.fh-head--dark .fh-head__bar { position: absolute; right: 0; bottom: 0; margin: 0; }

/* ── Shared bits ─────────────────────────────────────────── */
.fh-grid { display: grid; gap: 26.5px; }
.fh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21.5px 21px; }
.fh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fh-grid--top { align-items: stretch; }

.fh-card {
    background: #FFFFFF;
    border: 1px solid var(--fh-line);
    border-radius: var(--fh-radius);
    box-shadow: var(--fh-shadow);
    overflow: hidden;
}

.fh-card__body { padding: 16px; }

.fh-media {
    /* display:block because this is used on an <a> as well as a <div> - the package cards link
       through to the package. An anchor is inline by default, and `height` (.fh-media--pkg sets
       207px) has no effect on an inline box, so the whole picture and its caption collapsed to
       nothing. The colour/decoration resets stop the caption inheriting link styling. */
    display: block;
    color: inherit;
    text-decoration: none;
    position: relative;
    background-color: #D1D5DB;
    background-size: cover;
    background-position: center;
}

.fh-media--empty { background-image: linear-gradient(-180deg, #FFFFFF 0%, #9CA3AF 100%); }

.fh-media__caption {
    position: absolute;
    right: 12.5px;
    left: 12.5px;
    bottom: 15px;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.fh-media__caption h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #FFFFFF;
}

.fh-media__caption span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.9);
}

.fh-media--jet::after,
.fh-media--pkg::after {
    content: "";
    position: absolute;
    inset: 40% 0 0 0;
    background: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
}

.fh-media__caption, .fh-badge { z-index: 1; }

.fh-badge {
    position: absolute;
    top: 12px;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.fh-badge--right { left: 11px; }
.fh-badge--left  { right: 12px; }
.fh-badge--gold   { background: var(--fh-gold); color: #3B1B0B; }
.fh-badge--orange { background: var(--fh-orange); color: #FFFFFF; }
.fh-badge--maroon { background: var(--fh-maroon); color: #FFFFFF; }
.fh-badge--white  { background: #FFFFFF; color: var(--fh-ink); height: 23px; padding: 0 9px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

.fh-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fh-row--end { align-items: flex-end; }

.fh-section strong, .fh-section b { font-weight: 700; }

.fh-price {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: var(--fh-maroon);
    white-space: nowrap;
}

.fh-price--sm { font-size: 14px; line-height: 18px; }
.fh-price--lg { font-size: 18px; line-height: 22px; }
.fh-price--flight { font-size: 18px; line-height: 22px; }

.fh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    font-family: var(--fh-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* static placeholders: keep the design look, just not clickable */
.fh-btn:disabled { opacity: 1; cursor: default; }

.fh-btn--maroon { background: var(--fh-btn); color: #FFFFFF !important; }
.fh-btn--maroon:not(:disabled):hover { background: var(--fh-btn-hover); }
.fh-btn--dark   { background: #4A1522; color: #FFFFFF !important; }
.fh-btn--dark:hover { background: #3A0F1A; }
.fh-btn--gold   { background: var(--fh-gold); color: #3D0F1C !important; }
.fh-btn--gold:hover { background: #EDA045; }
.fh-btn--ghost  { background: transparent; color: #FFFFFF !important; border: 1.5px solid #FFFFFF; }
.fh-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.fh-btn--block  { display: flex; width: 100%; }

.fh-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 267px;
    height: 41px;
    padding: 0 24px;
    border: 1.5px solid var(--fh-maroon);
    border-radius: 10px;
    background: #FFFFFF;
    font-family: var(--fh-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--fh-maroon) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.fh-btn-outline:hover { background: var(--fh-maroon); color: #FFFFFF !important; }

.fh-center { display: flex; justify-content: center; margin-top: 24px; }
.fh-center--tight { margin-top: 17.5px; }

.fh-note {
    margin-top: 31px !important;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: var(--fh-muted);
}

/* ── Flights ─────────────────────────────────────────────── */
/* ── Featured Fares — vertical, image-on-top card (mirrors the Private Jets
      card anatomy: media → body → price + CTA pinned to the foot). ───────── */
.fh-ffcard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.fh-ffcard:hover,
.fh-ffcard:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
}

.fh-flight--extra { display: none; }
.fh-flights.is-expanded .fh-flight--extra { display: flex; }

.fh-ffcard__media {
    position: relative;
    /* Reserves the space before the image arrives, so the grid does not jump. */
    aspect-ratio: 16 / 9;
    background: var(--fh-line);
    overflow: hidden;
}

.fh-ffcard__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.fh-ffcard:hover .fh-ffcard__img { transform: scale(1.04); }

.fh-ffcard__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;          /* every price + CTA lands on the same line across the row */
    gap: 9px;
    padding: 15px 18px 18px;
}

.fh-ffcard__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 16px;
}

.fh-tag {
    display: inline-flex;
    align-items: center;
    height: 19.5px;
    padding: 0 8px;
    border-radius: 4px;
    background: var(--fh-gold);
    font-weight: 700;
    color: #3B1B0B;
}

.fh-ffcard__date {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--fh-line);
    font-weight: 600;
    color: var(--fh-body);
}

.fh-ffcard__stops { font-weight: 700; color: var(--fh-green); }

.fh-ffcard__route {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--fh-ink);
}

.fh-ffcard__meta {
    margin: -3px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--fh-muted);
}

.fh-ffcard__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;        /* pin price + CTA to the bottom; all cards align */
    padding-top: 6px;
}

.fh-ffcard__price {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
}

.fh-ffcard__price small {
    margin-top: 3px;
    font-size: 12px;
    line-height: 16px;
    color: var(--fh-faint);
}

.fh-ffcard__cta {
    flex: 0 0 auto;
    padding: 11px 24px;
    text-decoration: none;
    white-space: nowrap;
}

.fh-ffcard__cta:focus-visible {
    outline: 3px solid var(--fh-gold);
    outline-offset: 2px;
}

/* ── Low Cost Reservation (Figma: 1440 × 583, card 1322 × 518, 64px from the top) ── */
.fh-lowcost {
    position: relative;
    z-index: 1;
    padding: 64px 24px 1px;
    background: #FFFCF7;
    font-family: var(--fh-font);
}

.fh-lowcost__card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1322px;
    min-height: 518px;
    margin: 0 auto;
    padding: 48px 32px;
    border-radius: 45px;
    background-color: #2D3A45;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    text-align: center;
}

.fh-lowcost__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(18, 24, 32, 0.45);
}

.fh-lowcost__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 780px;
}

.fh-lowcost__title {
    margin: 0;
    font-family: var(--fh-font);
    font-size: 70px;
    font-weight: 700;
    line-height: 80px;
    color: #FFFFFF;
}

.fh-lowcost__text {
    max-width: 760px;
    margin: 50px 0 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: #FFFFFF;
}

.fh-lowcost__btn {
    width: 404px;
    max-width: 100%;
    height: 59px;
    margin-top: 40px;
    border-radius: 999px;
    font-size: 20px;
}

/* ── Private Jets ────────────────────────────────────────── */
.fh-jet { display: flex; flex-direction: column; }
.fh-media--jet { height: 175.6px; }
.fh-jet .fh-card__body { padding: 14.5px 16px 7px; }

.fh-jet__meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    line-height: 16px;
    color: var(--fh-muted);
}

.fh-jet .fh-row { margin-top: 12.5px; }
.fh-btn--jet { width: 180px; height: 37.6px; }

.fh-quote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 100px;
    margin-top: 32.6px;
    padding: 20px 24px;
    border-radius: var(--fh-radius);
    background: var(--fh-gold);
}

.fh-quote h3 { font-size: 20px; font-weight: 700; line-height: 26px; color: #1F1308; }
.fh-quote p  { margin-top: 4px !important; font-size: 14px; line-height: 20px; color: #2B1B0E; }
.fh-btn--quote { flex: 0 0 auto; min-width: 171px; height: 43px; border-radius: 10px; font-size: 15px; }

/* ── Hotels (row runs past the container, like the design) ── */
/* 100vw includes the vertical scrollbar, so clip the bleed or the whole page scrolls sideways */
#hotels { overflow-x: clip; }

.fh-rail {
    display: flex;
    gap: 17px;
    margin-left: calc(50% - 50vw);
    padding: 2px 0 12px 24px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.fh-rail::-webkit-scrollbar { display: none; }

.fh-hotel {
    flex: 0 0 311px;
    scroll-snap-align: start;
}

.fh-media--hotel { height: 175.7px; }
.fh-hotel .fh-card__body { padding: 19px 16px 20px; }

.fh-hotel__name { font-size: 14px; font-weight: 700; line-height: 18px; color: var(--fh-ink); }
.fh-hotel__city { display: block; margin-top: 3px; font-size: 12px; line-height: 16px; color: var(--fh-muted); }
.fh-hotel__rating { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--fh-muted); }

.fh-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 33px;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--fh-gold);
    font-weight: 700;
    color: var(--fh-ink);
}

.fh-hotel .fh-row { margin-top: 16px; }
.fh-hotel__price small { display: block; font-size: 12px; line-height: 16px; color: var(--fh-faint); }
.fh-hotel__price small:first-child { font-size: 11px; }
.fh-hotel__price .fh-price { margin: 5px 0 6px; }
.fh-btn--hotel { width: 186px; height: 32.5px; margin-bottom: 15px; border-radius: 6px; }

/* ── Packages ────────────────────────────────────────────── */
.fh-media--pkg { height: 207px; }
.fh-pkg .fh-card__body { padding: 16.8px 16px 20.6px; }

.fh-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.fh-chips li {
    display: inline-flex;
    align-items: center;
    height: 22.5px;
    padding: 0 9px;
    border: 1px solid var(--fh-line-2);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    color: var(--fh-body);
}

.fh-pkg__foot { margin-top: 11px; }
.fh-was { display: block; font-size: 12px; line-height: 16px; color: var(--fh-faint); }
.fh-was + .fh-price { margin-top: 6px; }
.fh-btn--pkg { flex: 0 0 200px; height: 39.6px; }

/* ── Meet & Greet ────────────────────────────────────────── */
.fh-meet {
    display: grid;
    grid-template-columns: minmax(0, 555px) minmax(0, 575px);
    justify-content: space-between;
    align-items: start;
    gap: 48px;
}

.fh-meet__lead {
    margin-top: 24px !important;
    font-size: 14px;
    line-height: 23px;
    color: rgba(255, 255, 255, 0.92);
}

.fh-meet__list { margin-top: 30px !important; }

.fh-meet__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.88);
}

.fh-meet__list li + li { margin-top: 20px; }
.fh-meet__list li span { flex: 0 0 18px; font-size: 16px; line-height: 1; text-align: center; }

.fh-btn--meet { width: 295px; height: 44px; margin-top: 38px; border-radius: 10px; font-size: 15px; }

.fh-meet__visual { position: relative; margin-top: 56px; }

.fh-meet__photo {
    height: 319px;
    border-radius: var(--fh-radius);
    background-size: cover;
    background-position: center;
}

.fh-stat {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 79px;
    padding: 0 18px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.fh-stat strong { font-size: 22px; font-weight: 700; line-height: 26px; white-space: nowrap; }
.fh-stat span   { margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--fh-muted); white-space: nowrap; }
.fh-stat--top    { top: -20px; left: -21px; min-width: 124.6px; }
.fh-stat--top strong { color: var(--fh-orange); }
.fh-stat--bottom { bottom: -20px; right: -19.4px; min-width: 131.8px; }
.fh-stat--bottom strong { color: var(--fh-maroon); }

/* ── Transportation ──────────────────────────────────────── */
.fh-media--ride { height: 175.7px; }
.fh-ride .fh-card__body { display: flex; flex-direction: column; padding: 24px 20px 20px; }
.fh-ride__name { font-size: 16px; font-weight: 700; line-height: 20px; color: var(--fh-ink); }
.fh-ride__desc { margin-top: 10px !important; font-size: 14px; line-height: 23px; color: var(--fh-muted); }

/* Seating replaces the invented "From EGP 450" line the static cards carried; it sits in the same
   slot so the card keeps its rhythm, and the Request button stays pinned to the bottom. */
.fh-ride__cap {
    display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 16px;
    padding: 5px 11px; border-radius: 999px;
    background: var(--fh-soft, #fdf3ec); border: 1px solid var(--fh-line, #f0e0d5);
    font-size: 13px; font-weight: 600; color: var(--fh-ink, #2d2620);
}
.fh-ride .fh-card__body { display: flex; flex-direction: column; }
.fh-ride .fh-btn--block { margin-top: auto; }
.fh-ride .fh-price { margin-top: 8px; }
.fh-ride .fh-btn--block { height: 40px; margin-top: 15.5px; }

/* ── Visa ────────────────────────────────────────────────── */
.fh-visa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 583px);
    gap: 40px;
}

.fh-subhead { font-size: 16px; font-weight: 700; line-height: 20px; color: var(--fh-ink); }

.fh-visa__steps ol { margin-top: 20px !important; }
.fh-visa__steps li { display: flex; align-items: flex-start; gap: 16px; }
.fh-visa__steps li + li { margin-top: 16px; }

.fh-step {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 8px;
    background: var(--fh-tint);
    font-size: 14px;
    font-weight: 700;
    color: var(--fh-maroon);
}

.fh-visa__steps strong { display: block; margin-top: 1px; font-size: 14px; font-weight: 700; line-height: 18px; color: var(--fh-ink); }
.fh-visa__steps p { margin-top: 3px !important; font-size: 12px; line-height: 16px; color: var(--fh-muted); }
.fh-btn--visa { width: 298px; height: 48px; margin-top: 32px; border-radius: 12px; font-size: 16px; }

.fh-visa__list ul { margin-top: 20px !important; }

.fh-visa__list li {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 69px;
    padding: 12px 18px;
    border: 1px solid var(--fh-line);
    border-radius: 12px;
    background: #F9FAFB;
}

.fh-visa__list li + li { margin-top: 9px; }
.fh-visa__flag { flex: 0 0 24px; display: block; width: 24px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.fh-visa__country { flex: 1 1 auto; min-width: 0; }
.fh-visa__country strong { display: block; font-size: 14px; font-weight: 700; line-height: 18px; color: var(--fh-ink); }
.fh-visa__country span { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--fh-muted); }
.fh-visa__price { text-align: left; }
.fh-visa__price strong { display: block; font-size: 14px; font-weight: 700; line-height: 18px; color: var(--fh-maroon); }
.fh-visa__price a { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #155DFC; text-decoration: none; }
.fh-visa__price a:hover { text-decoration: underline; }

/* ── Travel Insurance ────────────────────────────────────── */
.fh-plan {
    --tone: var(--fh-orange);
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--tone);
    border-radius: var(--fh-radius);
    background: #FFFFFF;
    overflow: hidden;
}

.fh-plan--maroon { --tone: var(--fh-maroon); }
.fh-plan--navy   { --tone: var(--fh-navy); }

.fh-plan__head { min-height: 108px; padding: 23px 19px 16px; background: var(--tone); color: #FFFFFF; }
.fh-plan__head h3 { font-size: 16px; font-weight: 700; line-height: 20px; color: #FFFFFF; }
.fh-plan__head p { margin-top: 10px !important; font-size: 13px; line-height: 1; color: rgba(255, 255, 255, 0.85); }
.fh-plan__head p strong { font-size: 26px; font-weight: 700; color: #FFFFFF; }

.fh-plan__body { padding: 18px 19px 24px; }
.fh-plan__body li { position: relative; padding-right: 20px; font-size: 14px; line-height: 20px; color: var(--fh-body); }
.fh-plan__body li + li { margin-top: 12px; }
.fh-plan__body li::before { content: "\2713"; position: absolute; right: 0; top: 0; font-size: 15px; font-weight: 700; color: #00C950; }
.fh-plan__btn { height: 39px; margin-top: 22px; border-radius: 10px; background: var(--tone); color: #FFFFFF !important; font-size: 14px; }

/* ── FAQ ─────────────────────────────────────────────────── */
.fh-faq { padding-top: 64px; padding-bottom: 64px; }

.fh-faq__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.fh-faq__col { display: flex; flex-direction: column; gap: 24px; }

.fh-faq__item {
    position: relative;
    background: #FFFFFF;
    box-shadow: 0 6px 24px rgba(16, 24, 40, 0.10);
    overflow: hidden;
}

.fh-faq__q { margin: 0; }

.fh-faq__q button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 76.6px;
    margin: 0;
    padding: 12px 35px;
    border: 0;
    background: transparent;
    font-family: "Roboto", "Segoe UI", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    text-align: right;
    color: #000000;
    box-shadow: none;
    cursor: pointer;
}

.fh-faq__q button:focus { outline: none; }

.fh-faq__q button::after {
    content: "\2212";
    flex: 0 0 auto;
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
}

.fh-faq__q button.collapsed::after { content: "+"; }

.fh-faq__a {
    padding: 0 35px 26px 110px;
    font-family: "Roboto", "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 29px;
    color: #555555;
}

.fh-faq__a p { margin: 0; }

/* orange corner on the open item */
.fh-faq__item:has(.collapse.show)::after,
.fh-faq__item:has(.collapsing)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 57px;
    height: 74px;
    background: var(--fh-gold);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

/* ── Final CTA ───────────────────────────────────────────── */
.fh-cta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 374.5px;
    padding: 60px 24px;
    background-color: #1B2A28;
    background-size: cover;
    background-position: center;
    font-family: var(--fh-font);
    text-align: center;
}

.fh-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
}

.fh-cta__inner { position: relative; max-width: 780px; }

.fh-cta__kicker {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--fh-orange);
}

.fh-cta__title {
    margin: 13px 0 0;
    font-family: var(--fh-font);
    font-size: 36px;
    font-weight: 700;
    line-height: 44px;
    color: #FFFFFF;
}

.fh-cta__lead {
    max-width: 560px;
    margin: 12px auto 0;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.9);
}

.fh-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12.5px;
    margin-top: 32px;
}

.fh-btn--cta { height: 43.5px; min-width: 145px; padding: 0 24px; border-radius: 10px; font-size: 15px; }
.fh-btn--ghost.fh-btn--cta { min-width: 184px; height: 45px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1199px) {
    .fh-grid--3 { gap: 20px; }
    .fh-meet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
    .fh-btn--pkg { flex-basis: 150px; }
    .fh-btn--jet { width: 150px; }
}

@media (max-width: 991px) {
    .fh-section { padding-top: 64px; padding-bottom: 64px; }
    .fh-lowcost__title { font-size: 52px; line-height: 60px; }
    .fh-grid--2 { grid-template-columns: minmax(0, 1fr); }
    .fh-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fh-meet, .fh-visa { grid-template-columns: minmax(0, 1fr); }
    .fh-meet__visual { margin: 24px 20px 20px; }
    .fh-faq__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .fh-section, .fh-section--first, .fh-section--maroon { padding: 48px 16px; }
    .fh-lowcost { padding: 32px 16px 0; }
    .fh-lowcost__card { min-height: 0; padding: 48px 20px; border-radius: 24px; }
    .fh-lowcost__title { font-size: 36px; line-height: 42px; }
    .fh-lowcost__text { margin-top: 20px; font-size: 15px; line-height: 24px; }
    .fh-lowcost__btn { width: 100%; height: 50px; margin-top: 28px; font-size: 16px; }
    .fh-head { margin-bottom: 28px; }
    .fh-head__title { font-size: 22px; line-height: 28px; }
    .fh-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }

    .fh-ffcard__foot { flex-direction: column; align-items: stretch; gap: 10px; }
    .fh-ffcard__cta { width: 100%; text-align: center; }

    .fh-row { flex-wrap: wrap; }
    .fh-btn--jet, .fh-btn--pkg { flex: 1 1 100%; width: 100%; }
    .fh-quote { flex-direction: column; align-items: flex-start; }
    .fh-btn--quote { width: 100%; }

    .fh-rail { margin-left: -16px; padding-left: 16px; }
    .fh-hotel { flex-basis: 270px; }

    /* Grids that become a swipeable row on phones, like Hotels */
    .fh-grid.fh-slide-mobile {
        display: flex;
        gap: 17px;
        margin-left: -16px;
        padding: 2px 0 12px 16px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .fh-grid.fh-slide-mobile::-webkit-scrollbar { display: none; }

    .fh-grid.fh-slide-mobile > * {
        flex: 0 0 270px;
        scroll-snap-align: start;
    }
    .fh-hotel .fh-row { flex-direction: column; align-items: stretch; }

    .fh-btn-outline { min-width: 0; width: 100%; }
    .fh-btn--meet, .fh-btn--visa { width: 100%; }
    .fh-meet__visual { margin: 32px 12px 24px; }
    .fh-meet__photo { height: 220px; }
    .fh-stat { height: 68px; padding: 0 14px; }
    .fh-stat strong { font-size: 19px; }
    .fh-stat--top { left: -12px; }
    .fh-stat--bottom { right: -12px; }

    .fh-visa__list li { padding: 12px 14px; }

    .fh-faq__q button { min-height: 64px; padding: 12px 20px; font-size: 16px; }
    .fh-faq__a { padding: 0 20px 22px 64px; font-size: 14px; line-height: 24px; }

    .fh-cta { padding: 56px 16px; }
    .fh-cta__title { font-size: 28px; line-height: 34px; }
    .fh-cta__lead { font-size: 15px; }
    .fh-btn--cta, .fh-btn--ghost.fh-btn--cta { flex: 1 1 100%; }
}

/* ===========================================================================
   Popular routes (Flights section)
   ---------------------------------------------------------------------------
   Horizontal card: thumbnail, route, action — the same shape the priced flight
   cards use, so the two blocks read as one family.

   Deliberately NOT priced. A recommendation is not a quote, so the slot the
   price used to occupy holds the CTA instead.

   Built on the existing fh- tokens and .fh-card.
   =========================================================================== */

.fh-routes { align-items: stretch; }

.fh-route {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fh-route:hover,
.fh-route:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 24, 40, .10);
}

/* ---- thumbnail ---- */

.fh-route__thumb {
    flex: 0 0 104px;
    width: 104px;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--fh-line);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fh-route__thumb img { display: block; }

/* A photo fills the tile; a flag is contained so no country gets cropped in half. */
.fh-route__thumb--photo img { width: 100%; height: 100%; object-fit: cover; }

.fh-route__thumb--flag {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--fh-line-2);
}
.fh-route__thumb--flag img {
    width: 78%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .18);
}

/* Last resort when a destination has neither image nor a resolvable country. */
.fh-route__code {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--fh-faint);
}

/* ---- middle ---- */

.fh-route__info {
    flex: 1 1 auto;
    min-width: 0;          /* long city names must ellipsis, not push the CTA off the card */
}

.fh-route__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 5px;
}

/* Reuses .fh-tag's shape; softer, because this is context rather than a brand. */
.fh-tag--soft {
    background: var(--fh-tint);
    color: var(--fh-maroon);
    font-weight: 600;
}

.fh-route__cc {
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--fh-line);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--fh-muted);
}

.fh-route__title {
    margin: 0 0 3px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--fh-ink);
    overflow-wrap: anywhere;
}

.fh-route__arrow {
    margin: 0 2px;
    color: var(--fh-faint);
    font-weight: 400;
}

.fh-route__meta {
    display: block;
    font-size: 12.5px;
    color: var(--fh-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- action ---- */

.fh-route__act {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.fh-route__cta {
    /* .fh-btn ships `padding: 0 16px` with no height, so the button was only as tall as its
       text. Padding on both axes gives it a proper hit area and matches the weight of the
       Book button on the priced cards. */
    padding: 13px 26px;
    white-space: nowrap;
    text-decoration: none;
}

.fh-route__cta:focus-visible {
    outline: 3px solid var(--fh-gold);
    outline-offset: 2px;
}

/* ---- empty state ---- */

.fh-routes-empty {
    padding: 40px 20px;
    border: 1px dashed var(--fh-line-2);
    border-radius: var(--fh-radius);
    background: #fff;
    text-align: center;
}

.fh-routes-empty p { margin: 0 0 16px; font-size: 15px; color: var(--fh-muted); }

/* ---- responsive ---- */

@media (max-width: 1180px) {
    /* The CTA wraps under the route before the title starts breaking mid-word. */
    .fh-route { flex-wrap: wrap; }
    .fh-route__info { flex: 1 1 200px; }
    .fh-route__act { flex: 1 1 100%; }
    .fh-route__cta { width: 100%; text-align: center; }
}

@media (max-width: 680px) {
    .fh-grid--2.fh-routes { grid-template-columns: 1fr; }
    .fh-route__thumb { flex-basis: 84px; width: 84px; height: 72px; }
    .fh-route__title { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .fh-route { transition: none; }
    .fh-route:hover { transform: none; }
}

/* ===========================================================================
   Private jet routes
   ---------------------------------------------------------------------------
   Charter routes departing the visitor's market. Three across, so a limit of
   6 or 9 fills the grid evenly (config: destinations.jets.route_limit).

   No price: charter is quoted per itinerary, so the card sells the route and
   the CTA opens the charter form with it already filled.
   =========================================================================== */

.fh-jetroute {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.fh-jetroute:hover,
.fh-jetroute:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
}

.fh-jetroute__media {
    position: relative;
    /* Reserves the space before the image arrives, so the grid does not jump. */
    aspect-ratio: 16 / 9;
    background: var(--fh-line);
    overflow: hidden;
}

.fh-jetroute__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.fh-jetroute:hover .fh-jetroute__img { transform: scale(1.04); }

.fh-jetroute__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;          /* every CTA lands on the same line across the row */
    gap: 12px;
    padding: 16px 18px 18px;
}

.fh-jetroute__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--fh-ink);
}

.fh-jetroute__code {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--fh-tint);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--fh-maroon);
    vertical-align: 1px;
}

.fh-jetroute__arrow { margin: 0 4px; color: var(--fh-faint); font-weight: 400; }

.fh-jetroute__cta {
    margin-top: auto;
    align-self: flex-start;
    padding: 12px 24px;
    text-decoration: none;
}

.fh-jetroute__cta:focus-visible {
    outline: 3px solid var(--fh-gold);
    outline-offset: 2px;
}

@media (max-width: 1024px) {
    .fh-grid--3.fh-jet-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .fh-grid--3.fh-jet-routes { grid-template-columns: 1fr; }
    .fh-jetroute__cta { align-self: stretch; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .fh-jetroute, .fh-jetroute__img,
    .fh-ffcard, .fh-ffcard__img { transition: none; }
    .fh-jetroute:hover, .fh-ffcard:hover { transform: none; }
    .fh-jetroute:hover .fh-jetroute__img,
    .fh-ffcard:hover .fh-ffcard__img { transform: none; }
}

/* Cabin + party size under the route. */
.fh-jetroute__spec {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    font-size: 13.5px;
    color: var(--fh-muted);
}

.fh-jetroute__cabin {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--fh-line);
    font-weight: 700;
    color: var(--fh-body);
}

.fh-jetroute__dot { color: var(--fh-faint); }

/* "suggested" marks a cabin we propose rather than one that has flown the route. */
.fh-jetroute__hint {
    font-size: 11px;
    font-style: italic;
    color: var(--fh-faint);
}

/* Seating range reads as the primary fact; "flown with N" is the supporting one. */
.fh-jetroute__pax { font-weight: 600; color: var(--fh-body); }

.fh-jetroute__flown {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(0, 166, 62, .10);
    font-size: 11px;
    font-weight: 700;
    color: var(--fh-green);
}

/* Hotel star rating — real, unlike the invented "9.2 / 1,240 reviews" it replaces. */
.fh-hotel__stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 4px 0 2px;
    font-size: 12px;
}

.fh-hotel__starnum {
    margin-inline-start: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fh-muted);
}

/* The CTA sits alone now that the fabricated nightly rate is gone. */
/* Matches .fh-route__cta so the Hotels and Flights "Check Availability" buttons read as one
   control. The hardcoded 186x32.5px box this class used to carry came from the static design and
   fought the padding - a 32.5px height with 13px of vertical padding clips its own label. */
.fh-btn--hotel {
    width: auto;
    height: auto;
    padding: 13px 26px;
    white-space: nowrap;
    text-decoration: none;
}

.fh-btn--hotel:focus-visible {
    outline: 3px solid var(--fh-gold);
    outline-offset: 2px;
}

/* Kept next to the rule it overrides: the mobile block further up the file now loses the cascade
   to the width:auto above it, since a media query adds no specificity. */
@media (max-width: 767px) {
    .fh-btn--hotel { width: 100%; margin-bottom: 0; text-align: center; }
}

/* Illustrated transport tile — used for the vehicle classes with no photograph of their own.
   Line art on the section's own peach, so a card without a picture still looks deliberate
   instead of repeating another card's photo. Replaced automatically the moment
   public/b2c/new_design/img/transport/<key>.jpg exists. */
.fh-media--drawn {
    background-color: #fbeee6;
    background-image: linear-gradient(-135deg, #fdf5ef 0%, #f6e3d6 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 42% auto;
    position: relative;
}
.fh-media--drawn::after {
    content: ''; position: absolute; inset: 0;
    background-repeat: no-repeat; background-position: center; background-size: 46% auto;
}
.fh-media--drawn[data-ride="sedan"]::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' fill='none' stroke='%238d5a3c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h4m48 0h4M6 22v-5l5-8a4 4 0 0 1 3.4-2h25.2a4 4 0 0 1 3.2 1.6L49 17l7 1.6a3 3 0 0 1 2 2.9V22'/%3E%3Cpath d='M6 22h52'/%3E%3Cpath d='M16 9v8M30 9v8'/%3E%3Ccircle cx='18' cy='23' r='4'/%3E%3Ccircle cx='46' cy='23' r='4'/%3E%3C/svg%3E");
}
.fh-media--drawn[data-ride="van"]::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' fill='none' stroke='%238d5a3c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 23V11a3 3 0 0 1 3-3h28l10 7h5a3 3 0 0 1 3 3v5'/%3E%3Cpath d='M5 23h49'/%3E%3Cpath d='M12 8v7M24 8v7M36 10v5'/%3E%3Cpath d='M5 15h41'/%3E%3Ccircle cx='17' cy='24' r='4'/%3E%3Ccircle cx='44' cy='24' r='4'/%3E%3C/svg%3E");
}
.fh-media--drawn[data-ride="minibus"]::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' fill='none' stroke='%238d5a3c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='6' width='49' height='18' rx='3'/%3E%3Cpath d='M5 13h49'/%3E%3Cpath d='M17 6v7M29 6v7M41 6v7'/%3E%3Cpath d='M9 19h6M44 19h6'/%3E%3Ccircle cx='17' cy='25' r='3.5'/%3E%3Ccircle cx='43' cy='25' r='3.5'/%3E%3C/svg%3E");
}

/* ===================================================================
   FORM — a reusable public form component.

   Added here rather than inline on a page: the insurance request form was the first public
   form on the fh- system and had nothing to use, so it rendered as raw browser defaults.
   Built entirely from the tokens above so it inherits the palette instead of restating it.
   =================================================================== */

.fh-formwrap {
    max-width: 880px;
    margin: 0 auto;
}

.fh-formcard {
    background: #fff;
    border: 1px solid var(--fh-line-2);
    border-radius: var(--fh-radius);
    box-shadow: var(--fh-shadow);
    padding: 28px 28px 32px;
}

@media (max-width: 575px) {
    .fh-formcard { padding: 20px 16px 24px; border-radius: 12px; }
}

/* Two- and three-up rows that collapse to one column on small screens. The gap matches
   .fh-grid so a form sits on the same rhythm as the cards above it. */
.fh-formrow {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .fh-formrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fh-formrow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* A dial code never needs the width of the number beside it. */
    .fh-formrow--phone { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); }
}

.fh-field { display: flex; flex-direction: column; min-width: 0; }

.fh-field__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--fh-body);
    margin-bottom: 6px;
}

.fh-field__req { color: var(--fh-orange); margin-right: 2px; }

.fh-field__hint { font-size: 12px; color: var(--fh-muted); margin-top: 6px; }

.fh-input,
.fh-select,
.fh-textarea {
    width: 100%;
    font-family: var(--fh-font);
    font-size: 15px;
    color: var(--fh-ink);
    background: #fff;
    border: 1px solid var(--fh-line-2);
    border-radius: 10px;
    padding: 11px 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.fh-textarea { resize: vertical; min-height: 96px; }

.fh-input::placeholder,
.fh-textarea::placeholder { color: var(--fh-faint); }

.fh-input:focus,
.fh-select:focus,
.fh-textarea:focus {
    outline: none;
    border-color: var(--fh-maroon);
    /* A visible focus ring, not just a colour change: colour alone is not an accessible
       focus indicator. */
    box-shadow: 0 0 0 3px rgba(92, 26, 42, 0.12);
}

.fh-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236A7282' d='M1.41 0 6 4.59 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 13px center;
    padding-left: 36px;
}

/* A plan chosen from a card upstream, echoed so the customer can see what they picked. */
.fh-formnote {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--fh-tint);
    border: 1px solid #F6DCC9;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 22px;
    font-size: 14px;
    color: var(--fh-body);
}

.fh-formnote strong { color: var(--fh-ink); }

.fh-formfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--fh-line);
}

.fh-formfoot__note { font-size: 13px; color: var(--fh-muted); margin: 0; }

/* Success and error panels, shaped like the cards rather than Bootstrap's alerts. */
.fh-note {
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 22px;
    border: 1px solid transparent;
}

.fh-note--ok    { background: #ECFDF3; border-color: #ABEFC6; color: #085D3A; }
.fh-note--error { background: #FEF3F2; border-color: #FECDCA; color: #912018; }
.fh-note h3     { font-size: 16px; margin: 0 0 4px; }
.fh-note p      { margin: 0; font-size: 14px; }
.fh-note ul     { margin: 6px 0 0; padding-right: 18px; font-size: 14px; }

.fh-note__ref {
    display: inline-block;
    font-weight: 700;
    background: #fff;
    border: 1px solid #ABEFC6;
    border-radius: 8px;
    padding: 2px 10px;
    margin: 0 2px;
}

/* A form's primary action. .fh-btn itself sets no height - the card buttons get theirs from
   .fh-btn--block - so an inline submit collapsed to a 13px pill. This is the size a form
   action should be, kept in the system so every public form gets the same one. */
.fh-btn--lg {
    height: 46px;
    padding: 0 28px;
    font-size: 15px;
    border-radius: 10px;
}