/* ============================================================
   HOME PAGE OPTION A: "One message, three ways in" (chosen 30 Sep 2026)

   Linked from every head include (the four markets' and the global one),
   because the header's SIGN IN / OPEN AGILIS button is on every page.
   Everything else here is scoped to classes only the home pages use:
     .ha_hero          UK / international hero (en-gb, and the fallback index)
     .ha_actions       the hero's ways in (includes/home-a/hero-actions)
     .ha_ways          "Choose how you join" (includes/home-a/ways-in)
     .ha_features      the features grid (includes/home-a/features)
   The US, Australia and Canada pages keep their own heroes from style.css
   and colour these parts through their body class (.us-market, .au-market,
   .ca-market).

   Note: style.css sets font-family on every element (* {}), so links and
   spans do not inherit their parent's font; set it where it matters.
   ============================================================ */

/* ---- Header: SIGN IN / OPEN AGILIS (all pages) ---- */
.header .navbar-nav .nav-item .nav-link.nav_signin_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 22px;
    border: 2px solid #ffffff;
    border-radius: 22px;
    background: transparent;
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.header .navbar-nav .nav-item .nav-link.nav_signin_btn:hover,
.header .navbar-nav .nav-item .nav-link.nav_signin_btn:focus {
    background: #ffffff;
    color: #18014d;
}

.header .navbar-nav .nav-item .nav-link.nav_signin_btn:focus-visible {
    outline: 3px solid #FB698E;
    outline-offset: 2px;
}

/* Market headers fill it in their accent */
.us-market .header .navbar-nav .nav-item .nav-link.nav_signin_btn {
    background: #ff4d6d;
    border-color: #ff4d6d;
    color: #1a1a3e;
}
.us-market .header .navbar-nav .nav-item .nav-link.nav_signin_btn:hover,
.us-market .header .navbar-nav .nav-item .nav-link.nav_signin_btn:focus {
    background: #ffffff;
    border-color: #ffffff;
    color: #1a1a3e;
}

.au-market .header .navbar-nav .nav-item .nav-link.nav_signin_btn {
    background: #ffd84d;
    border-color: #ffd84d;
    color: #06363b;
}
.au-market .header .navbar-nav .nav-item .nav-link.nav_signin_btn:hover,
.au-market .header .navbar-nav .nav-item .nav-link.nav_signin_btn:focus {
    background: #ffffff;
    border-color: #ffffff;
    color: #06363b;
}

.ca-market .header .navbar-nav .nav-item .nav-link.nav_signin_btn {
    background: #d80621;
    border-color: #d80621;
    color: #ffffff;
}
.ca-market .header .navbar-nav .nav-item .nav-link.nav_signin_btn:hover,
.ca-market .header .navbar-nav .nav-item .nav-link.nav_signin_btn:focus {
    background: #a3041a;
    border-color: #a3041a;
    color: #ffffff;
}
.ca-market .header .navbar-nav .nav-item .nav-link.nav_signin_btn:focus-visible {
    outline-color: #33334d;
}

/* Laptops and tablets: tighter, like the rest of the header (responsive.css). */
@media (max-width: 1199px) and (min-width: 768px) {
    .header .navbar-nav .nav-item .nav-link.nav_signin_btn {
        min-height: 38px;
        padding: 0 14px;
    }
}

/* Phones: the open menu lists the links down the left. */
@media (max-width: 767.98px) {
    .header .navbar-nav .nav-item .nav-link.nav_signin_btn {
        margin-top: 4px;
    }
}

/* ---- Shared buttons and focus ---- */
.ha_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 30px;
    border-radius: 27px;
    font-family: OpenSans-Bold, sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ha_btn:hover,
.ha_btn:focus {
    text-decoration: none;
}

/* A two-tone ring that shows on dark and light backgrounds alike. */
.ha_actions a:focus-visible,
.ha_ways a:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #180054;
}

.ha_btn_primary {
    background: #FB698E;
    color: #180054;
}

.ha_btn_primary:hover,
.ha_btn_primary:focus {
    background: #ffffff;
    color: #180054;
}

/* ---- UK / international hero ---- */
.ha_hero {
    background: #2E0F7B url("../img/landing-banner.webp") center / cover no-repeat;
    color: #ffffff;
    padding: 120px 0 0;
    overflow: hidden;
}

.ha_hero_grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.ha_hero_txt {
    padding-bottom: 56px;
}

.ha_hero h1 {
    font-family: Raleway-ExtraBold, Raleway-Bold, sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 1.25;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0 0 22px;
}

.ha_hero_lead {
    font-family: OpenSans-Regular, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #ffffff;
    margin: 0 0 28px;
}

.ha_hero_img {
    align-self: end;
    justify-self: center;
    width: 100%;
    max-width: 410px;
}

.ha_hero_img picture,
.ha_hero_img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 410 / 522;
}

/* The market heroes' coloured words take the headline's own font. */
.us_hero_section h1 span,
.ca_hero_txt h1 span {
    font-family: inherit;
}

/* ---- Hero actions (all markets) ---- */
.ha_actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "start start"
        "join signin"
        "app app"
        "badges badges";
    align-items: center;
    column-gap: 18px;
}

.ha_actions.is-signed-in {
    grid-template-columns: auto;
    grid-template-areas:
        "start"
        "join"
        "app"
        "badges";
    justify-content: start;
}

.ha_actions_centre {
    grid-template-columns: auto auto;
    justify-content: center;
    text-align: center;
}

.ha_actions_centre.is-signed-in {
    grid-template-columns: auto;
    justify-content: center;
}

.ha_eyebrow {
    font-family: OpenSans-Bold, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #E8E1F9;
    margin: 0 0 14px;
}

.ha_eyebrow_start { grid-area: start; }
.ha_join { grid-area: join; justify-self: start; }
.ha_actions_centre .ha_join { justify-self: center; }

.ha_eyebrow_app {
    grid-area: app;
    margin-top: 26px;
}

.ha_signin {
    grid-area: signin;
    margin: 0;
    font-family: OpenSans-Regular, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #ffffff;
    text-align: left;
}

.ha_signin a {
    font-family: OpenSans-Bold, sans-serif;
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ha_signin a:hover,
.ha_signin a:focus {
    color: inherit;
    text-decoration-thickness: 2px;
}

.ha_badges {
    grid-area: badges;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.ha_actions_centre .ha_badges {
    justify-content: center;
}

.ha_badges a,
.ha_card_badges a {
    display: block;
    border-radius: 8px;
}

.ha_badges img {
    display: block;
    width: 167px;
    height: auto;
}

/* ---- "Choose how you join" ---- */
.ha_ways {
    background: #F7F5FC;
    padding: 72px 0 64px;
}

.ha_ways h2 {
    font-family: Raleway-ExtraBold, Raleway-Bold, sans-serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 1.2;
    color: #222222;
    text-align: center;
    margin: 0 0 10px;
}

.ha_ways_lead {
    font-family: OpenSans-Regular, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #3b3450;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

.ha_cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.ha_card {
    background: #ffffff;
    border: 1px solid #E8E1F9;
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #2E0F7B; /* the icon */
}

.ha_card_icon {
    display: block;
    flex-shrink: 0;
}

.ha_card h3 {
    font-family: Raleway-ExtraBold, Raleway-Bold, sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.3;
    color: #180054;
    margin: 0;
}

.ha_card p {
    font-family: OpenSans-Regular, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #3b3450;
    margin: 0;
    flex-grow: 1;
}

.ha_card .ha_btn {
    align-self: flex-start;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 24px;
    font-size: 16px;
}

.ha_btn_card {
    background: #2E0F7B;
    color: #ffffff;
}

.ha_btn_card:hover,
.ha_btn_card:focus {
    background: #180054;
    color: #ffffff;
}

.ha_card_badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ha_card_badges img {
    display: block;
    width: 136px;
    height: auto;
}

.ha_card_biz {
    background: #180054;
    border-color: #180054;
    color: #FB698E;
}

.ha_card_biz h3 { color: #ffffff; }
.ha_card_biz p { color: #E8E1F9; }

.ha_btn_biz {
    background: #FB698E;
    color: #180054;
}

.ha_btn_biz:hover,
.ha_btn_biz:focus {
    background: #ffffff;
    color: #180054;
}

/* ---- Features ---- */
.ha_features {
    padding: 64px 0;
}

.ha_features .features_top p {
    max-width: 760px;
    margin: 16px auto 0;
}

.ha_feature_grid {
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 40px;
    text-align: center;
}

.ha_feature img {
    display: block;
    width: auto;
    height: 48px;
    margin: 0 auto 14px;
}

.ha_feature h3 {
    font-family: Raleway-Bold, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: #222222;
    margin: 0 0 8px;
}

.ha_feature p {
    font-family: OpenSans-Regular, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #333333;
    margin: 0;
}

/* ============================================================
   Market colours
   ============================================================ */

/* ---- United States ---- */
.us-market .ha_btn_primary { background: #ff4d6d; color: #1a1a3e; }
.us-market .ha_btn_primary:hover,
.us-market .ha_btn_primary:focus { background: #ffffff; color: #1a1a3e; }
.us-market .ha_eyebrow { color: rgba(255, 255, 255, 0.85); }
.us_hero_section .ha_actions { margin-bottom: 0; }
/* With no picture under it, the US hero only needs room for its text and buttons. */
.us-market .us_hero_section { padding: 104px 0 48px; }
.us-market .ha_ways { padding-top: 44px; }
.us-market .ha_ways { background: #f6f5fb; }
.us-market .ha_card { border-color: #ebe8f5; color: #1a1a3e; }
.us-market .ha_card h3 { color: #1a1a3e; }
.us-market .ha_btn_card { background: #1a1a3e; color: #ffffff; }
.us-market .ha_btn_card:hover,
.us-market .ha_btn_card:focus { background: #2d1b69; color: #ffffff; }
.us-market .ha_card_biz { background: #1a1a3e; border-color: #1a1a3e; color: #ff4d6d; }
.us-market .ha_card_biz h3 { color: #ffffff; }
.us-market .ha_card_biz p { color: rgba(255, 255, 255, 0.88); }
.us-market .ha_btn_biz { background: #ff4d6d; color: #1a1a3e; }
.us-market .ha_btn_biz:hover,
.us-market .ha_btn_biz:focus { background: #ffffff; color: #1a1a3e; }

/* ---- Australia ---- */
.au-market .ha_btn_primary { background: #ffd84d; color: #06363b; }
.au-market .ha_btn_primary:hover,
.au-market .ha_btn_primary:focus { background: #ffffff; color: #06363b; }
.au-market .ha_eyebrow,
.au-market .ha_signin { color: #06363b; }
.au_hero_section .ha_actions { margin-top: 4px; }
.au-market .ha_ways { background: #fffdf5; padding-top: 40px; }
.au-market .ha_card { border-color: #d5ecea; color: #06363b; }
.au-market .ha_card h3 { color: #06363b; }
.au-market .ha_card p { color: #2c5458; }
.au-market .ha_btn_card { background: #06363b; color: #ffffff; }
.au-market .ha_btn_card:hover,
.au-market .ha_btn_card:focus { background: #0a4a50; color: #ffffff; }
.au-market .ha_card_biz { background: #06363b; border-color: #06363b; color: #ffd84d; }
.au-market .ha_card_biz h3 { color: #ffffff; }
.au-market .ha_card_biz p { color: #d5ecea; }
.au-market .ha_btn_biz { background: #ffd84d; color: #06363b; }
.au-market .ha_btn_biz:hover,
.au-market .ha_btn_biz:focus { background: #ffffff; color: #06363b; }

/* ---- Canada ---- */
.ca-market .ha_btn_primary { background: #d80621; color: #ffffff; }
.ca-market .ha_btn_primary:hover,
.ca-market .ha_btn_primary:focus { background: #a3041a; color: #ffffff; }
.ca-market .ha_eyebrow,
.ca-market .ha_signin { color: #4a4a63; }
.ca-market .ha_signin a,
.ca-market .ha_signin a:hover,
.ca-market .ha_signin a:focus { color: #a3041a; }
.ca-market .ha_ways { background: #ffffff; }
.ca-market .ha_card { border-color: #f0e6e6; color: #d80621; }
.ca-market .ha_card h3 { color: #33334d; }
.ca-market .ha_card p { color: #4a4a63; }
.ca-market .ha_btn_card { background: #d80621; color: #ffffff; }
.ca-market .ha_btn_card:hover,
.ca-market .ha_btn_card:focus { background: #a3041a; color: #ffffff; }
.ca-market .ha_card_biz { background: #33334d; border-color: #33334d; color: #ffb3bd; }
.ca-market .ha_card_biz h3 { color: #ffffff; }
.ca-market .ha_card_biz p { color: #e6e6ef; }
.ca-market .ha_btn_biz { background: #ffb3bd; color: #33334d; }
.ca-market .ha_btn_biz:hover,
.ca-market .ha_btn_biz:focus { background: #ffffff; color: #33334d; }

/* Canada hero card: a styled line rather than an h3 (heading order), and
   greys dark enough for 4.5:1 on the cream and white backgrounds. */
.ca_hero_card .ca_hero_card_title {
    font-family: Raleway-Bold, sans-serif;
    font-size: 19px;
    color: #2a2a3a;
    margin-bottom: 6px;
}
.ca-market .ca_hero_card p:not(.ca_hero_card_title) { color: #5f5f6f; }
.ca-market .ca_hero_frnote,
.ca-market .ca_topstrip_sub { color: #756666; }
.ca-market .ca_value_card p { color: #5f5f6f; }
.ca_value_card h3 {
    font-family: Raleway-Bold, sans-serif;
    font-size: 18px;
    color: #2a2a3a;
    margin-bottom: 8px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1199px) {
    .ha_hero h1 { font-size: 36px; }
}

@media (max-width: 991px) {
    .ha_hero h1 { font-size: 32px; }

    .ha_cards {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
        margin: 0 auto;
    }

    .ha_feature_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ha_hero { padding: 92px 0 0; }

    .ha_hero_grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .ha_hero_txt { padding-bottom: 0; }

    .ha_hero h1 {
        font-size: 30px;
        margin-bottom: 12px;
    }

    .ha_hero_lead {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .ha_hero_img { max-width: 250px; }

    /* The phone layout: one big button, the store badges, then "Already a member?" */
    .ha_actions,
    .ha_actions_centre,
    .ha_actions.is-signed-in {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "start"
            "join"
            "app"
            "badges"
            "signin";
        justify-content: stretch;
        text-align: center;
    }

    .ha_join,
    .ha_actions_centre .ha_join {
        justify-self: stretch;
        min-height: 52px;
        font-size: 16px;
    }

    .ha_eyebrow {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .ha_eyebrow_app { margin-top: 18px; }

    .ha_badges {
        justify-content: center;
        gap: 10px;
    }

    .ha_badges img { width: 150px; }

    .ha_signin {
        margin-top: 18px;
        text-align: center;
    }

    .us_hero_section .ha_actions { margin-bottom: 32px; }

    .ha_ways { padding: 36px 0; }

    .ha_ways h2 { font-size: 26px; }

    .ha_ways_lead {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .ha_cards { gap: 16px; }

    .ha_card {
        padding: 22px;
        border-radius: 18px;
    }

    .ha_card h3 { font-size: 20px; }

    .ha_features { padding: 40px 0; }

    .ha_feature_grid { margin-top: 28px; }
}

@media (max-width: 575px) {
    .ha_feature_grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ha_btn,
    .header .navbar-nav .nav-item .nav-link.nav_signin_btn {
        transition: none;
    }
}

/* Canada's header is white on its own pages (.ca-market), where the white
   menu icon disappeared on phones: show it dark there. */
@media (max-width: 767.98px) {
    .ca-market .header .navbar-toggler {
        filter: brightness(0.2);
    }
}

/* Tablets: responsive.css fixes the 4th menu item (INSIGHTS) at 90px wide,
   which left a gap before FOR BUSINESSES; the labels no longer wrap, so let
   it size to its text. */
@media (max-width: 991px) and (min-width: 768px) {
    header .navbar-nav .nav-item:nth-child(4) {
        width: auto;
    }
}