/* ==========================================================================
   ASCEND v3 design system
   Lifted from preview-v3.html so every surface on the site shares one system.

   Layer 1  tokens            global, harmless on their own
   Layer 2  components        apply only where the markup opts in
   Layer 3  surface base      scoped to converted surfaces, widened as pages
                              are ported over
   ========================================================================== */

/* ---------- Layer 1: tokens ---------- */
:root{
  --paper:#F4F2EC; --raise:#FFFFFF;
  --ink:#0B0B0C; --ink-2:#4A4E52; --ink-3:#62676C;
  --line:rgba(11,11,12,.13); --line-soft:rgba(11,11,12,.08);
  --jade:#35D0A0; --jade-hover:#2BBE91; --jade-deep:#0C7451;
  --dark:#0B0B0C; --dark-ink:#F2F1EB; --dark-ink-2:#A8ADAF; --dark-line:rgba(242,241,235,.16);
  --font:'HK Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-touch:10px; --r-surface:16px;
  --ease:cubic-bezier(.23,1,.32,1);
  --nav-h:64px; --nav-gap:14px;
}

html{scroll-padding-top:96px}

/* ---------- Layer 2: components ---------- */
.a-wrap{width:100%;max-width:1220px;margin:0 auto;padding-inline:24px}
@media(max-width:640px){.a-wrap{padding-inline:16px}}

.a-display{font-size:clamp(38px,5.3vw,68px);font-weight:700;letter-spacing:-.037em;line-height:1;text-wrap:balance}
.a-h2{font-size:clamp(27px,4vw,52px);font-weight:700;letter-spacing:-.032em;line-height:1.04;text-wrap:balance}
.a-h3{font-size:20px;font-weight:600;letter-spacing:-.016em;line-height:1.28}
.a-lede{font-size:clamp(17px,1.5vw,19px);line-height:1.58;color:var(--ink-2);max-width:56ch}
.a-body{color:var(--ink-2);max-width:62ch}

.a-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;
  border:1px solid transparent;border-radius:var(--r-touch);background:var(--jade);color:var(--ink);
  font-family:inherit;font-size:15.5px;font-weight:600;letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:transform 160ms var(--ease),background-color 200ms ease}
.a-btn:active{transform:scale(.975)}
.a-btn--sm{min-height:42px;padding:0 18px;font-size:14.5px}
.a-btn--quiet{background:transparent;border-color:var(--line);color:var(--ink)}
@media(hover:hover) and (pointer:fine){
  .a-btn:hover{background:var(--jade-hover)}
  .a-btn--quiet:hover{background:rgba(11,11,12,.04)}
}
.a-btn:focus-visible,.a-nav a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* floating pill header */
.a-navwrap{position:fixed;top:0;left:0;right:0;z-index:40;padding:var(--nav-gap) 24px 0;
  padding-top:calc(var(--nav-gap) + env(safe-area-inset-top,0px));pointer-events:none}
.a-nav{pointer-events:auto;max-width:1220px;margin:0 auto;height:var(--nav-h);display:flex;align-items:center;gap:28px;
  padding:0 10px 0 20px;border:1px solid var(--line-soft);border-radius:var(--r-surface);
  background:rgba(244,242,236,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  transition:box-shadow 240ms ease,background-color 240ms ease}
.a-nav[data-stuck="true"]{background:rgba(244,242,236,.9);box-shadow:0 10px 30px rgba(11,11,12,.07)}
.a-nav .a-brand{font-size:17px;font-weight:700;letter-spacing:.14em;text-decoration:none;color:var(--ink)}
.a-navlinks{display:flex;gap:24px;margin-left:8px}
.a-navlinks a{font-size:15px;color:var(--ink-2);text-decoration:none;transition:color 180ms ease}
@media(hover:hover){.a-navlinks a:hover{color:var(--ink)}}
.a-navend{margin-left:auto;display:flex;align-items:center;gap:14px}
.a-navend .a-signin{font-size:15px;color:var(--ink-2);text-decoration:none}
@media(hover:hover){.a-navend .a-signin:hover{color:var(--ink)}}
@media(max-width:900px){.a-navlinks{display:none}.a-nav{height:58px}}
@media(max-width:560px){.a-navend .a-signin{display:none}.a-nav{padding-left:16px}}

/* footer */
.a-footer{border-top:1px solid var(--line);padding-block:48px;
  padding-bottom:calc(56px + env(safe-area-inset-bottom,0px));margin-top:72px}
.a-foot{display:flex;gap:28px;align-items:baseline;flex-wrap:wrap}
.a-foot .a-brand{font-size:15px;font-weight:700;letter-spacing:.14em;text-decoration:none;color:var(--ink)}
.a-footlinks{display:flex;gap:22px;margin-left:auto}
.a-footlinks a{font-size:15px;color:var(--ink-2);text-decoration:none}
@media(hover:hover){.a-footlinks a:hover{color:var(--ink)}}
.a-footnote{margin-top:26px;font-size:14px;color:var(--ink-3)}
@media(max-width:640px){.a-footlinks{margin-left:0;width:100%}}

/* accordion */
.a-qa{max-width:860px;border-top:1px solid var(--line)}
.a-qa details{border-bottom:1px solid var(--line)}
.a-qa summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;font-size:19px;font-weight:600;letter-spacing:-.017em}
.a-qa summary::-webkit-details-marker{display:none}
.a-qa summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-6px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);
  transition:transform 220ms var(--ease)}
.a-qa details[open] summary::after{transform:rotate(-135deg)}
.a-qa .a-ans{padding:0 44px 26px 0;color:var(--ink-2);max-width:66ch;overflow:hidden}

/* motion */
.js .a-reveal{opacity:0;transform:translateY(14px)}
.js .a-reveal.in{opacity:1;transform:none;transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
@media(prefers-reduced-motion:reduce){
  .js .a-reveal,.js .a-reveal.in{opacity:1;transform:none;transition:none}
  .a-btn,.a-nav,.a-qa summary::after{transition:none}
}

/* ---------- Layer 3: surface base ----------
   Applied only to surfaces already ported to v3. Add a body class here as
   each further surface is ported, rather than styling bare `body`. */
body.ascend-v3{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.ascend-v3 img{max-width:100%}
body.ascend-v3 a{color:inherit}

/* Nav clearance is a separate opt-in, because surfaces with their own shell
   (the member area and its sidebar) take the design system without the
   floating pill header. */
body.ascend-v3-nav{padding-top:calc(var(--nav-h) + var(--nav-gap) + 18px + env(safe-area-inset-top,0px))}
@media(max-width:900px){body.ascend-v3-nav{padding-top:calc(58px + var(--nav-gap) + 16px + env(safe-area-inset-top,0px))}}

/* the old flat topbars are replaced by the pill header where it renders */
body.ascend-v3-nav .ascend-topbar{display:none}

/* ---------- Auth form submit, on the v3 button ----------
   Signing in is the primary action on that page, so it takes the primary
   button treatment rather than the old mono black one. */
#ascend-wp-submit.button,
body.ascend-v3 #ascend-wp-submit,
.ascend-auth-form #ascend-wp-submit{
  font-family:var(--font);font-size:15.5px;font-weight:600;letter-spacing:-.005em;text-transform:none;
  border-radius:var(--r-touch);min-height:50px;padding:0 26px;line-height:1;
  background:var(--jade);color:var(--ink);border:1px solid var(--jade);
  transition:transform 160ms var(--ease),background-color 200ms ease}
#ascend-wp-submit.button:active{transform:scale(.975)}
@media(hover:hover) and (pointer:fine){
  #ascend-wp-submit.button:hover{background:var(--jade-hover);border-color:var(--jade-hover);color:var(--ink)}
}

/* ---------- Password reveal on the auth forms ---------- */
.ascend-pw-wrap{position:relative;display:block}
.ascend-pw-wrap input{padding-right:52px}
.ascend-pw-toggle{position:absolute;top:50%;right:7px;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;
  border:0;background:transparent;border-radius:8px;cursor:pointer;color:#62676C;
  transition:color 160ms ease,background-color 160ms ease}
.ascend-pw-toggle svg{width:20px;height:20px;display:block}
@media(hover:hover) and (pointer:fine){
  .ascend-pw-toggle:hover{color:#0B0B0C;background:rgba(11,11,12,.05)}
}
.ascend-pw-toggle:focus-visible{outline:2px solid #0B0B0C;outline-offset:2px}

/* ---------- Elementor buttons on ported pages ----------
   Shape and typography only. Background and border stay as authored, so the
   primary / secondary distinction each page makes is preserved. */
body.ascend-v3 .e-button-base{
  font-family:var(--font);font-size:15.5px;font-weight:600;letter-spacing:-.005em;
  text-transform:none;border-radius:var(--r-touch);min-height:50px;padding-inline:26px}

/* The member sidebar builds its navigation out of button widgets. They are tabs,
   not calls to action, so they keep the v3 type without the button sizing. */
body.ascend-v3 .elementor-element-hm-nav .e-button-base,
body.ascend-v3 .elementor-element-hm-help .e-button-base{
  min-height:38px;padding-inline:14px;font-size:15px;font-weight:500}

/* On narrow screens the sidebar becomes one scrollable strip rather than
   reflowing into ragged columns. */
@media(max-width:1024px){
  body.ascend-v3 .elementor-element-hm-sidebar{flex-wrap:nowrap;height:auto}
  body.ascend-v3 .elementor-element-hm-nav{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
  body.ascend-v3 .elementor-element-hm-nav::-webkit-scrollbar{display:none}
  body.ascend-v3 .elementor-element-hm-nav .e-button-base{flex:0 0 auto;white-space:nowrap}
}

/* ---------- v3-commerce: WooCommerce controls on the v3 system ---------- */
body.ascend-v3 .woocommerce a.button,
body.ascend-v3 .woocommerce button.button,
body.ascend-v3 .woocommerce input.button,
body.ascend-v3 .wc-block-components-button,
body.ascend-v3 .wp-element-button,
body.ascend-v3 #place_order{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;
  border:1px solid transparent;border-radius:var(--r-touch);background:var(--jade);color:var(--ink);
  font-family:var(--font);font-size:15.5px;font-weight:600;letter-spacing:-.005em;text-transform:none;
  text-decoration:none;cursor:pointer;white-space:nowrap;line-height:1;
  transition:transform 160ms var(--ease),background-color 200ms ease}
body.ascend-v3 .woocommerce a.button:active,
body.ascend-v3 .woocommerce button.button:active,
body.ascend-v3 .wc-block-components-button:active,
body.ascend-v3 #place_order:active{transform:scale(.975)}
@media(hover:hover) and (pointer:fine){
  body.ascend-v3 .woocommerce a.button:hover,
  body.ascend-v3 .woocommerce button.button:hover,
  body.ascend-v3 .wc-block-components-button:hover,
  body.ascend-v3 .wp-element-button:hover,
  body.ascend-v3 #place_order:hover{background:var(--jade-hover);color:var(--ink)}
}
/* secondary actions read quieter than the primary one */
body.ascend-v3 .woocommerce a.button.wc-backward,
body.ascend-v3 .woocommerce button[name="update_cart"]{
  background:transparent;border-color:var(--line);color:var(--ink)}
@media(hover:hover) and (pointer:fine){
  body.ascend-v3 .woocommerce a.button.wc-backward:hover,
  body.ascend-v3 .woocommerce button[name="update_cart"]:hover{background:rgba(11,11,12,.04)}
}
/* headings and surfaces follow the v3 scale */
body.ascend-v3 .woocommerce h1,
body.ascend-v3 .wp-block-post-title,
body.ascend-v3 .entry-title{font-size:clamp(27px,4vw,52px);font-weight:700;letter-spacing:-.032em;line-height:1.04}
body.ascend-v3 .wc-block-components-notice-banner,
body.ascend-v3 .woocommerce-info,
body.ascend-v3 .woocommerce-message{
  background:var(--raise);border:1px solid var(--line);border-radius:var(--r-surface);color:var(--ink)}
body.ascend-v3 .wc-block-components-notice-banner svg{fill:var(--jade-deep)}

/* the place-order button carries a mono rule from the previous design */
body.ascend-v3 .woocommerce button#place_order.button,
body.ascend-v3 form.checkout button#place_order.button,
body.ascend-v3 button#place_order.button.alt{
  font-family:var(--font);font-size:17px!important;font-weight:600;letter-spacing:-.01em;text-transform:none;
  min-height:56px!important;padding:0 28px!important}