/**
 * Mind35 Distro — portal stylesheet (design layer).
 *
 * Structure, 2026-09-23. This file holds DESIGN ONLY. Every @media block has
 * moved to assets/css/m35-portal-responsive.css, which is enqueued immediately
 * after this file and depends on it, so breakpoint rules always cascade last.
 *
 * Why the split. Responsive rules were scattered through the file at nine
 * different breakpoints, interleaved with the base rules they override. Reading
 * the effective style for any element meant tracing the cascade by hand across
 * 1,200 lines — which is how the C5 conflict and the hidden drawer CTA survived
 * three rounds of review. Base rules read top-down here; breakpoint behaviour
 * reads top-down there.
 *
 * Rules that were declared twice for the same selector have been merged into a
 * single declaration carrying the winning value. Computed styles are unchanged
 * and were verified in a browser at four viewport widths before and after.
 *
 * ---------------------------------------------------------------------------
 * CONTENTS
 *   1.  Design tokens
 *   2.  Typography
 *   3.  Header shell
 *   4.  Brand / logo
 *   5.  Pill navigation
 *   6.  Desktop dropdowns
 *   7.  Call-to-action button
 *   8.  Header actions + cart
 *   9.  Burger + close controls
 *   10. Mobile drawer
 *   11. Drawer navigation
 *   12. Utilities
 *   13. Site footer
 *   14. Welcome / login gate
 *   15. Flexible page — split cards
 *   16. Flexible page — features grid
 *   17. Flexible page — CTA + form
 *   18. Portal footer
 *   19. Password reset
 * ---------------------------------------------------------------------------
 */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

/*
  AUDIT C3 — --covu-gold was hard-coded #2563eb here and again on .covu-cta,
  with two more copies in footer.php and two in assets/css/mind35distro.css.
  Six declarations in total, four of them inside PHP templates — which is why
  deleting the blue from the stylesheet never removed it from the site. All six
  now resolve through the brand tokens, with the original blue kept only as a
  final fallback.

  AUDIT C7 — RESOLVED 2026-09-23. --font-heading was "Outfit", declared for
  every heading but never requested, so headings fell through to ui-sans-serif.
  The first round "fixed" that by ADDING Outfit to the font request, which put
  every heading on a typeface that was never approved. The approved portal
  typefaces are Playfair Display for headings and Inter for body, interface and
  button text, and header.php now requests those two families and nothing else.

  Playfair Display is a serif, so the heading fallback chain is serif. A heading
  rendered before the webfont arrives falls back to Georgia, not to system sans.
*/
:root{
  /* Colour */
  --covu-ink:      #0e1726;   /* deep navy text (matches screenshot) */
  --covu-muted:    #5b6471;
  --covu-bg:       #f8fafc;   /* page background feel */
  --covu-white:    #fff;
  --covu-line:     #D3DBEE;   /* soft border for pill */
  --covu-gold:     var(--m35-accent,   var(--ast-global-color-0, #6A0DAD));  /* CTA background */
  --covu-gold-2:   var(--m35-accent-2, var(--ast-global-color-1, #0B5F3A));  /* CTA hover */

  /* Shape */
  --covu-radius:    999px;    /* super-rounded */
  --covu-container: 1200px;
  --covu-shadow:    0 1px 2px rgba(14,23,38,.04), 0 6px 22px rgba(14,23,38,.06);

  /* Type */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}


/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

html,
body{
  font-family: var(--font-body);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
}

/*
  AUDIT C7 — form controls do not inherit font-family from their parent.

  Browsers apply their own UI font to button, input, select and textarea unless
  a stylesheet says otherwise, so setting Inter on <body> alone left every
  button and field rendering in the system font. The client's requirement is
  that button and interface text use Inter, so it is set explicitly.

  Element selectors only, at the lowest possible specificity, so any component
  rule still overrides it.
*/
button,
input,
select,
optgroup,
textarea,
.button,
.wp-element-button,
.woocommerce-Button,
.woocommerce button.button,
.woocommerce a.button{
  font-family: var(--font-body);
}


/* ==========================================================================
   3. HEADER SHELL
   ========================================================================== */

/*
  Merged: z-index was declared here and again 300 lines further down, under the
  comment "keep dropdowns above sticky header shadow". One declaration now.
*/
.covu-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
}

.covu-header__bar{
  width: min(1200px, 92%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
}


/* ==========================================================================
   4. BRAND / LOGO
   ========================================================================== */

.covu-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.covu-brand img{
  max-width: 80%;
  width: auto;
  display: block;
}


/* ==========================================================================
   5. PILL NAVIGATION
   ========================================================================== */

/* Merged: position:relative was a second .covu-pill rule further down, added
   as the dropdown anchor context. */
.covu-pill{
  position: relative;
  justify-self: center;
  background: var(--covu-white);
  border: 1px solid #D3DBEE;
  border-radius: var(--covu-radius);
  box-shadow: var(--covu-shadow);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

/*
  AUDIT C6 — RESOLVED 2026-09-23. This rule carried overflow:hidden, which was
  reversed later in the file by a second .covu-menu rule whose own comment read
  "was hidden – this clipped dropdowns". The broken declaration had never been
  deleted, so the file documented a bug it had already fixed. Both rules are now
  merged into this one, with the winning value. Computed value is unchanged.
*/
.covu-menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: nowrap;
  overflow: visible;
}

.covu-menu > li{
  position: relative;
}

.covu-menu > li > a{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--covu-ink);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .1px;
  white-space: nowrap;
}

.covu-menu > li > a:hover{
  background: #f3f6fb;
}


/* ==========================================================================
   6. DESKTOP DROPDOWNS
   ========================================================================== */

/* Thin caret, drawn with a mask so it inherits the link colour. */
.covu-menu > li.menu-item-has-children > a::after{
  content: '';
  width: 12px;
  height: 8px;
  margin-left: 8px;
  display: inline-block;
  background: currentColor;
  transform: translateY(1px);
  transition: transform .18s ease, opacity .18s ease, color .18s ease;
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M1 1l5 5 5-5'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M1 1l5 5 5-5'/></svg>") center/contain no-repeat;
  opacity: .9;
}

.covu-menu > li:hover > a::after,
.covu-menu > li:focus-within > a::after{
  transform: translateY(1px) rotate(180deg);
  opacity: 1;
}

/*
  Merged: list-style, margin and padding were repeated in a later "No bullets +
  no default indent in dropdowns" rule. Values here are the winning ones.

  NOTE — `margin: 0` is correct and deliberate. The first rule carried
  `margin-top: 10px` with the comment "keep a visible gap", but the later rule's
  `margin: 0` shorthand reset it, so the gap has never rendered. The computed
  value on the live site is 0, and it is reproduced exactly here rather than
  quietly reinstating a 10px gap nobody has seen.

  Consequence worth knowing: the `::before` hover bridge below spans top:-10px
  to cover that gap. With no gap to cover it is harmless but redundant. Left in
  place, since removing it would change the hover target area. Raised for the
  client rather than changed unilaterally.
*/
.covu-menu .sub-menu{
  --dd-w: 260px;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: var(--dd-w);
  background: var(--covu-white);
  border: 1px solid var(--covu-line);
  border-radius: 14px;
  box-shadow: var(--covu-shadow);
  margin: 0;
  padding: 8px;
  list-style: none;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1001;
}

.covu-menu .sub-menu li{
  list-style: none;
}

/* Hover bridge, so the panel does not vanish as the pointer crosses the gap. */
.covu-menu .sub-menu::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.covu-menu li:hover > .sub-menu,
.covu-menu li:focus-within > .sub-menu{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.covu-menu .sub-menu > li > a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--covu-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.covu-menu .sub-menu > li > a:hover{
  background: #f4f7fb;
}

/* Third level flies out to the right. */
.covu-menu .sub-menu .sub-menu{
  top: -8px;
  left: calc(100% + 10px);
}


/* ==========================================================================
   7. CALL-TO-ACTION BUTTON
   ========================================================================== */

/* AUDIT C3 — was background:#2563eb, hard-coded. Now token-driven. */
.covu-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 22px;
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 30px;
  background: var(--covu-gold);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/*
  AUDIT C12 — the CTA used to disappear on hover. .covu-header is white and the
  hover rule set the button's background to #fff as well, leaving black text on
  white with no boundary and no visible border. Hover now goes to the brand's
  green, which is what the brand rule asks for: purple button, green hover.
*/
.covu-cta:hover,
.covu-cta:focus-visible{
  background: var(--covu-gold-2);
  color: #fff;
  border-color: var(--covu-gold-2);
}


/* ==========================================================================
   8. HEADER ACTIONS + CART
   ========================================================================== */

.covu-header__actions{
  display: flex;
  align-items: center;
  gap: 20px;
  justify-self: end;
}

.covu-cart{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;               /* matches the burger */
  height: 46px;
  color: var(--covu-muted);
  border: 1px solid var(--covu-line);
  background: var(--covu-white);
  border-radius: 12px;
  box-shadow: var(--covu-shadow);
  text-decoration: none;
  transition: all .2s ease-in-out;
}

.covu-cart:hover{
  color: var(--covu-ink);
  border-color: #c0c9e0;
  transform: translateY(-1px);
}

.covu-cart__icon{
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}

.covu-cart__count{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--covu-white);
  border-radius: 50%;
  background-color: #f53b57;
  color: var(--covu-white);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}


/* ==========================================================================
   9. BURGER + CLOSE CONTROLS
   ========================================================================== */

/* Hidden on desktop; revealed by the 1024px breakpoint in the responsive file. */
.covu-burger{
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--covu-line);
  background: var(--covu-white);
  align-items: center;
  justify-content: center;
  flex-direction: column;    /* stack the bars */
  cursor: pointer;
  box-shadow: var(--covu-shadow);
}

.covu-burger span{
  display: block;
  width: 22px;
  height: 2px;
  background: #0f1720;
  border-radius: 2px;
}

.covu-burger span + span{
  margin-top: 6px;
}

/*
  AUDIT C6 — RESOLVED 2026-09-23. A second, near-identical .covu-close block sat
  inside the drawer section. It omitted position:relative, which the
  .covu-close span rules below depend on. One definition now.
*/
.covu-close{
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--covu-line);
  background: var(--covu-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.covu-close span{
  position: absolute;
  width: 22px;
  height: 2px;
  background: #0f1720;
  border-radius: 2px;
}

.covu-close span:first-child{ transform: rotate(45deg); }
.covu-close span:last-child{  transform: rotate(-45deg); }

.covu-close svg{
  width: 22px;
  height: 22px;
}


/* ==========================================================================
   10. MOBILE DRAWER
   ========================================================================== */

/*
  AUDIT C4 — the mobile drawer could not animate.

  The old rules were:
      .covu-drawer{ display:none; }
      .covu-drawer[aria-hidden="false"]{ display:block; }
  with .covu-drawer__panel transitioning `transform`. The element went from
  display:none to display:block in the SAME frame that transform changed, and a
  browser cannot transition a property on an element that did not exist in the
  previous frame — so the 280ms slide was skipped and the panel appeared
  instantly. That is the "drawer opens too quickly" behaviour, and it lived in
  header.php, not in any stylesheet.

  The drawer now stays in the render tree and animates visibility + opacity,
  with visibility delayed on close so the slide-out is visible. pointer-events
  keeps it click-through while hidden.

  NOTE: never add !important to .covu-drawer__panel { transform }. The swipe-drag
  JS writes an inline transform during the gesture and !important would freeze
  it mid-swipe.

  The prefers-reduced-motion companion rule lives in the responsive file.
*/
.covu-drawer{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.45);
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity .28s ease, visibility 0s linear .28s;
}

.covu-drawer[aria-hidden="false"]{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .28s ease, visibility 0s linear 0s;
}

.covu-drawer__panel{
  position: absolute;
  inset: 0 0 0 auto;
  width: min(92vw, 420px);
  padding: 20px;
  background: var(--covu-white);
  overflow: auto;
  box-shadow: -10px 0 30px rgba(14,23,38,.18);
  transform: translateX(100%);
  transition: transform .28s ease;
  display: flex;
  flex-direction: column;
}

.covu-drawer[aria-hidden="false"] .covu-drawer__panel{
  transform: none;
}

.covu-drawer__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--covu-line);
}

/*
  Drawer action area. This is the element the markup actually uses
  (header.php:217). A rule for `.covu-drawer__cta` used to sit in this file and
  matched nothing — see AUDIT C6 in REMOVED-CODE-v5.md.
*/
.covu-drawer__actions{
  margin-top: auto;          /* push the actions to the bottom */
  padding-top: 20px;
  border-top: 1px solid var(--covu-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.covu-drawer__cart-link{
  display: block;
  padding: 10px 8px;
  border-radius: 999px;
  background: #f4f7fb;
  color: var(--covu-muted);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  transition: color .2s ease;
}

.covu-drawer__cart-link:hover{
  color: var(--covu-ink);
}


/* ==========================================================================
   11. DRAWER NAVIGATION
   ========================================================================== */

/*
  AUDIT C6 — RESOLVED 2026-09-23. .covu-drawer__menu and .covu-drawer__menu li a
  were each declared twice. The later pair won on gap and padding; the earlier
  pair contributed justify-content:space-between, which the later pair did not
  set. Both are merged here with every winning value. Computed styles unchanged.
*/
.covu-drawer__menu{
  list-style: none;
  margin: 0;
  padding: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.covu-drawer__menu li{
  border-bottom: 1px solid var(--covu-line);
}

.covu-drawer__menu li a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--covu-ink);
  font-weight: 600;
}

.covu-drawer__menu li a:hover{
  background: #f4f7fb;
}

.covu-drawer__menu .sub-menu li{
  border-bottom: none;
}

/* --- Accordion submenus ------------------------------------------------- */

.covu-drawer__menu .menu-item-has-children{
  position: relative;
}

.covu-drawer__menu .menu-item-has-children > a{
  padding-right: 40px;       /* room for the toggle */
}

.covu-drawer__menu .submenu-toggle{
  position: absolute;
  right: 6px;
  top: 8px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--covu-line);
  background: var(--covu-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.covu-drawer__menu .submenu-toggle::before{
  content: '›';
  font-size: 18px;
  line-height: 1;
  color: #98a2b3;
  transform: rotate(90deg);
  transition: transform .18s ease;
}

.covu-drawer__menu .menu-item-has-children.is-open > .submenu-toggle::before{
  transform: rotate(-90deg);
}

/* Collapsed by default; the toggle JS animates max-height. */
.covu-drawer__menu .sub-menu{
  overflow: hidden;
  max-height: 0;
  margin: 0 0 8px 8px;
  padding-left: 12px;
  border-left: 2px solid var(--covu-line);
  transition: max-height .25s ease;
}

.covu-drawer__menu .sub-menu a{
  display: block;
  padding: 12px 6px;
  border-radius: 10px;
  font-weight: 600;
  color: var(--covu-ink);
}

.covu-drawer__menu .sub-menu a:hover{
  background: #f4f7fb;
}


/* ==========================================================================
   12. UTILITIES
   ========================================================================== */

.sr-only{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}


/* ==========================================================================
   13. SITE FOOTER — from footer.php
   ========================================================================== */

/*
  AUDIT C2 — this token block used to target :root.

  header.php also defines :root, and because the footer prints later in the
  document its values won for the WHOLE page. Every header border, pill outline,
  burger button and drawer divider silently used the footer's --covu-line
  (#e7eef7) instead of the #D3DBEE written 300 lines earlier, which made the
  header impossible to tune by reading header.php alone. Scoped to .covu-footer,
  so these values apply to the footer and nowhere else.

  AUDIT C3 — --covu-gold and --covu-gold-2 were both hard-coded #2563eb. Two
  consequences: the blue could not be removed by editing the stylesheet, because
  it lived in a PHP template; and with both tokens set to the same value
  .covu-btn:hover produced no visible hover state at all.

  Merged: the tokens and the layout properties were two separate .covu-footer
  rules. One rule now.
*/
.covu-footer{
  --covu-ink:    #0e1726;
  --covu-muted:  #6b7280;
  --covu-line:   #e7eef7;
  --covu-bg:     #f3f6fb;
  --covu-card:   #F7F8FB;
  --covu-white:  #fff;
  --covu-gold:   var(--m35-accent,   var(--ast-global-color-0, #6A0DAD));
  --covu-gold-2: var(--m35-accent-2, var(--ast-global-color-1, #0B5F3A));
  --covu-radius: 20px;
  --container:   min(1200px, 92vw);

  background: #fff;
  width: min(1200px, 92%);
  margin: 0 auto;
  margin-top: 50px;
}

.covu-footer__wrap{
  width: 100%;
  margin: 0 auto;
  background: var(--covu-card);
  border: 1px solid var(--covu-line);
  border-radius: 26px;
  padding: clamp(18px, 3vw, 36px);
}

.covu-footer__top{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 40px);
  padding-bottom: clamp(18px, 3vw, 32px);
}

.covu-footer__brand{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
}

.covu-footer__logo img{
  width: auto;
  display: block;
}

.covu-footer__social{
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 14px 0 12px;
}

.covu-footer__social a{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  text-decoration: none;
  color: var(--covu-ink);
  font-size: 18px;
}

.covu-footer__social a:hover{
  color: var(--covu-gold);
}

.covu-footer__addr{
  color: var(--covu-muted);
  font-size: 14px;
  line-height: 1.7;
}

.covu-footer__copy{
  color: var(--covu-muted);
  font-size: 14px;
  margin-top: 6px;
}

.covu-footer__cta{
  text-align: right;
}

.covu-footer__cta h3{
  color: var(--covu-ink);
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.25;
  margin: 8px 0 16px;
  font-weight: 800;
}

.covu-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 22px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  background: var(--covu-gold);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

.covu-btn:hover{
  background: var(--covu-gold-2);
}

.covu-footer__grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 2vw, 28px);
  border-top: 1px solid var(--covu-line);
  padding-top: clamp(16px, 2vw, 24px);
}

.covu-col h4{
  font-size: 15px;
  font-weight: bold;
  color: var(--covu-ink);
  margin-bottom: 10px;
}

.covu-col ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.covu-col li{
  margin: 8px 0;
}

.covu-col a{
  color: #4b5563;
  text-decoration: none;
  font-size: 14.5px;
}

.covu-col a:hover{
  color: #0e1726;
}


/* ==========================================================================
   14. WELCOME / LOGIN GATE — from page-welcome.php
   ========================================================================== */

/*
  Merged: min-height was set to 100vh here and overridden to
  calc(100vh - 150px) by a second .gate-viewport rule in the portal-footer
  section, so the footer would sit below the fold instead of fighting the
  centred grid. The winning value is used.

  AUDIT C7 — font-family was a hard-coded system stack, which bypassed the
  approved body typeface on the welcome and login pages.
*/
.gate-viewport{
  min-height: calc(100vh - 150px);
  display: grid;
  place-items: center;
  background: #fff;
  font-family: var(--font-body);
}

.gate-logo{
  margin-bottom: 20px;
  width: 30%;
}

.gate-card{
  text-align: center;
}

/*
  Approved welcome-page content (client item 6). The approved heading is far
  longer than the old "Mind35 Distro", so the clamp is capped and given a
  readable measure instead of running to 88px.
*/
.gate-title{
  font-size: clamp(30px, 6vw, 40px);
  max-width: 25ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

/* Merged: .gate-sub was declared twice — base type, then measure and rhythm. */
.gate-sub{
  margin: 0 auto 38px;
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.6;
  color: #111;
}

/*
  Merged: .gate-btn was declared twice. The first uppercased its label; the
  approved wording is "Sign In" in sentence case, so text-transform and
  letter-spacing carry the later, winning values.
*/
.gate-btn{
  display: inline-block;
  padding: 14px 28px;
  background: #000;
  color: #fff;
  text-decoration: none;
  text-transform: none;
  letter-spacing: .2px;
  font-weight: 600;
  border-radius: 0;
  transition: transform .12s ease, opacity .12s ease;
}

.gate-btn:hover{ transform: translateY(-1px); opacity: .95; }
.gate-btn:active{ transform: translateY(0); }

/* Support line under the button. */
.gate-support{
  margin: 26px 0 0;
  font-size: 15px;
  color: #444;
}

.gate-support a{
  color: var(--m35-accent, var(--ast-global-color-0, #6A0DAD));
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.gate-support a:hover,
.gate-support a:focus-visible{
  color: var(--m35-accent-2, var(--ast-global-color-1, #0B5F3A));
}


/* ==========================================================================
   15. FLEXIBLE PAGE — SPLIT CARDS
   ========================================================================== */

.split{
  display: grid;
  grid-template-columns: minmax(320px,520px) 1fr;  /* copy left, image right */
  gap: clamp(16px,3vw,32px);
  align-items: center;
}

.split--left{
  grid-template-columns: 1fr minmax(320px,520px);  /* image left */
}

.split--right .split__copy{  order: 1; }
.split--right .split__media{ order: 2; }
.split--left  .split__media{ order: 1; }
.split--left  .split__copy { order: 2; }

/* Merged: .split--solo was declared three times, identically. */
.split--solo{
  grid-template-columns: 1fr !important;
}

.split__copy{
  padding: clamp(18px,3vw,20px);
}

/* Career-card chrome. */
.split--career-card{
  background: #fff;
  border: 1px solid rgba(16,24,40,.06);
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 8px 26px rgba(16,24,40,.08);
}

.split--career-card .split__media{
  position: relative;
  min-height: -webkit-fill-available;   /* gives the background a height */
  border-radius: 12px;
  overflow: hidden;
}

.split__media--bg{
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.split__media-overlay{
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 70% 30%, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 60%);
  pointer-events: none;
}

/* Rich text inside the card. */
.split--career-card .entry-content{
  max-width: 68ch;
}

.split--career-card .entry-content p{
  margin: 0 0 12px;
}

.split--career-card .entry-content h2,
.split--career-card .entry-content h3{
  margin: 10px 0 8px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.split--career-card .entry-content h2{ font-size: clamp(22px, 3vw, 28px); }
.split--career-card .entry-content h3{ font-size: clamp(18px, 2.2vw, 22px); }

/* Collapsible "See more". */
.lead-collapsible .lead-body{
  overflow: hidden;
  transition: max-height .25s ease;
}

.lead-collapsible.is-collapsed .lead-body{
  max-height: 220px;         /* teaser height */
}

.lead-toggle{
  margin-top: 8px;
  border: 0;
  background: #111827;
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

.lead-toggle[aria-expanded="true"]::after{  content: "  ↑"; }
.lead-toggle[aria-expanded="false"]::after{ content: "  ↓"; }


/* ==========================================================================
   16. FLEXIBLE PAGE — FEATURES GRID
   ========================================================================== */

.feat-2col{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
}

/* Stop legacy grid spans interfering. */
.feat-2col > .feat-item{
  grid-column: auto !important;
  min-width: 0;
}


/* ==========================================================================
   17. FLEXIBLE PAGE — CTA + FORM
   ========================================================================== */

.cta-form-section{
  display: grid;
  grid-template-columns: 1fr 1.1fr;   /* a little more room for the form */
  gap: clamp(3rem, 6vw, 5rem);
  padding: clamp(1rem, 3vw, 2rem);
  align-items: center;
  background-color: #ffffff;
  overflow: hidden;          /* needed for border-radius on children */
}

.cta-form-section__content{
  position: relative;
}

.cta-form-section__content h2{
  font-size: clamp(28px, 4vw, 35px);
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(45deg, #2c3e50, #000000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #1a202c;            /* fallback */
}

.cta-form-section__content p{
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: #52525b;
  max-width: 40ch;
  line-height: 1.6;
}

/* --- WPForms ------------------------------------------------------------ */

.cta-form-section__form .wpforms-form{
  background: #111827;
  border-radius: 16px;
  padding: clamp(1.5rem, 5vw, 3rem);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cta-form-section__form .wpforms-field-label{
  color: #a1a1aa !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
}

.cta-form-section__form .wpforms-field input[type="text"],
.cta-form-section__form .wpforms-field input[type="email"],
.cta-form-section__form .wpforms-field input[type="url"],
.cta-form-section__form .wpforms-field input[type="tel"],
.cta-form-section__form .wpforms-field input[type="number"],
.cta-form-section__form .wpforms-field textarea{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid #4b5563 !important;
  color: #ffffff !important;
  font-size: 1.1rem !important;
  padding: 0.75rem 0.25rem !important;
  width: 100%;
  transition: border-color 0.3s ease-in-out !important;
  box-shadow: none !important;
}

.cta-form-section__form .wpforms-field input:focus,
.cta-form-section__form .wpforms-field textarea:focus{
  outline: none !important;
  border-bottom-color: #4f46e5 !important;
}

.cta-form-section__form .wpforms-field{
  padding-bottom: 24px;
}

.cta-form-section__form .wpforms-submit-container{
  margin-top: 1.5rem;
  padding: 0 !important;
}

.cta-form-section__form .wpforms-submit{
  width: 100% !important;
  background: linear-gradient(90deg, #4f46e5, #7c3aed) !important;
  color: white !important;
  border: none !important;
  padding: 1rem !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.cta-form-section__form .wpforms-submit:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 7px 25px rgba(124, 58, 237, 0.4) !important;
}


/* ==========================================================================
   18. PORTAL FOOTER (client item 11) — inc/m35-portal-footer.php
   ========================================================================== */

.m35-pfooter{
  margin-top: 56px;
  padding: 28px 0 34px;
  background: #fff;
  border-top: 1px solid var(--covu-line, #D3DBEE);
}

.m35-pfooter__inner{
  width: min(1200px, 92%);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}

.m35-pfooter__brand{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m35-pfooter__brandlink{
  text-decoration: none;
  display: inline-flex;
}

.m35-pfooter__logo{
  width: 58%;
  display: block;
}

.m35-pfooter__wordmark{
  font-family: var(--font-heading, inherit);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--covu-ink, #0e1726);
}

.m35-pfooter__tagline{
  margin: 0;
  font-size: 13.5px;
  letter-spacing: .3px;
  text-transform: capitalize;
  color: var(--covu-muted, #5b6471);
}

.m35-pfooter__links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
}

.m35-pfooter__links a{
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--covu-ink, #0e1726);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.m35-pfooter__links a:hover,
.m35-pfooter__links a:focus-visible{
  color: var(--m35-accent, #6A0DAD);
  border-bottom-color: var(--m35-accent, #6A0DAD);
}

.m35-pfooter__links .is-logout a{
  color: #96301f;
}

.m35-pfooter__links .is-logout a:hover,
.m35-pfooter__links .is-logout a:focus-visible{
  color: #7a2418;
  border-bottom-color: #7a2418;
}

.m35-pfooter__copy{
  flex-basis: 100%;
  margin: 6px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--covu-line, #D3DBEE);
  font-size: 13px;
  color: var(--covu-muted, #5b6471);
}


/* ==========================================================================
   19. PASSWORD RESET (client item 13) — woocommerce/myaccount/form-*.php
   ========================================================================== */

.m35-reset{
  width: min(520px, 92%);
  margin: clamp(32px, 7vw, 72px) auto;
}

/* AUDIT C7 — was a bare 'Playfair Display' with no fallback chain. Routed
   through the heading token so it matches every other heading. */
.m35-reset__title{
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 14px;
  color: #000;
}

.m35-reset__intro{
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}

.m35-reset__form .form-row{
  margin: 0 0 18px;
  width: 100%;
  float: none;
}

.m35-reset__form label{
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

.m35-reset__form input[type="text"],
.m35-reset__form input[type="password"]{
  width: 100%;
  padding: 13px 14px;
  font-size: 16px;
  border: 1px solid var(--covu-line, #D3DBEE);
  border-radius: 10px;
  background: #fff;
  color: #111;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.m35-reset__form input[type="text"]:focus,
.m35-reset__form input[type="password"]:focus{
  outline: none;
  border-color: var(--m35-accent, #6A0DAD);
  box-shadow: 0 0 0 3px rgba(106, 13, 173, .12);
}

.m35-reset__submit{
  display: inline-block;
  width: 100%;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--m35-accent, #6A0DAD);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background-color .18s ease, transform .12s ease;
}

.m35-reset__submit:hover,
.m35-reset__submit:focus-visible{
  background: var(--m35-accent-2, #0B5F3A);
  transform: translateY(-1px);
}

.m35-reset__links{
  margin: 24px 0 0;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.m35-reset__links a{
  color: var(--m35-accent, #6A0DAD);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.m35-reset__links a:hover,
.m35-reset__links a:focus-visible{
  color: var(--m35-accent-2, #0B5F3A);
}

.m35-reset__sep{
  color: #999;
}

.login-note--success{
  background: #f2f9f5;
  border-left: 3px solid var(--m35-accent-2, #0B5F3A);
  color: #0B5F3A;
}

/* End of design layer. Breakpoint rules: assets/css/m35-portal-responsive.css */