/* ==========================================================
   AWELLE — LANDING PAGE SYSTEM  (awelle-landing-*)
   Added 3 September 2026.
   Restores the layout classes used by the homepage and all
   nine persona pages, which were present in the markup but
   defined in no stylesheet.
   Built from the theme's own tokens: base #070b14,
   surface #0b121e, primary #4E9187, text-muted #9ca3af,
   border rgba(255,255,255,.05), content width 1152px.
   TO REVERT: delete everything between this marker and the
   "END AWELLE LANDING SYSTEM" marker at the foot.
   ========================================================== */

:root{
  --awl-max: var(--wp--style--global--content-size, 1152px);
  --awl-pad-x: clamp(1.25rem, 5vw, 3rem);
  --awl-pad-y: clamp(3.5rem, 7vw, 6rem);
  --awl-base: var(--wp--preset--color--base, #070b14);
  --awl-surface: var(--wp--preset--color--surface, #0b121e);
  --awl-primary: var(--wp--preset--color--primary, #4E9187);
  --awl-primary-hover: var(--wp--preset--color--primary-hover, #467A56);
  --awl-muted: var(--wp--preset--color--text-muted, #9ca3af);
  --awl-border: var(--wp--preset--color--border, rgba(255,255,255,.06));
  --awl-primary-wash: rgba(78,145,135,.12);
}

/* ---------- section shells ---------- */
.awelle-landing-hero,
.awelle-landing-mid-bg,
.awelle-landing-light-bg,
.awelle-landing-dark-bg,
.awelle-landing-cta-section{
  padding-block: var(--awl-pad-y);
  padding-inline: var(--awl-pad-x);
}
.awelle-landing-hero > *,
.awelle-landing-mid-bg > *,
.awelle-landing-light-bg > *,
.awelle-landing-dark-bg > *,
.awelle-landing-cta-section > *,
.awelle-pattern-page > *{
  max-width: var(--awl-max);
  margin-inline: auto;
}

.awelle-landing-hero{
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(78,145,135,.13) 0%, transparent 62%),
    var(--awl-base);
}
.awelle-landing-mid-bg{ background-color: var(--awl-surface); }
.awelle-landing-dark-bg{ background-color: var(--awl-base); }
.awelle-landing-light-bg{ background-color: rgba(255,255,255,.032); }
.awelle-landing-cta-section{
  background: linear-gradient(180deg, var(--awl-surface), var(--awl-base));
  text-align: center;
}
.awelle-landing-cta-section .awelle-landing-sub,
.awelle-landing-cta-section .awelle-landing-story-body{ margin-inline: auto; }
.awelle-landing-cta-section .awelle-landing-hero-actions{ justify-content: center; }

/* ---------- type ---------- */
.awelle-landing-eyebrow{
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--awl-primary);
  margin: 0 auto .875rem;
}
.awelle-landing-title{
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--wp--preset--color--text, #fff);
  margin: 0 auto .75rem;
  text-wrap: balance;
}
h1.awelle-landing-title{ font-size: clamp(2.25rem, 5.2vw, 3.6rem); }
h2.awelle-landing-title{ font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3.awelle-landing-title{ font-size: clamp(1.125rem, 1.9vw, 1.375rem); letter-spacing: -.01em; line-height: 1.3; margin-top: 1.5rem; }

.awelle-landing-sub{
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.62;
  color: var(--awl-muted);
  margin: 0 auto 1.5rem;
  max-width: 64ch;
}
.awelle-landing-story-body{
  color: var(--awl-muted);
  line-height: 1.7;
  margin: 0 auto 1rem;
  max-width: 68ch;
}
.awelle-landing-story-pull{
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--wp--preset--color--text, #fff);
  border-left: 3px solid var(--awl-primary);
  padding-left: 1.25rem;
  margin: 0 auto 1.5rem;
  max-width: 60ch;
  text-wrap: balance;
}

/* lists inside landing sections */
.awelle-landing-hero ul,
.awelle-landing-mid-bg ul,
.awelle-landing-light-bg ul,
.awelle-landing-dark-bg ul{
  color: var(--awl-muted);
  line-height: 1.7;
  padding-left: 1.25rem;
  max-width: 68ch;
}
.awelle-landing-hero li,
.awelle-landing-mid-bg li,
.awelle-landing-light-bg li,
.awelle-landing-dark-bg li{ margin: .375rem 0; }
.awelle-landing-hero li strong,
.awelle-landing-mid-bg li strong,
.awelle-landing-light-bg li strong,
.awelle-landing-dark-bg li strong{ color: var(--wp--preset--color--text, #fff); font-weight: 600; }

/* ---------- buttons ---------- */
.awelle-landing-hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.75rem auto 0;
}
.awelle-landing-btn-primary,
.awelle-landing-btn-dark,
.awelle-landing-btn-ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8125rem 1.5rem;
  border-radius: .625rem;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.awelle-landing-btn-primary{ background: var(--awl-primary); color: #04120f; }
.awelle-landing-btn-primary:hover,
.awelle-landing-btn-primary:focus-visible{ background: var(--awl-primary-hover); color: #fff; }
.awelle-landing-btn-dark{ background: var(--awl-base); color: #fff; border-color: rgba(255,255,255,.14); }
.awelle-landing-btn-dark:hover,
.awelle-landing-btn-dark:focus-visible{ border-color: var(--awl-primary); }
.awelle-landing-btn-ghost{ background: transparent; color: #fff; border-color: rgba(255,255,255,.18); }
.awelle-landing-btn-ghost:hover,
.awelle-landing-btn-ghost:focus-visible{ border-color: var(--awl-primary); color: var(--awl-primary); }

/* ---------- cards ---------- */
.awelle-landing-card{
  background: var(--awl-surface);
  border: 1px solid var(--awl-border);
  border-radius: 1rem;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  transition: border-color .2s ease, transform .2s ease;
}
.awelle-landing-card:hover{ border-color: rgba(78,145,135,.45); transform: translateY(-2px); }
.awelle-landing-card-icon{
  width: 2.5rem; height: 2.5rem;
  border-radius: .625rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--awl-primary-wash);
  color: var(--awl-primary);
  font-size: 1.125rem;
  margin-bottom: .25rem;
}
.awelle-landing-card-tag{
  display: inline-block;
  align-self: flex-start;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .5rem;
  border-radius: .375rem;
  background: var(--awl-primary-wash);
  color: var(--awl-primary);
}

/* ---------- document list ---------- */
.awelle-landing-doc-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .75rem;
  margin: 1.5rem auto 0;
}
.awelle-landing-card-doc{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 1.125rem;
  border: 1px solid var(--awl-border);
  border-radius: .75rem;
  background: var(--awl-surface);
}
.awelle-landing-card-doc-name{ font-weight: 500; color: var(--wp--preset--color--text, #fff); }
.awelle-landing-card-doc-time{
  font-size: .8125rem;
  color: var(--awl-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- proof stats ---------- */
.awelle-landing-hero-proof{
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  margin: 2.5rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--awl-border);
}
.awelle-landing-stat{ display: flex; flex-direction: column; gap: .25rem; }
.awelle-landing-stat-num{
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--awl-primary);
  font-variant-numeric: tabular-nums;
}
.awelle-landing-stat-label{ font-size: .8125rem; color: var(--awl-muted); }

/* ---------- numbered steps ---------- */
.awelle-landing-step{
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.125rem 0;
  border-top: 1px solid var(--awl-border);
}
.awelle-landing-step:first-of-type{ border-top: none; }
.awelle-landing-step-num{
  width: 2.25rem; height: 2.25rem;
  border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--awl-primary-wash);
  color: var(--awl-primary);
  font-weight: 600;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- FAQ ---------- */
.awelle-landing-faq{
  border-bottom: 1px solid var(--awl-border);
  padding: 1.25rem 0;
}
.awelle-landing-faq:last-of-type{ border-bottom: none; }

/* ---------- callouts ---------- */
.awelle-landing-callout{
  border-left: 3px solid var(--awl-primary);
  background: rgba(78,145,135,.07);
  padding: 1.125rem 1.375rem;
  border-radius: 0 .75rem .75rem 0;
  color: var(--wp--preset--color--text, #fff);
  margin: 1.5rem auto;
  max-width: var(--awl-max);
  line-height: 1.6;
}
.awelle-landing-callout--light{
  background: rgba(255,255,255,.045);
  border-left-color: rgba(255,255,255,.35);
  color: var(--awl-muted);
}
.awelle-landing-cta-note{
  font-size: .875rem;
  color: var(--awl-muted);
  margin: 1rem auto 0;
}

/* ---------- tables ---------- */
.awelle-landing-table,
.awelle-pricing-table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem auto 0;
  font-size: .9375rem;
  display: block;
  overflow-x: auto;
}
.awelle-landing-table th, .awelle-landing-table td,
.awelle-pricing-table th, .awelle-pricing-table td{
  text-align: left;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--awl-border);
  vertical-align: top;
}
.awelle-landing-table th,
.awelle-pricing-table th{
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--awl-muted);
  font-weight: 600;
  white-space: nowrap;
}
.awelle-landing-table td,
.awelle-pricing-table td{ color: var(--wp--preset--color--text, #fff); }

/* ---------- solicitor review line ---------- */
.awelle-legal-team-review{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  font-size: .875rem;
  color: var(--awl-muted);
  border-top: 1px solid var(--awl-border);
  padding-top: 1.25rem;
  margin: 2rem auto 0;
  max-width: var(--awl-max);
}
.awelle-legal-team-review a{ color: var(--awl-primary); }

/* ---------- header actions ---------- */
.awelle-header-actions{ display: flex; align-items: center; gap: .75rem; }

/* ---------- responsive + motion ---------- */
@media (max-width: 640px){
  .awelle-landing-hero-proof{ gap: 1.5rem 2rem; }
  .awelle-landing-card{ padding: 1.25rem; }
  .awelle-landing-card-doc{ flex-direction: column; align-items: flex-start; gap: .25rem; }
  .awelle-landing-hero-actions > *{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .awelle-landing-card,
  .awelle-landing-btn-primary,
  .awelle-landing-btn-dark,
  .awelle-landing-btn-ghost{ transition: none; }
  .awelle-landing-card:hover{ transform: none; }
}

/* ==========================================================
   END AWELLE LANDING SYSTEM
   ========================================================== */
/* ==========================================================
   AWELLE — LANDING SYSTEM, PATCH 2
   Paste this directly BELOW the "END AWELLE LANDING SYSTEM"
   marker from the first block. Three fixes, each independent
   and each safe to delete on its own.
   ========================================================== */


/* ----------------------------------------------------------
   FIX 1 — PRIMARY BUTTON TEXT WAS INVISIBLE
   The theme sets link colour on <a> with higher specificity
   than a single class, so ".awelle-landing-btn-primary" lost
   and the label rendered green-on-green — the same failure
   your own "BUTTONS" section already fixes for theme buttons.
   !important is deliberate here: it is the only thing that
   reliably beats the theme's <a> colour rule.
   ---------------------------------------------------------- */
a.awelle-landing-btn-primary,
.awelle-landing-btn-primary{
  color: #04120f !important;
  font-weight: 600;
}
a.awelle-landing-btn-primary:hover,
a.awelle-landing-btn-primary:focus-visible,
.awelle-landing-btn-primary:hover,
.awelle-landing-btn-primary:focus-visible{
  color: #ffffff !important;
}
a.awelle-landing-btn-dark,
.awelle-landing-btn-dark{ color: #ffffff !important; }
a.awelle-landing-btn-ghost,
.awelle-landing-btn-ghost{ color: #ffffff !important; }
a.awelle-landing-btn-ghost:hover,
a.awelle-landing-btn-ghost:focus-visible{ color: var(--awl-primary) !important; }


/* ----------------------------------------------------------
   FIX 2 — TRUST GRID (three classes missed in the first pass)
   Used on /for-property/ and elsewhere:
   .awelle-landing-trust-grid > .awelle-landing-trust-item
     > span.awelle-landing-trust-icon + div > h4 + p
   ---------------------------------------------------------- */
.awelle-landing-trust-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 1.75rem auto 0;
  max-width: var(--awl-max);
}
.awelle-landing-trust-item{
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 1rem;
  align-items: start;
  background: var(--awl-surface);
  border: 1px solid var(--awl-border);
  border-radius: 1rem;
  padding: 1.375rem 1.5rem;
}
.awelle-landing-trust-icon{
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .625rem;
  background: var(--awl-primary-wash);
  color: var(--awl-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex: none;
}
/* the icon spans are empty in the markup — give them a mark
   so the column reads as intentional rather than blank */
.awelle-landing-trust-icon:empty::before{
  content: "✓";
  font-weight: 700;
  line-height: 1;
}
.awelle-landing-trust-item h4{
  margin: 0 0 .375rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--text, #fff);
  letter-spacing: -.01em;
}
.awelle-landing-trust-item p{
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--awl-muted);
}


/* ----------------------------------------------------------
   FIX 3 — DUPLICATE PAGE HEADING ON THE NINE PERSONA PAGES
   The theme prints the page title as an <h1> immediately above
   your hero, so "For HR Professionals" sits on top of a hero
   whose eyebrow already says "HR professionals · People teams".
   This hides the theme's title only on pages that actually have
   a landing hero — every other page keeps its title.
   Two H1s is not itself a ranking problem; this is a visual
   duplication fix. DELETE THIS BLOCK if you want the titles back.
   ---------------------------------------------------------- */
main:has(> .awelle-landing-hero) > .wp-block-post-title,
main:has(.awelle-landing-hero) > .wp-block-post-title{
  display: none;
}

/* ==========================================================
   END AWELLE LANDING PATCH 2
   ========================================================== */

/* ---------- FIX: footer nav links invisible ----------
   The footer Group block has the "has-border-color" text-color class,
   which sets text color to the "Border" swatch (rgba(255,255,255,0.05)) -
   nearly invisible. Reset it back to the normal text color. */
footer.wp-block-group.has-border-color{
  color: var(--wp--preset--color--text, #fff) !important;
}

/* ---------- FIX: page buttons invisible (green text on green background) ----------
   Theme rule ".wp-block-post-content a { color: var(--wp--preset--color--primary); }"
   overrides button link text to green, matching the green button background,
   for any filled button placed in the page content (e.g. "Choose your path",
   "Book an appointment"). Restore white text for those buttons only
   (outline-style buttons are left untouched). */
.wp-block-post-content .wp-block-button:not(.is-style-outline):not(.awelle-btn-outline) > .wp-block-button__link{
  color: var(--wp--preset--color--text, #fff) !important;
}


/* ---------- FIX: /for-smes/ document-cost table - left column invisible ----------
   Table cells with class "td-doc" (e.g. "Shareholders agreement", "Employment
   contract"...) carry an inline "color:#071E2B" (dark navy), presumably meant
   for a light table background. The page background here is near-black, so
   the text was unreadable. Restore normal text color. */
td.td-doc{
  color: var(--wp--preset--color--text, #fff) !important;
}


/* ---------- Claude fix: unify header CTA buttons (Login / Book an Appointment)
   with "Start your free trial" pill style. Added 3 September 2026.
   "Login" was carrying extra classes (awelle-btn-outline / is-style-outline--3)
   giving it a thinner, low-opacity border. "Book an Appointment" in the header
   is a plain Navigation link with no button styling at all. Both are restyled
   here to match the theme's default button look (2px solid white border,
   9999px pill radius, 16px/32px padding) already used by "Start your free
   trial" and "Choose your path". ---------- */
.awelle-header-actions .wp-block-button.awelle-btn-outline > .wp-block-button__link {
  border: 2px solid #fff !important;
  padding: 16px 32px !important;
}
.awelle-primary-navigation .wp-block-navigation-item > a[href="/book-appointment"] {
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 9999px;
  padding: 16px 32px;
  color: #fff;
  font-weight: 500;
}