/* The home page (public/home.html, Concept A of
   project_docs/plans/20261102-homepage-strategy.md): one thought per screen.
   Loaded after public/css/landing.css, whose tokens, section headings, links
   and black ink buttons it shares. Black, white and greys; the focus ring
   stays the site's.

   Contrast on the #111113 bands: #ffffff 18.9, #d2d2d7 12.5, #aeaeb2 8.5. On
   the #f5f5f7 band --landing-muted is 5.4 (landing.css has the rest). */

/* ---- The hero: the admin's slides (content.HeroSlide) ---- */

.hero-slide {
  background-color: #e8ede3; /* fallback; always overridden inline per-slide */
  background-image: var(--hero-bg-desktop);
  background-size: cover;
  background-position: center;
  padding: 0;
  min-height: 600px;
  display: flex;
  /* background-color set inline per-slide from background_color
     (admin-configurable) -- always set, since it's the fallback
     fill visible before the image loads and around any edges
     background-size:cover doesn't quite reach. The background
     image itself goes through --hero-bg-desktop/--hero-bg-mobile
     custom properties (also set inline per-slide) rather than a
     plain background-image, so the media query below can swap it
     -- the hero has a 600px min-height at every width (no media
     query overrides it), so a narrow phone viewport needs a
     portrait-cropped image (HeroSlide.mobile_image) instead of
     just a smaller version of the wide desktop one, or most of a
     16:5 image ends up cropped out. align-items/justify-content
     are driven by data-valign/data-halign below (set from
     text_vertical_align/text_horizontal_align), not inline styles
     -- unlike the colors/images above, these are one of a fixed
     three CSS keyword values each, so a plain attribute selector
     covers every case without needing per-slide inline CSS. */
}

.hero-slide[data-valign="flex-start"] { align-items: flex-start; }
.hero-slide[data-valign="center"] { align-items: center; }
.hero-slide[data-valign="flex-end"] { align-items: flex-end; }

.hero-slide[data-halign="flex-start"] { justify-content: flex-start; }
.hero-slide[data-halign="center"] { justify-content: center; }
.hero-slide[data-halign="flex-end"] { justify-content: flex-end; }

/* The site's container, so left- or right-aligned text keeps the same edge
   as the sections below it. */
.hero-slide__inner {
  display: flex;
  justify-content: inherit;
}

.hero-slide__text {
  max-width: 46rem;
  padding-block: 3rem;
  /* text-align set inline per-slide from text_align_css */
}

.heading-block__heading-text {
  margin-bottom: 1.5rem;
  font-size: clamp(2.875rem, 1.5rem + 5.6vw, 6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  /* color set inline per-slide from heading_color (admin-configurable) */
}

.heading-block__heading-image {
  /* Inline (not block) so the parent's text-align, set inline per-slide
     from text_align_css same as the heading text, also positions this
     left/center/right. */
  height: 64px;
  width: auto;
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.heading-block__content-text {
  max-width: 34rem;
  margin-bottom: 1.75rem;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  line-height: 1.5;
  /* color set inline per-slide from subheading_color (admin-configurable) */
}

.hero-slide[data-halign="center"] .heading-block__content-text { margin-inline: auto; }
.hero-slide[data-halign="flex-end"] .heading-block__content-text { margin-inline-start: auto; }

.hero-slide__ctas {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  /* justify-content follows the parent .hero-slide's own
     data-halign (see above), so the button row lines up with the
     text's horizontal alignment. */
}

.hero-slide[data-halign="flex-start"] .hero-slide__ctas { justify-content: flex-start; }
.hero-slide[data-halign="center"] .hero-slide__ctas { justify-content: center; }
.hero-slide[data-halign="flex-end"] .hero-slide__ctas { justify-content: flex-end; }

.hero-slide__cta {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  background-color: var(--hero-cta-color, #0067b8);
  color: var(--hero-cta-text, #fff);
  font-weight: 600;
  /* border-radius set inline per-button/per-slide from
     button_radius_css/button2_radius_css (admin-configurable,
     per-corner). --hero-cta-color/--hero-cta2-color (also inline,
     from button_color/button2_color) drive fill/text/border below --
     a plain inline background-color/color couldn't also cover the
     :hover/:focus states, so this stays a custom property instead.
     --hero-cta-text is HeroSlide.button_text_color, white or near-black
     for the fill. */
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  border: 1px solid var(--hero-cta-color, #0067b8);
}

.hero-slide__cta:hover,
.hero-slide__cta:focus {
  background-color: color-mix(in srgb, var(--hero-cta-color, #0067b8), black 15%);
  border-color: color-mix(in srgb, var(--hero-cta-color, #0067b8), black 15%);
  color: var(--hero-cta-text, #fff);
}

.hero-slide__cta--outline {
  background-color: transparent;
  color: var(--hero-cta2-color, #0067b8);
  border-color: var(--hero-cta2-color, #0067b8);
}

.hero-slide__cta--outline:hover,
.hero-slide__cta--outline:focus {
  background-color: color-mix(in srgb, var(--hero-cta2-color, #0067b8), transparent 92%);
  border-color: color-mix(in srgb, var(--hero-cta2-color, #0067b8), black 15%);
  color: color-mix(in srgb, var(--hero-cta2-color, #0067b8), black 15%);
}

.hero-slide__note {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
}

/* "The window" -- read as the carousel/image display area itself,
   since nothing else on this page currently has rounded corners to
   remove. Explicit rather than relying on the default being 0. */
.hero-carousel,
.carousel-inner {
  border-radius: 0;
}

/* Bootstrap's stock indicator dots are a 30x3px visible mark plus a
   10px top/bottom transparent border, for a 30x23px clickable box --
   just under WCAG 2.5.8's 24x24px minimum target size. Taller dots
   (height + both borders = 24px) close that gap without changing
   their look meaningfully. */
.hero-carousel .carousel-indicators [data-bs-target] {
  height: 4px;
  border-top-width: 10px;
  border-bottom-width: 10px;
}

/* Persistent pause/play control for the autoplaying carousel (WCAG
   2.2.2) -- hover/focus-pause alone isn't a substitute for an
   operable control a user can leave switched off. */
.hero-carousel__pause {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
}

.hero-carousel__pause:hover,
.hero-carousel__pause:focus-visible {
  background-color: rgba(0, 0, 0, 0.55);
}

@media (max-width: 991.98px) {
  .hero-slide {
    background-image: var(--hero-bg-mobile);
  }
  .heading-block__heading-image {
    height: 48px;
  }
}

@media (max-width: 575.98px) {
  .hero-slide__text {
    padding-block: 2rem;
  }
  .heading-block__heading-image {
    height: 40px;
  }
}

/* ---- The sections: bands that run the window's width ---- */

.home-page {
  --home-dark: #111113;
  /* The landing pages' section spacing, opened up: this page has room to breathe. */
  --home-space: calc(var(--landing-space) * 1.75);
  /* The padding inside every flat panel: the three cards, the journey panel and the two doors. */
  --home-panel-pad-y: clamp(2rem, 1.5rem + 2vw, 3rem);
  --home-panel-pad-x: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --home-panel-pad: var(--home-panel-pad-y) var(--home-panel-pad-x);
  padding-bottom: 0;
}

.home-page .landing-section__title {
  font-size: clamp(1.875rem, 1.35rem + 2.3vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.home-band {
  padding-block: var(--home-space);
}

.home-band--surface {
  background: var(--landing-surface);
}

.home-band--dark {
  background: var(--home-dark);
  color: #d2d2d7;
}

.home-band--dark .landing-section__title,
.home-band--dark .home-join__title,
.home-journey .landing-section__title {
  color: #fff;
}

.home-band--dark .landing-section__intro {
  color: #d2d2d7;
}

/* On a phone a band's container leaves Bootstrap's 0.75rem each side, which on a dark band sits
   tight against the edge of the screen (the IDEAS and Join bands); 1.5rem there. From 576px the
   container is centred with its own margin, so it needs nothing more. */
@media (max-width: 575.98px) {
  .home-band--dark > .container {
    padding-inline: 1.5rem;
  }
}

/* The ink button turned over for the dark bands (and the dark door panel), and a quieter outline. */
.home-band--dark .btn.landing-cta,
.home-door--dark .btn.landing-cta {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-color: var(--landing-ink);
  --bs-btn-hover-bg: #e8e8ed;
  --bs-btn-hover-border-color: #e8e8ed;
  --bs-btn-hover-color: var(--landing-ink);
  --bs-btn-active-bg: #d2d2d7;
  --bs-btn-active-border-color: #d2d2d7;
  --bs-btn-active-color: var(--landing-ink);
}

.btn.landing-cta--outline {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--landing-ink);
  --bs-btn-hover-bg: #e8e8ed;
  --bs-btn-hover-border-color: var(--landing-ink);
  --bs-btn-hover-color: var(--landing-ink);
  --bs-btn-active-bg: #d2d2d7;
  --bs-btn-active-border-color: var(--landing-ink);
  --bs-btn-active-color: var(--landing-ink);
}

.home-band--dark .btn.landing-cta--outline {
  --bs-btn-bg: transparent;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.14);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.24);
  --bs-btn-active-border-color: #fff;
  --bs-btn-active-color: #fff;
}

/* ---- Explore, Assess, Plan: one under the other below 992px ---- */

/* A band made only of panels: the panels' own gap (0.75rem) above the first and below the last,
   instead of the band's usual padding, which would leave a wide white strip at each end. */
.home-band--tiles {
  padding-block: 0.75rem;
}

/* A band with a heading above its panels: the usual padding on top, the panels' gap below. */
.home-band--tiles-end {
  padding-bottom: 0.75rem;
}

/* A band whose panel starts straight under the previous band's panels (that band already leaves
   the gap below them): no padding on top. */
.home-band--stacked {
  padding-top: 0;
}

/* Three flat panels with a narrow gap, centred, a pill button at the foot of each. They sit
   outside .container and run the window's width, with the gap's width as the margin each side. */
.home-steps {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0 0.75rem;
  list-style: none;
}

/* The three cards, the six library panels and the Connected Planning Journey panel are one kind of
   panel: square, flat and edge to edge like Apple's promo tiles (no radius, no shadow). The border
   is invisible on screen; forced colours paints it, so a panel keeps an edge there. (The journey
   panel is the dark one: its own rule below.) */
.home-step {
  padding: var(--home-panel-pad);
  border: 1px solid transparent;
  background: var(--landing-surface);
  text-align: center;
}

.home-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.home-step__word {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(2.5rem, 1.25rem + 3vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--landing-ink);
}

.home-step__title {
  margin: 0;
  font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  font-weight: 600;
  color: var(--landing-ink);
}

.home-step__text,
.home-door__text {
  margin: 0;
  line-height: 1.6;
  color: var(--landing-text);
}

.home-step__text {
  max-width: 34rem;
  margin-bottom: 0.5rem;
}

/* Buttons line up along the panels' foot whatever the length of the text above. */
.home-step .landing-cta {
  margin-top: auto;
}

/* One full-width panel in a band of its own (.home-band--tiles gives the gap above and below,
   this the same margin each side); its text is set larger than the cards' own. */
.home-journey {
  margin: 0 0.75rem;
  padding: var(--home-panel-pad);
  border: 1px solid transparent;
  /* Dark like the IDEAS and closing bands (.home-band--dark): the page's one dark panel that is not
     a full band. Its title is white with them (the title rule above). */
  background: var(--home-dark);
  text-align: center;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.6;
  color: #d2d2d7;
}

/* The banner across the top of the journey panel: a block, so its width is the panel's plus the
   padding and border its margins take back. It is 6.4:1 (a thin strip), so below 576px, where that
   would be about 55px tall, it is cropped to 3:1, keeping the file's left side, where the network
   is. It is shown mirrored (product owner, 2026-11-08), so that side is the panel's right; the
   files are the original as it came, flipped here, so a new original needs no re-flipping. */
.home-journey__image {
  display: block;
  width: calc(100% + 2 * var(--home-panel-pad-x) + 2px);
  aspect-ratio: 2550 / 400;
  transform: scaleX(-1);
}

@media (max-width: 575.98px) {
  .home-journey__image {
    aspect-ratio: 3 / 1;
    object-position: 25% 50%;
  }
}

/* The text is centred as a block, wide enough that each paragraph takes two lines on a desktop. */
.home-journey p {
  max-width: 64rem;
  margin: 0 auto;
  text-wrap: balance;
  /* The site's paragraph colour (site_chrome.css) is dark; this panel's text is light. */
  color: inherit;
}

.home-journey p + p {
  margin-top: 1rem;
}

/* The six things the journey is made of (Articles to Templates): the same panels as the three
   cards (no visible border), a gap below the journey panel. They get less side padding, and
   each sets its heading (the large word) by its own width (container query units), so the
   longest label, "Learning paths", fits on one line at any window width. */
.home-steps--library {
  margin-top: 0.75rem;
}

.home-steps--library .home-step {
  padding-inline: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  container-type: inline-size;
}

.home-steps--library .home-step__word {
  /* The first line is for a browser without container units. */
  font-size: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  font-size: clamp(1.25rem, 8.5cqi, 3rem);
  white-space: nowrap;
}

/* One under the other below 768px, two across from 768px, three across (a third of the window
   each) from 992px. The 992px rule must stay after the 768px one. */
@media (min-width: 768px) {
  .home-steps--library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .home-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- The line the page stands on ---- */

.home-statement {
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(2.125rem, 1.25rem + 3.9vw, 4.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--landing-muted);
}

.home-statement span {
  color: var(--landing-ink);
}

/* ---- A heading with its link, beside the content (the insights and the questions) ---- */

.home-split-head {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.home-split-head .landing-section__title {
  margin: 0;
}

/* ---- IDEAS: five letters in a row from 992px, a letter beside each stage below ---- */

/* The trade mark sign after "IDEAS framework": a small raised mark that neither changes the
   heading's line height nor wraps onto a line of its own. It stays real text, so a screen
   reader says "trade mark". */
.home-tm {
  margin-inline-start: 0.05em;
  font-size: 0.4em;
  font-weight: 400;
  line-height: 0;
  vertical-align: super;
}

.home-ideas {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #d2d2d7;
}

.home-ideas__stage {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  align-content: start;
  padding-block: 1.125rem;
  border-bottom: 1px solid #3a3a3c;
}

.home-ideas__letter {
  grid-row: span 2;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}

.home-ideas__name {
  grid-column: 2;
  font-weight: 600;
  color: #fff;
}

.home-ideas__text {
  grid-column: 2;
}

@media (min-width: 992px) {
  .home-ideas {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .home-ideas__stage {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.5rem;
    padding: 1.5rem 1.25rem 0 0;
    border-bottom: 0;
  }

  .home-ideas__letter {
    grid-row: auto;
    font-size: clamp(3rem, 1.5rem + 5vw, 6rem);
  }

  .home-ideas__name,
  .home-ideas__text {
    grid-column: 1;
  }
}

/* ---- Complements your existing planning approach: centred, the methods as tags ---- */

.home-complements {
  text-align: center;
}

/* A longer paragraph than the other bands' intros, so it is allowed a wider line. */
.home-complements .landing-section__intro {
  max-width: 48rem;
  margin-inline: auto;
  text-wrap: pretty;
}

/* In running text the trade mark is raised less than in a heading, or it would be too small to
   make out. */
.home-complements .home-tm {
  font-size: 0.7em;
}

.home-complements__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: clamp(1.75rem, 1.25rem + 2vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.home-complements__list li {
  padding: 0.375rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--landing-surface);
  font-weight: 600;
  color: var(--landing-ink);
}

/* ---- One person or a whole organization ---- */

.home-doors__title {
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  text-align: center;
}

/* Two panels, half the window's width each (one under the other below 768px), with the cards'
   gap between them and the same margin each side: one light, one dark, like the cards. */
.home-doors {
  display: grid;
  gap: 0.75rem;
  padding: 0 0.75rem;
}

.home-door {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: var(--home-panel-pad);
  /* No visible border, like the cards: invisible on screen, painted by forced colours. */
  border: 1px solid transparent;
  background: #fff;
  text-align: center;
}

.home-door--dark {
  background: var(--home-dark);
}

/* A panel's photo (a door's, and the journey panel's banner): the top of the panel, edge to edge.
   The negative margins cancel the panel's own padding and its 1px border, so it fills the width and
   starts at the top; the bottom margin gives the text the same space the top padding gives it when
   there is no photo. It is decoration (alt=""), so nothing needs to describe it. The markup's height
   attribute only reserves the space before it loads, so the height is auto and the box's shape is
   the aspect-ratio each one sets. */
.home-door__image,
.home-journey__image {
  max-width: none;
  height: auto;
  margin: calc(-1 * var(--home-panel-pad-y) - 1px) calc(-1 * var(--home-panel-pad-x) - 1px) var(--home-panel-pad-y);
  object-fit: cover;
}

/* A door is a flex column, so its photo stretches to the panel's width; the photo is 3:2. */
.home-door__image {
  align-self: stretch;
  width: auto;
  aspect-ratio: 3 / 2;
}

.home-door__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--landing-ink);
}

.home-door__text {
  max-width: 30rem;
}

.home-door--dark .home-door__title {
  color: #fff;
}

.home-door--dark .home-door__text {
  color: #d2d2d7;
}

/* The buttons line up along the panels' foot whatever the length of the text above. */
.home-door .landing-cta {
  margin-top: auto;
}

@media (min-width: 768px) {
  .home-doors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- The three carousels (Explore, Assess, Plan): panels of random cards ---- */

/* The carousel of random articles: a flat grey panel of its own, the same grey as the six panels
   above it, that runs the window's width, edge to edge with no side margin and no side border
   (the other panels keep a 0.75rem margin; this one is the full-width kind). The white band
   around it shows only as the 0.75rem gap below (the journey band's own padding is the gap
   above), from .home-band--tiles-end and .home-band--stacked. Its cards, track, buttons and drag
   behaviour are the article page's Related Insights carousel (articles.css and
   article_related_carousel.js); only the panel and its heading row are the home page's. */
.home-carousel {
  margin: 0;
  padding: var(--home-panel-pad);
  /* No side borders; top and bottom are invisible on screen and painted by forced colours. */
  border: 1px solid transparent;
  border-inline-width: 0;
  background: var(--landing-surface);
}

/* The covers are 3:2 on the article, course, assessment, template and kit cards and 16:9 on the
   video and learning path cards, which never sit side by side on their own pages. In one row they
   would start the text at different heights, so here they are all 16:9, in every carousel so the
   panels match (the video thumbnails must stay 16:9, or the letterbox bars under them show). */
.home-carousel .article-card__image,
.home-carousel .course-card__image,
.home-carousel .assessment-card__image,
.home-carousel .template-card__image {
  aspect-ratio: 16 / 9;
}

/* The card's tags are a faint green-grey chip (cards.css) that vanishes on white but shows as an
   off-tint box on this grey, so here they are white, like the doors' light panel. */
.home-carousel .card__token {
  background-color: #fff;
}

.home-carousel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.home-carousel__title {
  margin: 0;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--landing-ink);
}

/* ---- Questions: a heading beside a ruled list ---- */

.home-faq {
  border-top: 1px solid var(--landing-line);
}

.home-faq__item {
  border-bottom: 1px solid var(--landing-line);
}

.home-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding-block: 0.875rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--landing-ink);
  cursor: pointer;
  list-style: none;
}

.home-faq__question::-webkit-details-marker {
  display: none;
}

/* The plus and minus are a visual cue only: <details> already tells a
   screen reader whether it's open. */
.home-faq__question::after {
  content: "+";
  content: "+" / "";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--landing-muted);
}

.home-faq__item[open] .home-faq__question::after {
  content: "\2212";
  content: "\2212" / "";
}

.home-faq__answer {
  max-width: 44rem;
  margin: 0;
  padding-bottom: 1.25rem;
  line-height: 1.6;
  color: var(--landing-text);
}

/* ---- Join ---- */

/* One centred block, the buttons too. */
.home-join {
  text-align: center;
}

.home-join .landing-section__intro {
  margin-inline: auto;
}

.home-join__title {
  margin: 0 0 1rem;
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.home-join__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}