/* A dimensional brand concept with an accessible, readable design viewer. */
.join-hero .join-hero-layout { grid-template-columns: .94fr 1.06fr; gap: 42px; min-height: 660px; padding-block: 57px 36px; }
.join-ai .join-hero h1 { font-size: clamp(3.4rem, 5.25vw, 4.6rem); margin-bottom: 25px; }
.join-ai .join-hero .join-marketing-heading { margin: 0 0 10px; font-size: 1.45rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.3; }
.join-hero .join-intro { font-size: 1rem; line-height: 1.8; margin: 0 0 14px; max-width: 440px; }
.join-hero .join-ai-support { color: #52695a; font-size: .875rem; line-height: 1.75; margin: 0 0 25px; max-width: 425px; }
.join-hero .join-hero-actions { gap: 10px 22px; }
.join-marketing-example { margin: 0 -8px 0 0; min-width: 0; }
.join-marketing-stage { position: relative; min-height: 500px; padding: 44px 28px 0 0; isolation: isolate; perspective: 1400px; perspective-origin: 50% 45%; transform-style: preserve-3d; }
.join-scene-light { position: absolute; inset: 0 -5% 8% -6%; z-index: -2; pointer-events: none; background: radial-gradient(ellipse at 63% 45%, #dbca9d69, #ebe9d635 42%, transparent 70%); }
.join-scene-ground { position: absolute; right: 3%; bottom: 0; width: 88%; height: 74px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse, #17364240 0, #17364216 44%, transparent 73%); transform: rotateX(62deg) translateZ(-30px); filter: blur(7px); }
.join-website-label { position: absolute; top: 0; left: 1px; display: flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 500; color: #53695a; }
.join-website-label>span { width: 22px; height: 1px; background: #aa8e50; }
.join-agent-website { position: relative; z-index: 1; overflow: hidden; background: #fffdf6; border: 2px solid #fffef4; border-radius: 10px; transform-origin: 50% 48%; transform: translate3d(var(--panel-x,0px),var(--panel-y,0px),0px) rotateX(calc(7deg + var(--scene-rx,0deg))) rotateY(calc(-12deg + var(--scene-ry,0deg))) rotateZ(-2deg); box-shadow: 0 1px 0 #d6dbcd, 1px 3px 0 #c5cec0, 8px 16px 25px -16px #17364240, 19px 32px 48px -25px #17364245; transition: transform .48s cubic-bezier(.2,.7,.2,1), box-shadow .48s; backface-visibility: hidden; }
.join-agent-website::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--shine-x,30%) var(--shine-y,15%), #fffef41c, #fffef404 48%, transparent 70%), linear-gradient(120deg,#ffffff0d,transparent 38%); box-shadow: inset 0 1px 0 #ffffff, inset -1px 0 0 #ffffff99; }
.join-browser-bar { display: flex; align-items: center; gap: 4px; height: 25px; padding: 0 11px; background: #eceee5; border-bottom: 1px solid #d7d9ca; }
.join-browser-bar>i { width: 4px; height: 4px; border: 1px solid #a7b2a4; border-radius: 50%; }
.join-browser-bar>span { margin-left: 11px; color: #5b6d5a; font-size: .45rem; font-weight: 600; letter-spacing: .13em; }
.join-example-site-nav { display: flex; align-items: center; gap: 9px; min-height: 62px; padding: 11px 19px; }
.join-example-monogram { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #b49a62; color: #876b36; font: 500 .95rem/1 var(--font-display); }
.join-example-site-nav>div { display: flex; flex-direction: column; gap: 2px; }
.join-example-site-nav strong { font-size: .72rem; font-weight: 600; letter-spacing: -.02em; }
.join-example-site-nav>div>span { color: #63715f; font-size: .46rem; }
.join-example-menu { margin-left: auto; font-size: .85rem; color: #6c7b66; }
.join-example-site-hero { display: grid; grid-template-columns: 1.03fr 1fr; min-height: 267px; }
.join-example-site-copy { display: flex; flex-direction: column; align-items: start; padding: 27px 17px 23px 24px; background: #eef0e4; }
.join-example-overline { font-size: .45rem; font-weight: 600; letter-spacing: .12em; color: #697254; }
.join-example-site-copy>p { margin: 15px 0 13px; color: #173642; font: 500 clamp(1.7rem,2.9vw,2.4rem)/1.05 var(--font-display); letter-spacing: -.035em; }
.join-example-site-line { max-width: 120px; font-size: .59rem; line-height: 1.6; color: #57684e; }
.join-example-site-cta { display: inline-flex; align-items: center; gap: 11px; padding: 9px 11px; margin-top: 19px; font-size: .51rem; font-weight: 500; background: #173642; color: #fffdf3; }
.join-example-site-cta>b { font-size: .8rem; color: #ddc78c; font-weight: 400; }
.join-example-site-hero>img { display: block; height: 100%; width: 100%; min-height: 267px; max-height: 290px; object-fit: cover; object-position: 50% 34%; }
.join-example-site-footer { display: flex; justify-content: space-between; gap: 10px; min-height: 43px; padding: 14px 19px; font-size: .5rem; color: #5f7059; }
.join-example-site-footer b { font-weight: 400; color: #97793e; }
.join-digital-card { position: absolute; right: 0; bottom: 28px; display: grid; grid-template-columns: 68px 1fr; column-gap: 15px; align-items: start; width: 296px; min-height: 190px; padding: 18px; border: 1px solid #49626a; border-radius: 10px; background: #173642; color: #f8f6e9; box-shadow: 0 14px 26px -16px #17364288; }
.join-digital-card { z-index: 4; background: linear-gradient(125deg,#244651,#173642 58%,#132f3a); border-color: #9cb1ac; transform-origin: 50% 50%; transform: translate3d(var(--card-x,0px),var(--card-y,0px),96px) rotateX(calc(8deg + var(--card-rx,0deg))) rotateY(calc(-14deg + var(--card-ry,0deg))) rotateZ(4deg); box-shadow: inset 0 1px 0 #d3dec33d, 1px 2px 0 #46626a, 2px 4px 0 #23414c, 10px 19px 28px -13px #071e2a55, 20px 31px 43px -23px #17364248; transition: transform .48s cubic-bezier(.2,.7,.2,1), box-shadow .48s, border-color .3s; backface-visibility: hidden; }
.join-digital-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--shine-x,15%) var(--shine-y,5%),#fff1bf0b,transparent 65%),linear-gradient(118deg,#fffad508,transparent 42%,#fffdf403 63%,transparent 70%); box-shadow: inset 0 0 0 1px #f0e2b31c; }
.join-marketing-example.is-tracking .join-agent-website, .join-marketing-example.is-tracking .join-digital-card { transition: transform .1s ease-out, box-shadow .3s; will-change: transform; }
.join-scene-toolbar { position: relative; z-index: 6; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: flex-end; min-height: 62px; padding: 18px 2px 0; }
.join-scene-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 44px; padding: 10px 15px; border: 1px solid #b49a62; border-radius: 2px; background: #fffdf3; color: #173642; font: 600 .78rem/1.4 var(--font-body); cursor: pointer; box-shadow: 0 3px 6px -5px #17364270; }
.join-scene-toggle[hidden], .join-scene-toggle span[hidden] { display: none; }
.join-scene-toggle>span:last-child { color: #96763e; font-size: 1.15rem; font-weight: 400; }
.join-scene-toggle:hover { background: #eee5c9; border-color: #96763e; }
.join-scene-toggle:focus-visible { outline: 2px solid #173642; outline-offset: 4px; }
.join-scene-toggle[aria-pressed=true] { background: #173642; color: #fffdf4; }
.join-scene-toggle[aria-pressed=true]>span:last-child { color: #dac58c; }
.join-card-eyebrow { grid-column: 1/-1; margin-bottom: 12px; font-size: .49rem; letter-spacing: .1em; color: #d4c498; }
.join-digital-card>img { display: block; grid-column: 1; grid-row: 2/5; width: 68px; height: 83px; margin: 0; object-fit: cover; object-position: 50% 30%; border: 1px solid #cfbc8e; border-radius: 35px 35px 3px 3px; }
.join-card-name { grid-column: 2; grid-row: 2; font-size: 1.14rem; line-height: 1.15; font-weight: 500; letter-spacing: -.03em; }
.join-card-brokerage { grid-column: 2; grid-row: 3; margin: 5px 0 9px; font-size: .52rem; color: #c7d1c3; }
.join-card-actions { grid-column: 2; grid-row: 4; display: flex; justify-content: start; width: 100%; gap: 17px; }
.join-card-actions>span { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: .44rem; color: #cad4c8; }
.join-card-actions b { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid #587068; border-radius: 50%; font-size: .8rem; font-weight: 400; color: #d9c99f; }
.join-card-save { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 13px; padding: 9px 12px; background: #e8ddbe; color: #173642; font-size: .58rem; font-weight: 600; }
.join-card-save>b { font-size: .8rem; font-weight: 400; }
.join-marketing-example figcaption { max-width: 430px; margin: 10px 0 0; font-size: .75rem; line-height: 1.65; color: #65715e; }
.join-scene-card-toggle { min-height: 44px; padding: 9px 0; border: 0; border-bottom: 1px solid #a8b29d; background: transparent; color: #173642; font: 500 .78rem/1.4 var(--font-body); cursor: pointer; }
.join-scene-card-toggle span { margin-left: 9px; color: #96763e; }
.join-scene-card-toggle:hover { border-color: #96763e; }
.join-scene-card-toggle:focus-visible { outline: 2px solid #173642; outline-offset: 4px; }
.join-scene-card-toggle[hidden], .join-design-viewer [hidden] { display: none !important; }
html.join-viewer-open { overflow: hidden; }
.join-design-viewer { width: min(1080px, calc(100% - 48px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: auto; border: 1px solid #d9dccd; border-radius: 12px; background: #f8f7ef; color: #173642; box-shadow: 0 24px 90px #071e2a40; font-family: var(--font-body); overscroll-behavior: contain; }
.join-design-viewer::backdrop { background: #102c36b8; backdrop-filter: blur(8px); }
.join-viewer-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 32px 20px; background: #f8f7ef; }
.join-viewer-eyebrow { margin: 0 0 7px; color: #65715e; font-size: .65rem; letter-spacing: .14em; font-weight: 600; }
.join-ai .join-viewer-header h2 { margin: 0; font: 600 clamp(1.45rem, 2.6vw, 2rem)/1.15 var(--font-body); letter-spacing: -.045em; }
.join-viewer-close { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; min-height: 44px; padding: 6px 0 6px 12px; border: 0; background: transparent; font: 500 .8rem/1.3 var(--font-body); color: #173642; cursor: pointer; }
.join-viewer-close b { font: 300 1.8rem/1 var(--font-body); }
.join-design-viewer button:focus-visible { outline: 2px solid #96763e; outline-offset: 4px; }
.join-viewer-switch { display: flex; gap: 6px; margin: 0 32px 22px; padding: 5px; width: fit-content; max-width: calc(100% - 64px); border: 1px solid #d9dccd; border-radius: 5px; }
.join-viewer-switch button { min-height: 44px; padding: 10px 17px; border: 0; border-radius: 3px; background: transparent; color: #52695a; font: 500 .85rem/1.3 var(--font-body); cursor: pointer; }
.join-viewer-switch button[aria-pressed=true] { background: #173642; color: #fffdf3; }
.join-viewer-canvas { padding: 0 32px 26px; }
.join-viewer-panel { width: 100%; }
.join-design-viewer .join-agent-website { border: 1px solid #d3d9ca; border-radius: 7px; transform: none !important; box-shadow: 0 7px 24px -16px #17364245; }
.join-design-viewer .join-agent-website::after, .join-design-viewer .join-digital-card::after { display: none; }
.join-design-viewer .join-browser-bar { height: 32px; padding-inline: 19px; }
.join-design-viewer .join-browser-bar>span { font-size: .62rem; }
.join-design-viewer .join-example-site-nav { min-height: 87px; padding: 16px 34px; gap: 14px; }
.join-design-viewer .join-example-monogram { width: 46px; height: 46px; font-size: 1.4rem; }
.join-design-viewer .join-example-site-nav strong { font-size: 1.15rem; }
.join-design-viewer .join-example-site-nav>div>span { font-size: .8rem; }
.join-design-viewer .join-example-menu { font-size: 1.2rem; }
.join-design-viewer .join-example-site-hero { min-height: 380px; }
.join-design-viewer .join-example-site-copy { justify-content: center; padding: 36px 40px; }
.join-design-viewer .join-example-overline { font-size: .7rem; }
.join-design-viewer .join-example-site-copy>p { margin: 20px 0; font-size: clamp(2.8rem, 5.2vw, 4.5rem); }
.join-design-viewer .join-example-site-line { font-size: 1rem; max-width: 230px; }
.join-design-viewer .join-example-site-cta { margin-top: 25px; padding: 15px 19px; font-size: .88rem; gap: 22px; }
.join-design-viewer .join-example-site-cta>b { font-size: 1.15rem; }
.join-design-viewer .join-example-site-hero>img { min-height: 380px; max-height: 410px; object-position: 50% 30%; }
.join-design-viewer .join-example-site-footer { min-height: 58px; padding: 19px 34px; font-size: .85rem; }
.join-design-viewer [data-design-panel=card] { display: flex; justify-content: center; align-items: center; min-height: 440px; padding: 22px; background: radial-gradient(ellipse, #e8e7d9, #f0efe5 65%, #f8f7ef); border: 1px solid #e0e2d5; border-radius: 7px; }
.join-design-viewer .join-digital-card { position: relative; inset: auto; width: min(100%, 490px); min-height: 0; padding: 30px; grid-template-columns: 110px 1fr; column-gap: 24px; border: 1px solid #54717a; transform: none !important; box-shadow: 0 14px 35px -20px #17364265; }
.join-design-viewer .join-card-eyebrow { margin-bottom: 24px; font-size: .72rem; }
.join-design-viewer .join-digital-card>img { width: 110px; height: 140px; border-radius: 58px 58px 4px 4px; }
.join-design-viewer .join-card-name { font-size: 1.85rem; }
.join-design-viewer .join-card-brokerage { margin: 8px 0 16px; font-size: .85rem; }
.join-design-viewer .join-card-actions { gap: 24px; }
.join-design-viewer .join-card-actions>span { font-size: .78rem; gap: 8px; }
.join-design-viewer .join-card-actions b { width: 40px; height: 40px; font-size: 1.2rem; }
.join-design-viewer .join-card-save { margin-top: 25px; padding: 15px 18px; font-size: .95rem; }
.join-design-viewer .join-card-save>b { font-size: 1.2rem; }
.join-viewer-description { margin: 0; padding: 0 32px 24px; color: #65715e; font-size: .75rem; line-height: 1.6; }
@media(max-width:600px) {
  .join-design-viewer { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 8px; }
  .join-viewer-header { padding: 20px 18px 16px; gap: 12px; align-items: start; }
  .join-viewer-close { padding-left: 4px; min-width: 44px; justify-content: center; }
  .join-viewer-close>span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .join-viewer-switch { margin: 0 18px 18px; max-width: calc(100% - 36px); width: calc(100% - 36px); gap: 3px; }
  .join-viewer-switch button { flex: 1; padding: 9px 7px; font-size: .8rem; }
  .join-viewer-canvas { padding: 0 14px 18px; }
  .join-design-viewer .join-example-site-nav { min-height: 78px; padding: 14px; gap: 10px; }
  .join-design-viewer .join-example-monogram { width: 37px; height: 37px; font-size: 1.15rem; }
  .join-design-viewer .join-example-site-nav strong { font-size: 1rem; }
  .join-design-viewer .join-example-site-nav>div>span { font-size: .7rem; }
  .join-design-viewer .join-example-site-hero { grid-template-columns: 1fr; min-height: 0; }
  .join-design-viewer .join-example-site-hero>img { grid-row: 1; width: 100%; height: 245px; min-height: 0; max-height: none; object-position: 50% 26%; }
  .join-design-viewer .join-example-site-copy { padding: 25px 24px; }
  .join-design-viewer .join-example-site-copy>p { font-size: 2.8rem; margin: 15px 0; }
  .join-design-viewer .join-example-site-line { font-size: .95rem; max-width: 245px; }
  .join-design-viewer .join-example-site-cta { margin-top: 19px; }
  .join-design-viewer .join-example-site-footer { flex-wrap: wrap; gap: 11px 22px; padding: 17px 24px; font-size: .78rem; }
  .join-design-viewer [data-design-panel=card] { min-height: 370px; padding: 18px 8px; }
  .join-design-viewer .join-digital-card { padding: 24px 20px; grid-template-columns: 80px 1fr; gap: 0 15px; }
  .join-design-viewer .join-digital-card>img { width: 80px; height: 113px; }
  .join-design-viewer .join-card-name { font-size: 1.45rem; }
  .join-design-viewer .join-card-brokerage { font-size: .72rem; }
  .join-design-viewer .join-card-actions { gap: 13px; }
  .join-design-viewer .join-card-actions>span { font-size: .7rem; }
  .join-design-viewer .join-card-actions b { width: 30px; height: 30px; font-size: 1rem; }
  .join-viewer-description { padding: 0 18px 20px; }
}
@media(max-width:1050px) {
  .join-hero .join-hero-layout { grid-template-columns: .95fr 1.05fr; gap: 32px; }
  .join-ai .join-hero h1 { font-size: clamp(3rem,5.2vw,4rem); }
  .join-marketing-stage { min-height: 500px; padding-right: 16px; }
  .join-example-site-copy { padding: 22px 12px 20px 16px; }
  .join-example-site-copy>p { font-size: 2rem; }
  .join-digital-card { width: 272px; right: 8px; }
}
@media(max-width:850px) and (min-width:761px) {
  .join-hero .join-hero-layout { grid-template-columns: 1fr 1fr; gap: 26px; }
  .join-ai .join-hero h1 { font-size: 3rem; }
  .join-marketing-stage { min-height: 520px; }
  .join-example-site-hero { grid-template-columns: 1fr 1fr; min-height: 260px; }
  .join-example-site-copy>p { font-size: 1.8rem; }
  .join-example-site-footer { font-size: .42rem; padding-inline: 10px; }
}
@media(max-width:760px) {
  .join-hero .join-hero-layout { grid-template-columns: 1fr; gap: 36px; padding-block: 42px 28px; }
  .join-ai .join-hero h1 { font-size: clamp(2.8rem,9.4vw,4rem); }
  .join-ai .join-hero .join-marketing-heading { font-size: 1.4rem; }
  .join-hero .join-intro { max-width: 460px; }
  .join-hero .join-ai-support { max-width: 440px; }
  .join-marketing-example { width: 100%; max-width: 540px; justify-self: center; margin: 0; }
  .join-marketing-stage { min-height: 455px; padding-right: 19px; }
  .join-marketing-stage { perspective: 1100px; }
  .join-agent-website { transform: translate3d(var(--panel-x,0px),var(--panel-y,0px),0px) rotateX(calc(5deg + var(--scene-rx,0deg))) rotateY(calc(-8deg + var(--scene-ry,0deg))) rotateZ(-1.5deg); }
  .join-digital-card { bottom: 26px; transform: translate3d(var(--card-x,0px),var(--card-y,0px),40px) rotateX(calc(5deg + var(--card-rx,0deg))) rotateY(calc(-8deg + var(--card-ry,0deg))) rotateZ(3deg); }
  .join-example-site-copy { padding: 24px 12px 22px 19px; }
  .join-example-site-copy>p { font-size: clamp(1.7rem,7vw,2.35rem); }
  .join-example-site-hero>img { min-height: 260px; }
  .join-example-site-footer { padding-inline: 14px; font-size: .46rem; }
  .join-digital-card { width: 248px; min-height: 190px; }
  .join-marketing-example figcaption { max-width: 340px; font-size: .75rem; }
}
.join-marketing-example.scene-reduced .join-agent-website, .join-marketing-example.scene-reduced.is-inspecting .join-agent-website { transform: rotateX(4deg) rotateY(-6deg) rotateZ(-1deg); transition: none; }
.join-marketing-example.scene-reduced .join-digital-card, .join-marketing-example.scene-reduced.is-inspecting .join-digital-card { transform: rotateX(3deg) rotateY(-5deg) rotateZ(2deg); transition: none; }
@media(prefers-reduced-motion:reduce) {
  .join-marketing-example .join-agent-website, .join-marketing-example.is-inspecting .join-agent-website { transform: rotateX(4deg) rotateY(-6deg) rotateZ(-1deg); transition: none; }
  .join-marketing-example .join-digital-card, .join-marketing-example.is-inspecting .join-digital-card { transform: rotateX(3deg) rotateY(-5deg) rotateZ(2deg); transition: none; }
}
@media(max-width:360px) {
  .join-example-site-nav { padding-inline: 12px; }
  .join-example-site-nav strong { font-size: .65rem; }
  .join-example-site-copy { padding-inline: 13px 9px; }
  .join-example-overline { font-size: .38rem; }
  .join-example-site-copy>p { font-size: 1.65rem; }
  .join-example-site-cta { gap: 6px; padding-inline: 6px; font-size: .45rem; }
  .join-example-site-footer { padding-inline: 10px; font-size: .39rem; gap: 7px; }
  .join-digital-card { width: 228px; column-gap: 12px; padding: 16px; }
}