/*
 * Whichapp Homepage v2
 * Design system: Inter, 1180px container
 *
 * Spacing tokens (desktop / tablet / mobile):
 *   Section padding:        112px / 72px / 56px
 *   Hero padding:           104px top, 96px bottom / 80px/56px / 64px/40px
 *   Card grid gap:          28px
 *   Logo band:              28px vertical padding
 *   Visual break:           64px vertical padding
 *
 * Colours: #FCFCFD bg, #2563EB primary, #101828 text, #475467 secondary,
 *          #667085 muted, #98A2B3 faint, #C1C9D2 ghost
 */

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #101828;
  background: #FCFCFD;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* GP font override — force Inter on all homepage sections */
.hp-hero, .hp-hero *,
.hp-logoband, .hp-logoband *,
.hp-hero-visual, .hp-hero-visual *,
.hp-pathways, .hp-pathways *,
.hp-value, .hp-value *,
.hp-spotlight, .hp-spotlight *,
.hp-compare-snapshot, .hp-compare-snapshot * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ============================================================
   CONTAINER
   ============================================================ */

.hp-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.hp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.hp-btn--primary {
  background: #2563EB;
  color: #FFFFFF;
  padding: 14px 28px;
  border: none;
}

.hp-btn--primary:hover {
  background: #1D4ED8;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.hp-btn--primary:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
}

.hp-btn--ghost {
  background: none;
  color: #475467;
  padding: 14px 4px;
  border: none;
}

.hp-btn--ghost:hover { color: #2563EB; }

/* ============================================================
   HERO — 104px top / 96px bottom
   ============================================================ */

.hp-hero {
  padding: 104px 0 96px;
  background: #FCFCFD;
}

.hp-hero__grid {
  display: grid;
  grid-template-columns: 54fr 46fr;
  gap: 40px;
  align-items: center;
}

.hp-hero__title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #101828;
  margin-bottom: 20px;
}

.hp-hero__subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: #475467;
  margin-bottom: 28px;
}

.hp-hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hp-hero__proof {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 12px;
}

/* ============================================================
   HERO VISUAL — floating comparison card stack
   3 cards staggered with logos + scores. Visual depth via shadow.
   ============================================================ */

.hp-hero-visual {
  position: relative;
  background: #F8FAFC;
  border: 1px solid rgba(16, 24, 40, 0.07);
  border-radius: 20px;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin-left: auto;
  overflow: hidden;
}

/* Each floating card */
.hp-hero-visual__card {
  position: absolute;
  background: #FFFFFF;
  border: 1px solid rgba(16, 24, 40, 0.09);
  border-radius: 11px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.08), 0 1px 4px rgba(16, 24, 40, 0.04);
}

/* Vertically stacked — same left/right on all cards, depth from shadow only */
.hp-hero-visual__card:nth-child(1) {
  top: 24px;
  left: 24px;
  right: 24px;
  z-index: 3;
}

.hp-hero-visual__card:nth-child(2) {
  top: 112px;
  left: 24px;
  right: 24px;
  z-index: 2;
}

.hp-hero-visual__card:nth-child(3) {
  top: 200px;
  left: 24px;
  right: 24px;
  z-index: 1;
}

/* ============================================================
   HERO LOGO DIMENSIONS — DEFENSIVE !important.
   ============================================================
   This rule has been broken three times (commits 1e0fdd79, 734e40d5,
   and the wpnav.css `.entry-content img !important` regression of
   2026-05-27) because the homepage is wrapped in `.entry-content` and
   any global `img` / `.entry-content img` rule that lands without
   excluding `.home` blows these logos up to ~309x100px.

   Specificity-based defences keep failing because new !important rules
   are added elsewhere in the cascade and we forget to mirror the
   exclusion. Pin dimensions with !important here so the override is
   structurally durable — future global img rules cannot win.

   See feedback memory: [[homepage_hero_logo_hardening]]. */
.hp-hero-visual__logo,
.hp-hero-visual .hp-hero-visual__logo {
  height: 22px !important;
  width: auto !important;
  max-width: 96px !important;
  display: block;
  filter: brightness(0) opacity(0.82);
  flex-shrink: 0;
}

/* Remote uses icon+wordmark — needs extra height to match visual weight */
.hp-hero-visual__logo[alt="Remote"],
.hp-hero-visual .hp-hero-visual__logo[alt="Remote"] {
  height: 28px !important;
  max-width: 100px !important;
}

.hp-hero-visual__score {
  font-size: 22px;
  font-weight: 800;
  color: #101828;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.hp-hero-visual__badge {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #98A2B3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 14px;
  padding-left: 4px;
}

/* ============================================================
   LOGO BAND — real SVG logo strip, monochrome via CSS filter
   ============================================================ */

.hp-logoband {
  background: #FCFCFD;
  border-top: 1px solid rgba(16, 24, 40, 0.07);
  border-bottom: 1px solid rgba(16, 24, 40, 0.07);
}

.hp-logoband .hp-container {
  padding-top: 28px;
  padding-bottom: 28px;
}

.hp-logoband__label {
  font-size: 10px;
  font-weight: 700;
  color: #D0D5DD;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  line-height: 1;
}

.hp-logoband__track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0 24px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px; /* prevent filter clipping */
}

.hp-logoband__track::-webkit-scrollbar { display: none; }

.hp-logoband__item {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.hp-logoband__item:hover { opacity: 0.7; }

.hp-logoband__item:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 4px;
  border-radius: 3px;
}

.hp-logoband__logo {
  height: 22px;
  width: auto;
  max-width: 120px;
  display: block;
  /* Monochrome: collapse all fills to near-black, then reduce opacity */
  filter: brightness(0) opacity(0.38);
  transition: filter 0.15s;
}

.hp-logoband__item:hover .hp-logoband__logo {
  filter: brightness(0) opacity(0.65);
}

/* ============================================================
   PATHWAY CARDS — 112px section, 4-col flat grid
   ============================================================ */

.hp-pathways {
  padding: 112px 0 96px;
  background: #F9FAFB;
  border-top: 1px solid rgba(16, 24, 40, 0.06);
}

.hp-pathways__header {
  margin-bottom: 32px;
}

.hp-pathways__title {
  font-size: 32px;
  font-weight: 800;
  color: #101828;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hp-pathways__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.hp-pathways__card {
  background: #FFFFFF;
  border: 1px solid rgba(16, 24, 40, 0.09);
  border-top: 3px solid transparent;
  border-radius: 10px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  text-decoration: none;
}

.hp-pathways__card:hover {
  border-top-color: #2563EB;
  border-color: rgba(37, 99, 235, 0.15);
  border-top-color: #2563EB;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.07);
  transform: translateY(-2px);
}

.hp-pathways__card:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

.hp-pathways__card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EFF6FF;
  border-radius: 9px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.hp-pathways__card-title {
  font-size: 15px;
  font-weight: 700;
  color: #101828;
  margin-bottom: 10px;
  line-height: 1.35;
}

.hp-pathways__card-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #667085;
  margin-bottom: auto;
  padding-bottom: 16px;
}

.hp-pathways__card-cta {
  font-size: 13px;
  font-weight: 600;
  color: #2563EB;
  transition: color 0.15s;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 24, 40, 0.06);
  display: block;
}

.hp-pathways__card:hover .hp-pathways__card-cta { color: #1D4ED8; }


/* ============================================================
   VALUE / WHY TRUST — 112px section, trimmed card copy
   ============================================================ */

.hp-value {
  padding: 112px 0 96px;
  background: #FFFFFF;
  border-top: 1px solid rgba(16, 24, 40, 0.06);
}

.hp-value__intro {
  text-align: center;
  margin-bottom: 48px;
}

.hp-value__heading {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #101828;
  margin-bottom: 12px;
}

.hp-value__lead {
  font-size: 15px;
  line-height: 1.6;
  color: #667085;
}

.hp-value__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.hp-value__card {
  background: #F9FAFB;
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: 10px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.hp-value__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 8px;
  margin-bottom: 14px;
}

.hp-value__card-title {
  font-size: 14px;
  font-weight: 600;
  color: #101828;
  margin-bottom: 8px;
  line-height: 1.3;
}

.hp-value__card-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: #475467;
}

/* ============================================================
   FEATURED COMPARISON — 112px section, image-led split
   ============================================================ */

.hp-spotlight {
  padding: 112px 0 96px;
  background: #F9FAFB;
  border-top: 1px solid rgba(16, 24, 40, 0.06);
}

.hp-spotlight__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hp-spotlight__tag {
  font-size: 11px;
  font-weight: 700;
  color: #2563EB;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
  display: block;
}

.hp-spotlight__heading {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #101828;
  margin-bottom: 14px;
  line-height: 1.05;
}

.hp-spotlight__desc {
  font-size: 16px;
  line-height: 1.65;
  color: #475467;
  margin-bottom: 28px;
}

.hp-spotlight__freshness {
  font-size: 12px;
  color: #98A2B3;
  margin-top: 16px;
  font-weight: 500;
}

/* ============================================================
   COMPARE SNAPSHOT — visual weight card, no header or chips
   ============================================================ */

.hp-compare-snapshot {
  background: #FFFFFF;
  border: 1px solid rgba(16, 24, 40, 0.09);
  border-radius: 16px;
  padding: 44px 40px;
  box-shadow: 0 4px 24px rgba(16, 24, 40, 0.06);
}

.hp-compare-snapshot__body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
}

.hp-compare-snapshot__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 24px;
}

.hp-compare-snapshot__col:last-child {
  padding-right: 0;
  padding-left: 24px;
}

/* Real logo in snapshot card — replaces text provider label */
.hp-compare-snapshot__brand-logo {
  height: 20px;
  width: auto;
  max-width: 90px;
  display: block;
  filter: brightness(0) opacity(0.7);
  margin-bottom: 12px;
}

.hp-compare-snapshot__provider {
  font-size: 11px;
  font-weight: 700;
  color: #98A2B3;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1;
  margin-bottom: 8px;
}

.hp-compare-snapshot__score {
  font-size: 48px;
  font-weight: 800;
  color: #101828;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 20px;
}

.hp-compare-snapshot__score span {
  font-size: 18px;
  font-weight: 500;
  color: #C1C9D2;
  letter-spacing: 0;
}

.hp-compare-snapshot__attrs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hp-compare-snapshot__attr {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hp-compare-snapshot__attr-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #98A2B3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

.hp-compare-snapshot__attr-value {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  line-height: 1.3;
}

.hp-compare-snapshot__divider {
  width: 1px;
  background: rgba(16, 24, 40, 0.08);
  align-self: stretch;
  margin: 0;
}

/* ============================================================
   HEADER (standalone preview)
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

.wpnav-inline-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: 1;
  justify-content: flex-end;
}

.wpnav-nav {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.wpnav-nav__trigger,
.wpnav-nav__link {
  font-size: 14px;
  font-weight: 500;
  color: #475467;
  background: none;
  border: none;
  cursor: pointer;
  padding: 14px 0;
  line-height: 1;
  text-decoration: none;
  transition: color 0.15s;
}

.wpnav-nav__trigger:hover,
.wpnav-nav__link:hover { color: #2563EB; }

.wpnav-nav__chevron { font-size: 10px; margin-left: 3px; }

.wpnav-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 20px;
}

.wpnav-header-cta {
  display: inline-block;
  background: #EFF6FF;
  color: #1D4ED8 !important;
  padding: 9px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}

.wpnav-header-cta:hover { background: #DBEAFE; color: #1D4ED8 !important; }

.wpnav-search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: #475467;
  transition: color 0.15s;
}

.wpnav-search-toggle:hover { color: #2563EB; }

/* ============================================================
   FOOTER
   ============================================================ */

.wpnav-footer {
  background: #101828;
  color: #FFFFFF;
  padding: 48px 0 0 0;
}

.wpnav-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.wpnav-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.wpnav-footer__heading {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}

.wpnav-footer__heading--sub { margin-top: 18px; }

.wpnav-footer__col a {
  display: block;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  padding: 3px 0;
  line-height: 1.5;
  transition: color 0.1s;
}

.wpnav-footer__col a:hover { color: #FFFFFF; }

.wpnav-footer__viewall {
  font-size: 13px !important;
  font-weight: 600;
  color: #93B4FF !important;
  padding-top: 6px !important;
}

.wpnav-footer__bottom {
  margin-top: 32px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.wpnav-footer__copyright {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.wpnav-footer__legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.wpnav-footer__legal a {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.1s;
}

.wpnav-footer__legal a:hover { color: rgba(255, 255, 255, 0.8); }

/* ============================================================
   KILL WPAUTOP PARAGRAPH POLLUTION
   ============================================================ */

.hp-hero__grid > p,
.hp-hero-visual__list > p,
.hp-logoband__track > p,
.hp-pathways__grid > p,
.hp-value__cards > p,
.hp-compare-snapshot__body > p,
.hp-compare-snapshot__attrs > p,
.hp-hero + p,
.hp-logoband + p,
.hp-pathways + p,
.hp-value + p,
.hp-spotlight + p {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
}

/* ============================================================
   HIDE GP DEFAULT WIDGETS ON HOMEPAGE
   ============================================================ */

.footer-widgets,
.site-info,
#secondary,
.sidebar {
  display: none !important;
}

/* ============================================================
   RESPONSIVE: Tablet (< 1024px)
   Section padding: 72px
   ============================================================ */

@media (max-width: 1024px) {
  .hp-hero { padding: 80px 0 56px; }

  .hp-hero__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hp-hero__title { font-size: 36px; }

  .hp-hero__proof {
    width: 100%;
    max-width: 460px;
    padding-left: 0;
  }

  .hp-hero-visual {
    max-width: 100%;
    height: 240px;
  }

  .hp-hero-visual__card:nth-child(1) { top: 20px; left: 20px; right: 36px; }
  .hp-hero-visual__card:nth-child(2) { top: 96px; left: 36px; right: 20px; }
  .hp-hero-visual__card:nth-child(3) { top: 172px; left: 52px; right: 28px; }

  /* Logo band: allow overflow scroll on tablet */
  .hp-logoband__track { gap: 0 24px; }
  .hp-logoband__logo { height: 20px; }

  .hp-pathways { padding: 72px 0 64px; }
  .hp-pathways__title { font-size: 28px; }
  .hp-pathways__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .hp-value { padding: 72px 0 64px; }
  .hp-value__cards {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .hp-spotlight { padding: 72px 0 64px; }
  .hp-spotlight__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hp-spotlight__heading { font-size: 32px; }

  .hp-compare-snapshot { padding: 32px 28px; }
  .hp-compare-snapshot__score { font-size: 40px; }

  .wpnav-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .wpnav-nav { display: none; }
  .wpnav-header-actions { display: none; }
}

/* ============================================================
   RESPONSIVE: Mobile (< 640px)
   Section padding: 56px
   ============================================================ */

@media (max-width: 640px) {
  .hp-container { padding: 0 20px; }

  .hp-hero { padding: 64px 0 40px; }
  .hp-hero__title { font-size: 28px; letter-spacing: -0.02em; }
  .hp-hero__subtitle { font-size: 16px; }
  .hp-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hp-hero-visual { padding: 24px 24px; }
  .hp-hero-visual__score { font-size: 15px; }
  .hp-hero-visual__row { padding: 10px 0; }

  /* Hero visual: compact on mobile */
  .hp-hero-visual {
    max-width: 100%;
    height: 210px;
  }
  .hp-hero-visual__card { padding: 13px 16px; }
  .hp-hero-visual__card:nth-child(1) { top: 16px; left: 16px; right: 28px; }
  .hp-hero-visual__card:nth-child(2) { top: 84px; left: 28px; right: 16px; }
  .hp-hero-visual__card:nth-child(3) { top: 152px; left: 40px; right: 24px; }
  .hp-hero-visual__score { font-size: 19px; }
  .hp-hero-visual__badge { bottom: 14px; left: 16px; }

  /* Logo band: allow wrapping on mobile */
  .hp-logoband__track {
    flex-wrap: wrap;
    gap: 16px 24px;
  }
  .hp-logoband__logo { height: 18px; max-width: 90px; }

  .hp-pathways { padding: 56px 0 48px; }
  .hp-pathways__title { font-size: 24px; }
  .hp-pathways__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hp-value { padding: 56px 0 48px; }
  .hp-value__heading { font-size: 22px; }
  .hp-value__cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hp-spotlight { padding: 56px 0 48px; }
  .hp-spotlight__heading { font-size: 28px; }

  .hp-compare-snapshot { padding: 24px 20px; }
  .hp-compare-snapshot__body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hp-compare-snapshot__divider { display: none; }
  .hp-compare-snapshot__col {
    padding-right: 0;
    padding-left: 0;
    border-bottom: 1px solid rgba(16, 24, 40, 0.07);
    padding-bottom: 20px;
  }
  .hp-compare-snapshot__col:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .hp-compare-snapshot__score { font-size: 36px; }

  .wpnav-footer { padding: 36px 0 0 0; }
  .wpnav-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .wpnav-footer__bottom { flex-direction: column; align-items: flex-start; }
}