/* JoinBTT front door.
   Layers on btt-page.css so the tokens, type scale, buttons and colour are the
   SAME objects the main site uses. Crossing from buildingtransformationteam.com
   to joinbtt.com to the app should not look like crossing a boundary, and the
   surest way to guarantee that is to share the stylesheet rather than to
   re-describe the brand in a second one.

   Mobile first throughout: the prospect journey is expected to happen on a
   phone, so the desktop rules are the additions, not the base. */

.jb { background: var(--cream); }

/* Header. Two controls only. Everything else on this page is a story;
   the only things a visitor can DO are create an account or sign in. */
.jb-top { background: var(--white); border-bottom: 1px solid var(--border); padding: 14px 0; position: sticky; top: 0; z-index: 50; }
.jb-top .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jb-mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 15px; color: var(--navy); line-height: 1.15; }
.jb-mark .g { color: var(--green); }
.jb-mark img { flex: 0 0 auto; }
.jb-nav { display: flex; align-items: center; gap: 10px; }
.jb-signin { color: var(--mid); text-decoration: none; font-size: 14px; font-weight: 600; padding: 10px 6px; }
.jb-signin:hover, .jb-signin:focus-visible { color: var(--navy); }
.jb-get { padding: 10px 15px; font-size: 14px; box-shadow: none; }

/* Hero */
.jb-hero { background: linear-gradient(158deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; padding: 52px 0 46px; }
.jb-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(30px, 6.4vw, 55px);
  line-height: 1.1; margin-bottom: 18px; max-width: 15ch; }
.jb-lede { font-size: 17px; color: rgba(255,255,255,.8); max-width: 60ch; margin-bottom: 26px; }
.jb-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 16px; }
.btn-lg { padding: 16px 30px; font-size: 16px; }
.jb-alt { color: rgba(255,255,255,.82); font-size: 14.5px; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; }
.jb-alt:hover, .jb-alt:focus-visible { color: #fff; border-color: #fff; }
.jb-sub { font-size: 14.5px; color: rgba(255,255,255,.62); max-width: 56ch; margin-bottom: 22px; }
.jb-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.jb-trust li { margin: 0; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
  color: var(--gold); border: 1px solid rgba(201,168,76,.42); background: rgba(201,168,76,.1);
  border-radius: 99px; padding: 7px 13px; }

/* On a phone the call to action follows the headline directly, and the
   supporting copy follows it.

   This is not a style preference. The cookie banner is a fixed bottom sheet
   bounded at 46% of the viewport, so the lower 46% of a phone screen is space
   the page does not own until the visitor answers it. With the reading order
   as written, the button landed at 557-616 on an 844px screen, inside that
   band, and the one action this page exists for was behind the banner on first
   load. Measured, not assumed.

   Reordering moves the button above the banner's reach rather than trying to
   tune the banner smaller, which would only move the failure to a longer
   consent string or a shorter phone. The DOM order stays correct for reading
   order and assistive technology; only the visual order changes. */
.jb-hero .container { display: flex; flex-direction: column; align-items: flex-start; }
.jb-hero .eyebrow { order: 0; }
.jb-hero h1      { order: 1; }
.jb-cta          { order: 2; }
.jb-lede         { order: 3; margin-bottom: 14px; }
.jb-sub          { order: 4; }
.jb-trust        { order: 5; }
.jb-cta { margin-bottom: 22px; }

/* Video. Only ever rendered when a real source exists, so there is no empty
   state to style. 16:9 is reserved up front so nothing below it jumps when the
   poster loads. */
.jb-video-wrap { background: var(--navy-deep); padding: 0 0 46px; }
.jb-video { aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 50px rgba(0,0,0,.38); }
.jb-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Steps */
.jb-steps { background: var(--white); border-bottom: 1px solid var(--border); padding: 54px 0; }
.jb-steps h2 { text-align: center; margin-bottom: 30px; }
.jb-step-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.jb-step-grid li { margin: 0; }
.jb-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 99px;
  background: rgba(30,107,56,.11); color: var(--green); border: 1px solid rgba(30,107,56,.3);
  font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.jb-step-grid h3 { margin: 0 0 8px; font-size: 19px; }
.jb-step-grid p { margin: 0; font-size: 15.5px; }

/* Story bands */
.jb-story { padding: 50px 0; }
.jb-story.alt { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.jb-story .eyebrow { color: var(--green); }
.jb-story h2 { margin-bottom: 14px; }

/* Final call */
.jb-final { background: linear-gradient(158deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; padding: 58px 0; text-align: center; }
.jb-final h2 { color: #fff; max-width: 20ch; margin: 0 auto 14px; }
.jb-final p { color: rgba(255,255,255,.74); max-width: 52ch; margin: 0 auto 24px; }
.jb-alt-line { margin: 20px 0 0; }
.jb-alt-line a { color: rgba(255,255,255,.8); font-size: 14.5px; text-decoration: underline; }
.jb-alt-line a:hover, .jb-alt-line a:focus-visible { color: #fff; }

/* Footer.
   No "powered by" line here. This is the prospect experience, and the platform
   underneath it is not something a prospect should be introduced to. */
.jb-foot { background: var(--navy-deep); color: rgba(255,255,255,.62); padding: 44px 0 38px; font-size: 14px; }
.jb-foot .footer-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; width: max-content;
  font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 18px; }
.jb-foot .footer-logo .gl { color: var(--green-light); }
.jb-foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 18px; }
.jb-foot-links a { color: rgba(255,255,255,.78); text-decoration: none; }
.jb-foot-links a:hover, .jb-foot-links a:focus-visible { color: #fff; text-decoration: underline; }
.jb-legal { margin: 0 0 6px; color: rgba(255,255,255,.5); font-size: 13px; }
.jb-foot .disclosure { margin-top: 18px; color: rgba(255,255,255,.42); font-size: 12.5px; line-height: 1.65; max-width: 78ch; }

/* Focus stays visible on the dark bands, where the default ring disappears. */
.jb a:focus-visible, .jb button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

@media (min-width: 720px) {
  .jb-top { padding: 16px 0; }
  .jb-mark { font-size: 17px; }
  .jb-hero { padding: 86px 0 74px; }
  .jb-lede { font-size: 18.5px; }
  /* Desktop has room, and the banner there is a slim strip that reaches
     nothing, so the reading order returns to headline, then the explanation,
     then the action. */
  .jb-lede { order: 2; margin-bottom: 26px; }
  .jb-cta  { order: 3; margin-bottom: 16px; }
  .jb-step-grid { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .jb-story { padding: 66px 0; }
  .jb-video-wrap { padding-bottom: 60px; }
  .jb-foot { padding: 54px 0 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .jb *, .jb *::before, .jb *::after { animation: none !important; transition: none !important; }
}