@import url("refinement.css?v=refinement-1");

/* ========================================================================== 
   CLUTCHwx: qualification, bridge, value framing and pricing hierarchy.

   Loads last. No new colours, no new type family, no new motion vocabulary:
   the three greens, the sage, the single gold and the eyebrow contract are all
   taken from tone-motion.css and eyebrow-credentials.css. What is new here is
   sequencing. The page now qualifies the coach before it explains the work,
   names what the money buys before it shows a number, and puts the portal and
   the Operating Intelligence layer after the human service, not in front of it.
   ========================================================================== */

#qualify{scroll-margin-top:calc(var(--header-height) + 20px)}

/* ==========================================================================
   1. QUALIFICATION
   Directly below the hero, on the hero's own surface. One hairline is the only
   joint, so it reads as the hero finishing its thought rather than as a new
   pitch. Understated on purpose: this has to qualify, not intimidate.
   ========================================================================== */
.qualify{
  position:relative;
  background-color:var(--forest);
  color:var(--white);
  padding-block:clamp(52px,8vw,84px);
  box-shadow:inset 0 1px 0 rgba(243,241,233,.07);
}
.qualify-grid{display:grid;gap:clamp(30px,5vw,44px)}
.qualify .eyebrow{color:var(--sage);margin-bottom:14px}
.qualify h2{
  font-size:clamp(1.6rem,5.6vw,2.45rem);
  line-height:1.14;
  letter-spacing:-.035em;
  max-width:26ch;
}
.qualify h2>span,.qualify h2 .heading-face>span{color:var(--gold)}
.qualify-body{
  margin-top:18px;
  max-width:52ch;
  font-size:clamp(.9375rem,2.4vw,1.0625rem);
  line-height:1.68;
  color:#cfe0d3;
}

/* The three points are a ledger, not a feature grid. One hairline each, the
   bronze mark from the eyebrow contract is deliberately absent: these are
   statements about the reader, so nothing decorates them. */
.qualify-points{display:grid;align-content:start}
.qualify-points li{
  border-top:1px solid var(--line-dark);
  padding-block:15px;
  font-size:clamp(.9375rem,2.3vw,1.0625rem);
  line-height:1.5;
  letter-spacing:-.015em;
  color:var(--offwhite);
}
.qualify-points li:last-child{border-bottom:1px solid var(--line-dark)}

/* The three points resolve as one ledger, in the site's own stagger. */
html.tm-ready.has-motion .qualify-points[data-tm-group] li{--tm-delay:0ms}
html.tm-ready.has-motion .qualify-points li:nth-child(2){--tm-delay:110ms}
html.tm-ready.has-motion .qualify-points li:nth-child(3){--tm-delay:220ms}
@media (max-width:699px){
  html.tm-ready.has-motion .qualify-points li{--tm-delay:0ms}
}

@media (min-width:900px){
  .qualify-grid{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    column-gap:clamp(48px,6vw,96px);
    align-items:start;
  }
  .qualify-points li{padding-block:18px}
}
@media (min-width:1200px){
  .qualify h2{font-size:2.55rem}
  .qualify-body{margin-top:21px}
}

/* ==========================================================================
   2. BRIDGE
   One line carrying the visitor from the work into the three lanes. It sits on
   the lane surface so the eye reads it as the opening of that chapter, with a
   single gold segment as the only ornament on the page at this width.
   ========================================================================== */
.bridge{
  background-color:var(--brg);
  color:var(--white);
  padding-block:clamp(42px,6.5vw,72px) 0;
  box-shadow:inset 0 1px 0 rgba(243,241,233,.07);
}
.bridge-rule{
  display:block;
  width:58px;height:1px;
  margin-bottom:clamp(20px,2.8vw,28px);
  background:var(--gold);
  transform-origin:left center;
}
.bridge-line{
  max-width:46ch;
  font-size:clamp(1.25rem,4.2vw,1.9rem);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.03em;
  color:var(--offwhite);
}
.bridge-line>span{display:block;color:var(--sage);font-weight:550}
@media (min-width:900px){
  .bridge-line{max-width:52ch}
  .bridge-line>span{display:inline;color:var(--sage)}
}

/* The rule is registered with the site's "draw" reveal in tone-motion.js. */

/* ==========================================================================
   3. VALUE FRAMING
   The deepest surface on the page, immediately before the paper pricing break.
   Two statements and nothing else: what we replace, and who it is not for.
   ========================================================================== */
.value-frame{
  background-color:var(--nearblack);
  color:var(--white);
  padding-block:clamp(64px,9vw,108px);
  box-shadow:inset 0 1px 0 rgba(243,241,233,.07);
}
.value-grid{display:grid;gap:clamp(32px,5vw,56px)}
.value-frame .eyebrow{color:var(--gold);margin-bottom:16px}
.value-frame h2{
  font-size:clamp(2.1rem,8.2vw,3.45rem);
  line-height:1.03;
  letter-spacing:-.045em;
  max-width:19ch;
}
.value-frame h2>span,.value-frame h2 .heading-face>span{color:var(--gold)}
.value-lead{
  margin-top:clamp(20px,3vw,26px);
  max-width:44ch;
  font-size:clamp(1rem,2.6vw,1.1875rem);
  line-height:1.6;
  letter-spacing:-.012em;
  color:var(--offwhite);
}

/* The stance is set apart rather than styled louder. A coach reading only this
   paragraph still gets the point. */
.value-stance{
  border-left:1px solid rgba(213,175,89,.55);
  padding-left:clamp(18px,2.6vw,26px);
  max-width:40ch;
  font-size:clamp(.9375rem,2.4vw,1.0625rem);
  line-height:1.68;
  color:#cfe0d3;
}
@media (min-width:1000px){
  .value-grid{
    grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
    column-gap:clamp(56px,7vw,110px);
    align-items:end;
  }
  .value-stance{align-self:end}
}

/* ==========================================================================
   4. PRICING HIERARCHY
   Name, then what the level is, then the price, then the execution. The number
   of finished pieces is still on the card; it is no longer the headline, so the
   membership reads as a managed engine rather than a per-post package.
   ========================================================================== */
#membership .membership-primer{max-width:64ch}
#membership .plan .plan-line{
  margin-top:clamp(13px,1.6vw,18px)!important;
  max-width:24ch;
  font-size:clamp(1.0625rem,1.7vw,1.375rem)!important;
  font-weight:600;
  line-height:1.32;
  letter-spacing:-.025em;
  color:#16352b!important;
  min-height:0!important;
}
#membership .plan .price{margin-top:clamp(18px,2.4vw,26px)!important}

/* The output label makes the deliverables read as execution of the engine. */
#membership .plan .plan-deliver{
  margin:clamp(22px,2.6vw,28px) 0 0;
  padding-top:15px;
  border-top:1px solid rgba(17,47,38,.16);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.115em;
  text-transform:uppercase;
  line-height:1;
  color:#7a5718;
}
#membership .plan .plan-deliver + .feature-list{margin-top:17px!important}

/* Build keeps the visible advantage: gold marker, gold border, and the only
   plan whose own label says it is the step up. */
#membership .plan[data-plan-panel="build"] .plan-heading span{
  color:#7a5718!important;
  font-weight:600;
  white-space:nowrap;
}

/* Mobile pricing is a direct two-card decision. The desktop editorial artwork
   stays untouched; on small screens the space goes to names, terms and actions. */
@media (max-width:699px){
  #membership .membership-editorial{margin-top:22px!important}
  #membership .plan-atelier{display:none!important}
  #membership .membership-primer{
    margin-bottom:18px!important;
    font-size:.9375rem!important;
    line-height:1.6!important;
  }
  #membership .plans{
    display:grid!important;
    gap:16px!important;
  }
  html body #membership .plans .plan{
    display:flex!important;
    padding:22px 18px 20px!important;
    border:1px solid rgba(17,47,38,.18)!important;
    background:#f6f4ec!important;
  }
  html body #membership .plans .plan.featured{
    border-color:#d5af59!important;
    background:#eaeade!important;
  }
  #membership .plan-heading{
    display:flex!important;
    align-items:flex-start!important;
    gap:10px!important;
  }
  #membership .plan-heading h3{
    font-size:2rem!important;
    line-height:1!important;
    white-space:nowrap;
  }
  #membership .plan-heading span{
    max-width:16ch;
    margin-top:2px!important;
    font-size:.625rem!important;
    line-height:1.4!important;
    text-align:right!important;
  }
  #membership .plan .plan-line{
    margin-top:13px!important;
    font-size:1.0625rem!important;
  }
  #membership .price{margin-top:18px!important}
  #membership .price strong{font-size:clamp(2.75rem,15vw,3.55rem)!important}
  #membership .plan-terms{max-width:none!important}
  #membership .plan-terms li{
    align-items:flex-start!important;
    padding:10px 11px!important;
  }
  #membership .plan .button{min-height:52px!important}
  #membership .feature-list li{padding-left:19px!important}

  #membership .membership-table-head{align-items:flex-end!important}
  #membership .membership-table-note{font-size:.625rem!important}
  #membership .compare-table,
  #membership .compare-table thead,
  #membership .compare-table tbody{display:block;width:100%}
  #membership .compare-table thead tr,
  #membership .compare-table tbody tr{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #membership .compare-table thead th:first-child{display:none}
  #membership .compare-table thead th{
    width:auto!important;
    padding:0 10px 10px!important;
    white-space:nowrap;
  }
  #membership .compare-table tbody tr{
    margin:0;
    border-bottom:1px solid rgba(17,47,38,.14);
  }
  #membership .compare-table tbody th{
    grid-column:1/-1;
    width:auto!important;
    padding:13px 10px 5px!important;
    border:0!important;
    font-size:.6875rem!important;
    font-weight:600!important;
    letter-spacing:.07em;
    line-height:1.35!important;
    text-transform:uppercase;
  }
  #membership .compare-table tbody td{
    width:auto!important;
    min-width:0;
    padding:5px 10px 13px!important;
    border:0!important;
    font-size:.875rem!important;
    overflow-wrap:normal;
  }
  #membership .compare-table tbody tr:first-child td{font-size:1.0625rem!important}
  #membership .compare-table tbody tr:last-child{border-bottom:0}
}

/* ==========================================================================
   5. FIT AND THE CLOSE
   The question is qualification, not affordability, and it sits directly on top
   of the action in both places a visitor is most likely to act.
   ========================================================================== */
.fit-qualify{
  position:relative;
  margin:0 0 clamp(26px,3.6vw,38px);
  padding-top:clamp(20px,2.6vw,26px);
  border-top:1px solid var(--line-dark);
  max-width:34ch;
  font-size:clamp(1.125rem,3.4vw,1.625rem);
  font-weight:600;
  line-height:1.26;
  letter-spacing:-.03em;
  color:var(--offwhite);
}
.close-qualify{
  margin-top:clamp(22px,3vw,28px);
  max-width:30ch;
  font-size:clamp(1.0625rem,3vw,1.375rem);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.028em;
  color:var(--offwhite);
}
.close-copy>.close-qualify + .button{margin-top:16px}
.cta-fit{letter-spacing:-.015em}
@media (max-width:400px){
  .cta-fit{font-size:.8125rem}
}

/* ==========================================================================
   6. PORTAL AND OPERATING INTELLIGENCE
   Moved below the membership, so it supports a price the human service has
   already justified. "In beta" stays legible and stays quiet.
   ========================================================================== */
.intel-purpose{max-width:46ch}
.intel-purpose em{
  font-style:normal;
  font-weight:600;
  color:var(--gold);
  white-space:nowrap;
}
/* One continuous, restrained footer system: MICROBURST is the brand header. */
.microburst-owner{background:var(--deep);color:var(--white);padding-top:26px}
.microburst-signature{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 18px;padding:0 0 22px;border-bottom:1px solid var(--line-dark);color:var(--white)}
.microburst-signature-label{grid-column:1;color:#8fa89a;font-size:.6rem;font-weight:600;letter-spacing:.2em;line-height:1.3;text-transform:uppercase}
.microburst-wordmark{grid-column:1;font-family:urbane,"Helvetica Neue",sans-serif;font-size:clamp(1.55rem,7vw,2rem);font-weight:500;letter-spacing:-.055em;line-height:.92}
.microburst-wordmark strong{font-weight:700;color:inherit}
.microburst-signature>svg{grid-column:2;grid-row:1 / span 2;width:19px;height:19px;color:var(--gold);transition:transform .3s var(--ease)}
.microburst-signature:hover>svg,.microburst-signature:focus-visible>svg{transform:translateX(4px)}
.footer{padding:25px 0 max(22px,env(safe-area-inset-bottom))}
.footer-top{gap:20px 28px;align-items:center}
.footer-top>.brand{opacity:.88}
.footer-top>p{color:#9db2a6}
.footer-top>nav{gap:4px 22px}
.footer-top>nav a,.footer-top>nav button.cx-trigger{color:#c2d0c8;transition:color .2s}
.footer-top>nav a:hover,.footer-top>nav button.cx-trigger:hover{color:var(--gold)}
.footer-top nav a[href="https://mymicroburst.com/"]{display:none}
.wx-explainer{margin-top:18px;padding-top:5px}
.wx-explainer summary{font-size:.72rem;letter-spacing:.04em}
.footer-bottom{margin-top:16px;padding-top:15px;color:#81998c}
@media(min-width:700px){.microburst-owner{padding-top:32px}.microburst-signature{grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding-bottom:25px}.microburst-signature-label{grid-column:1}.microburst-wordmark{grid-column:2;font-size:1.9rem}.microburst-signature>svg{grid-column:3;grid-row:1}.footer{padding-top:28px}.footer-top{grid-template-columns:1.05fr 1fr 1.2fr}.footer-top>nav{justify-self:end}.wx-explainer{margin-top:17px}.footer-bottom{margin-top:15px}}

/* Give the featured Jhonny sample slightly more presence without covering talent. */
@media(min-width:1400px){html body .hero.hero-design-a .hero-output{width:clamp(148px,11.5vw,198px)!important;max-width:198px}}
@media(min-width:1200px) and (max-width:1399px){html body .hero.hero-design-a .hero-output{width:146px!important}}
@media(min-width:700px) and (max-width:1199px){html body .hero.hero-design-a .hero-output>img{width:58px!important;flex-basis:58px}}
@media(max-width:699px){html body .hero.hero-design-a .hero-output>img{width:52px!important;flex-basis:52px}}