/* HomePilot Connect — polished one-page experience */ :root { --connect-ink: #f8f5ec; --connect-muted: rgba(232, 237, 244, .72); --connect-deep: #020914; --connect-navy: #061529; --connect-blue: #0c2844; --connect-gold: #d7b55f; --connect-gold-light: #f1d989; --connect-line: rgba(255, 255, 255, .12); --connect-serif: Georgia, "Times New Roman", serif; --connect-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } html { scroll-behavior: smooth; background: var(--connect-deep); } body.connect-one-page { margin: 0; overflow-x: clip; background: var(--connect-deep); color: var(--connect-ink); font-family: var(--connect-sans); } body.connect-one-page::before, body.connect-one-page::after { display: none !important; } body.connect-one-page * { box-sizing: border-box; } body.connect-one-page .connect-header.connect-one-nav { position: fixed; inset: 0 0 auto; z-index: 1000; min-height: 78px; padding: 0 max(24px, calc((100vw - 1180px) / 2)); border: 0; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(2, 9, 20, .72) !important; box-shadow: none; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } body.connect-one-page .connect-brand { display: inline-flex; align-items: baseline; color: #fff; font: 800 1.48rem/1 var(--connect-serif); letter-spacing: -.035em; } body.connect-one-page .connect-brand strong { margin-left: .22em; color: var(--connect-gold); font-weight: 800; } body.connect-one-page .connect-header-actions { margin-left: auto; } .connect-one-nav-cta, .connect-one-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: linear-gradient(135deg, var(--connect-gold-light), var(--connect-gold)); color: #071426; font: 850 .88rem/1 var(--connect-sans); box-shadow: 0 14px 38px rgba(215,181,95,.22); cursor: pointer; } body.connect-one-page .connect-menu-btn { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 46px; min-height: 46px; border: 1px solid rgba(215,181,95,.25); border-radius: 14px; background: linear-gradient(145deg,rgba(18,49,77,.78),rgba(4,17,32,.92)); box-shadow: 0 12px 34px rgba(0,0,0,.22); cursor: pointer; } body.connect-one-page .connect-menu-btn:hover { border-color: rgba(215,181,95,.62); background: linear-gradient(145deg,rgba(25,65,100,.84),rgba(5,22,41,.96)); } body.connect-one-page .connect-menu-btn span { display: block; width: 20px; height: 2px; border-radius: 999px; background: #fff; transition: transform .2s ease, opacity .2s ease; } body.connect-one-page .connect-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.connect-one-page .connect-menu-btn.open span:nth-child(2) { opacity: 0; } body.connect-one-page .connect-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } body.connect-one-page .connect-mini-menu { position: fixed; inset: 90px max(24px,calc((100vw - 1180px)/2)) auto auto; z-index: 999; display: grid; width: min(390px,calc(100vw - 48px)); max-height: calc(100svh - 108px); overflow-y: auto; padding: 12px; border: 1px solid rgba(215,181,95,.25); border-radius: 22px; background: linear-gradient(155deg,rgba(12,37,61,.985),rgba(2,12,24,.99)); box-shadow: 0 30px 90px rgba(0,0,0,.52); } body.connect-one-page .connect-mini-menu[hidden] { display: none !important; } body.connect-one-page .connect-mini-menu a, body.connect-one-page .connect-mini-menu button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 52px; padding: 13px 15px; border: 0; border-bottom: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: transparent; color: #fff; font: inherit; text-align: left; text-decoration: none; cursor: pointer; } body.connect-one-page .connect-mini-menu a:hover, body.connect-one-page .connect-mini-menu button:hover { background: rgba(215,181,95,.09); } body.connect-one-page .connect-mini-menu strong { color: #fff; font-size: 1rem; line-height: 1.25; } body.connect-one-page .connect-mini-menu small { display: block; margin-top: 7px; color: rgba(232,237,244,.7); font-size: .8rem; line-height: 1.45; text-decoration: none; } body.connect-one-page .connect-mini-menu a:nth-child(2) strong { color: var(--connect-gold-light); } body.connect-one-page .connect-mini-menu > :last-child { border-bottom: 0; } body.connect-one-page.connect-one-menu-open { overflow: hidden; } body.connect-one-page .connect-shell { z-index: 1; width: 100%; max-width: none; margin: 0; padding: 0; } .connect-one-landing { background: var(--connect-deep); } .connect-one-hero { position: relative; isolation: isolate; min-height: 82svh; overflow: hidden; display: grid; place-items: center; padding: 120px 24px 62px; } .connect-one-earth { position: absolute; inset: 0; z-index: -3; background: #020813; } .connect-one-earth img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 49%; filter: saturate(1.12) contrast(1.06) brightness(.9); transform: scale(1.1); } .connect-one-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 50% 47%, rgba(2,8,18,.2), rgba(2,8,18,.08) 38%, rgba(2,8,18,.35) 84%), linear-gradient(180deg, rgba(2,8,18,.04), rgba(2,8,18,.13) 54%, #020914 100%); } .connect-one-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; box-shadow: inset 0 0 180px rgba(0,0,0,.3); } .connect-one-orbit { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75; } .connect-one-orbit::before { content: ""; position: absolute; width: min(70vw, 960px); aspect-ratio: 2.2; left: 50%; top: 53%; border: 1px solid rgba(240,217,140,.16); border-radius: 50%; transform: translate(-50%,-50%) rotate(-5deg); } .connect-one-orbit span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--connect-gold-light); box-shadow: 0 0 18px 5px rgba(240,217,140,.5); } .connect-one-orbit span:nth-child(1){left:19%;top:52%}.connect-one-orbit span:nth-child(2){left:34%;top:38%}.connect-one-orbit span:nth-child(3){left:52%;top:62%}.connect-one-orbit span:nth-child(4){left:69%;top:43%}.connect-one-orbit span:nth-child(5){left:81%;top:58%} .connect-one-hero-inner { width: min(820px, 100%); margin: 0 auto; text-align: center; } .connect-one-kicker { margin: 0; color: var(--connect-gold-light); font-size: .8rem; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; } .connect-one-hero h1 { margin: 18px 0 0; color: #fff; font: 800 clamp(4rem, 8.4vw, 8rem)/.94 var(--connect-serif); letter-spacing: -.055em; text-shadow: 0 6px 34px rgba(0,0,0,.42); } .connect-one-hero h1 span { display: block; color: var(--connect-gold); } .connect-one-subhead { margin: 28px auto 0; color: #fff; font: 700 clamp(1.2rem, 2.2vw, 1.61rem)/1.4 var(--connect-serif); } .connect-one-copy { width: min(710px,100%); margin: 18px auto 0; color: rgba(232,237,244,.78); font-size: clamp(1.06rem,1.45vw,1.16rem); line-height: 1.68; } .connect-one-actions { display: flex; justify-content: center; gap: 12px; margin-top: 32px; } .connect-one-actions .connect-one-primary { min-height: 58px; padding: 0 30px; font-size: .98rem; } .connect-one-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; padding: 0 26px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(3,14,27,.48); color: #fff; font-size: .94rem; font-weight: 750; text-decoration: none; backdrop-filter: blur(10px); } .connect-one-trustline { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; color: rgba(255,255,255,.66); font-size: .88rem; font-weight: 700; } .connect-one-trustline span::before { content: "✓"; margin-right: 8px; color: var(--connect-gold-light); } .connect-one-section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 84px 0; scroll-margin-top: 78px; } .connect-one-section-head { width: min(760px,100%); margin: 0 auto 54px; text-align: center; } .connect-one-section h2, .connect-one-final h2 { margin: 16px 0 0; color: #fff; font: 750 clamp(2.65rem,5.2vw,4.8rem)/1.04 var(--connect-serif); letter-spacing: -.045em; text-wrap: balance; } .connect-one-section-head > p:last-child { margin: 22px auto 0; color: var(--connect-muted); font-size: 1.03rem; line-height: 1.68; } .connect-one-roles { width: 100%; max-width: none; padding-inline: max(24px, calc((100vw - 1180px) / 2)); background: radial-gradient(circle at 50% 15%, rgba(20,61,99,.3), transparent 42%), linear-gradient(180deg,#020914,#061529 65%,#041020); } .connect-role-selector { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; width: min(720px,100%); margin: 0 auto 20px; padding: 6px; border: 1px solid var(--connect-line); border-radius: 18px; background: rgba(255,255,255,.045); } .connect-role-selector button { min-height: 50px; border: 0; border-radius: 13px; background: transparent; color: rgba(255,255,255,.68); font: 800 .92rem/1 var(--connect-sans); cursor: pointer; } .connect-role-selector button[aria-selected="true"] { background: linear-gradient(135deg,var(--connect-gold-light),var(--connect-gold)); color: #071426; box-shadow: 0 10px 28px rgba(215,181,95,.18); } .connect-role-panels { width: min(980px,100%); margin: 0 auto; } .connect-role-panel { display: grid; grid-template-columns: 1.12fr 1fr; gap: 28px 48px; align-items: center; min-height: 310px; padding: clamp(28px,4vw,46px); border: 1px solid var(--connect-line); border-radius: 28px; background: linear-gradient(145deg,rgba(15,43,71,.78),rgba(4,16,31,.94)); box-shadow: 0 34px 90px rgba(0,0,0,.28); } .connect-role-panel[hidden] { display: none; } .connect-role-number { color: var(--connect-gold); font-size: .75rem; font-weight: 900; letter-spacing: .16em; } .connect-role-panel h3 { margin: 20px 0 14px; color: #fff; font: 750 clamp(2.15rem,4vw,3.5rem)/1.05 var(--connect-serif); letter-spacing: -.04em; } .connect-role-panel p { margin: 0; color: var(--connect-muted); font-size: 1.02rem; line-height: 1.65; } .connect-role-panel dl { display: grid; gap: 24px; margin: 0; } .connect-role-panel dl div { padding-left: 20px; border-left: 1px solid rgba(215,181,95,.42); } .connect-role-panel dt { margin-bottom: 7px; color: var(--connect-gold-light); font-size: .8rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .connect-role-panel dd { margin: 0; color: rgba(255,255,255,.74); font-size: 1rem; line-height: 1.58; } .connect-role-panel > button { grid-column: 1/-1; justify-self: start; min-height: 52px; padding: 0 24px; border: 1px solid rgba(215,181,95,.45); border-radius: 999px; background: rgba(215,181,95,.08); color: var(--connect-gold-light); font: 800 .88rem/1 var(--connect-sans); cursor: pointer; } .connect-one-how { padding-block: 72px; background: var(--connect-deep); } .connect-one-how .connect-one-section-head { margin-bottom: 42px; } .connect-one-how #connectHowTitle { margin: 0; background: linear-gradient(135deg,var(--connect-gold-light) 0%,var(--connect-gold) 100%); color: var(--connect-gold-light); font-size: clamp(3rem,5.4vw,5rem); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .connect-one-steps { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin: 0; padding: 0; list-style: none; } .connect-one-steps::before { content: ""; position: absolute; top: 37px; left: 16.5%; right: 16.5%; height: 1px; background: linear-gradient(90deg,transparent,var(--connect-gold),transparent); opacity: .4; } .connect-one-steps li { position: relative; padding: 0 24px; text-align: center; } .connect-one-steps li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 28px; border: 1px solid rgba(215,181,95,.4); border-radius: 50%; background: #061529; color: var(--connect-gold-light); font-size: .76rem; font-weight: 900; box-shadow: 0 0 34px rgba(215,181,95,.1); } .connect-one-steps h3 { margin: 0; color: #fff; font: 700 1.45rem/1.2 var(--connect-serif); } .connect-one-steps p { margin: 13px 0 0; color: var(--connect-muted); font-size: 1rem; line-height: 1.62; } .connect-one-guided { padding: 86px max(24px, calc((100vw - 1040px) / 2)); scroll-margin-top: 76px; background: radial-gradient(circle at 50% 0,rgba(25,73,113,.3),transparent 42%),linear-gradient(180deg,#061529,#030d1b); } .connect-one-guided .connect-one-section-head { margin-bottom: 38px; } body.connect-one-page #connectGuidedMount #connectExplore { width: 100% !important; max-width: 1040px !important; margin: 0 auto !important; padding: 0 !important; } body.connect-one-page #connectGuidedMount #connectExplore .connect-explore-heading, body.connect-one-page #connectGuidedMount #connectExplore .connect-approved-hero, body.connect-one-page #connectGuidedMount #connectExplore .connect-guest-privacy-strip { display: none !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-paths,.connect-guest-modebar) { width: min(720px,100%) !important; margin: 0 auto 18px !important; gap: 10px !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-paths,.connect-guest-modebar) button { min-height: 94px !important; grid-template-columns: 36px 1fr 14px !important; padding: 16px 18px !important; border-radius: 16px !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-paths,.connect-guest-modebar) .connect-path-icon { margin: 0 !important; font-size: 1.65rem !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-paths,.connect-guest-modebar) button strong { font: 800 1rem/1.2 var(--connect-sans) !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-paths,.connect-guest-modebar) button small { margin-top: 6px !important; font-size: .82rem !important; line-height: 1.4 !important; } body.connect-one-page #connectGuidedMount #connectExplore .connect-guest-modebar:not(.connect-approved-paths) button { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } body.connect-one-page #connectGuidedMount #connectExplore .connect-guest-layout { display: block !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) { width: 100% !important; max-width: none !important; padding: clamp(24px,4vw,38px) !important; border-color: rgba(255,255,255,.16) !important; border-radius: 24px !important; background: linear-gradient(145deg,rgba(13,39,65,.94),rgba(3,14,28,.97)) !important; color: #fff !important; box-shadow: 0 30px 80px rgba(0,0,0,.3) !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) :is(h3,.connect-guest-card-heading p) { color: #fff !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) .connect-guest-card-heading p { color: rgba(255,255,255,.7) !important; font-size: 1rem !important; line-height: 1.58 !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) .connect-guest-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 18px 16px !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) .field-city { grid-column: 1 !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) .field-state { grid-column: 2 !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) .field-max, body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) .field-type, body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) .field-beds, body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) .field-baths { grid-column: auto !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) label { color: rgba(255,255,255,.82) !important; font-size: .88rem !important; line-height: 1.4 !important; letter-spacing: .01em; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) label > small { color: rgba(255,255,255,.66) !important; font-size: .82rem !important; line-height: 1.45 !important; } body.connect-one-page #connectGuidedMount #connectExplore .connect-unlimited-budget-help { color: rgba(255,255,255,.66) !important; font-size: .82rem !important; line-height: 1.45 !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) input, body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) select, body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) textarea { border-color: rgba(255,255,255,.18) !important; background: rgba(2,12,24,.68) !important; font-size: 1rem !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) input:focus, body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) select:focus, body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) textarea:focus { border-color: var(--connect-gold) !important; box-shadow: 0 0 0 3px rgba(215,181,95,.12) !important; } .connect-one-optional-preview-field { display: none !important; } body.connect-one-page #connectGuidedMount #connectExplore .connect-one-expanded-details > summary { display: none !important; } body.connect-one-page #connectGuidedMount #connectExplore .connect-one-expanded-details { margin: 16px 0 0 !important; } .connect-one-location-helper { display: block; margin-top: 1px; color: rgba(255,255,255,.64); font-size: .82rem; font-weight: 550; line-height: 1.45; } .connect-one-local-suggestion { display: grid; grid-template-columns: 30px 1fr; align-items: center; width: 100%; min-height: 50px; margin-top: 2px; padding: 8px 11px; border: 1px solid rgba(215,181,95,.32); border-radius: 12px; background: rgba(215,181,95,.08); color: #fff; font: inherit; text-align: left; cursor: pointer; } .connect-one-local-suggestion[hidden] { display: none; } .connect-one-local-suggestion > span { grid-row: 1/3; color: var(--connect-gold-light); font-size: 1.1rem; } .connect-one-local-suggestion strong { font-size: .9rem; } .connect-one-local-suggestion small { color: rgba(255,255,255,.62); font-size: .76rem; } body.connect-one-page #connectGuidedMount #connectExplore .connect-one-feature-picker { margin: 2px 0 12px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(2,12,24,.38); } body.connect-one-page #connectGuidedMount #connectExplore .connect-feature-picker-title { margin-bottom: 11px; color: var(--connect-gold-light); font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } body.connect-one-page #connectGuidedMount #connectExplore .connect-feature-chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } body.connect-one-page #connectGuidedMount #connectExplore .connect-feature-chip { display: inline-flex !important; align-items: center !important; width: auto !important; min-height: 42px !important; margin: 0 !important; padding: 9px 14px !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 999px !important; background: rgba(255,255,255,.045) !important; color: rgba(255,255,255,.78) !important; font-size: .84rem !important; font-weight: 750 !important; transition: border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease !important; } body.connect-one-page #connectGuidedMount #connectExplore .connect-feature-chip:hover { border-color: rgba(215,181,95,.7) !important; transform: translateY(-1px); } body.connect-one-page #connectGuidedMount #connectExplore .connect-feature-chip.selected, body.connect-one-page #connectGuidedMount #connectExplore .connect-feature-chip[aria-pressed="true"] { border-color: var(--connect-gold) !important; background: linear-gradient(135deg,rgba(240,217,140,.2),rgba(215,181,95,.1)) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(215,181,95,.12) !important; } body.connect-one-page #connectGuidedMount #connectExplore .connect-feature-chip.selected::before, body.connect-one-page #connectGuidedMount #connectExplore .connect-feature-chip[aria-pressed="true"]::before { content: "✓"; margin-right: 6px; color: var(--connect-gold-light); } body.connect-one-page #connectGuidedMount #connectExplore .connect-guest-preview:not(.has-connect-preview) { display: none !important; } body.connect-one-page #connectGuidedMount #connectExplore .connect-approved-preview.has-connect-preview { display: block !important; margin-top: 16px; } .connect-one-trust { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px,8vw,110px); align-items: center; width: 100%; max-width: none; padding-inline: max(24px, calc((100vw - 1120px) / 2)); background: radial-gradient(circle at 20% 50%,rgba(20,61,99,.32),transparent 36%),#051326; } .connect-one-trust-copy h2 { font-size: clamp(2.7rem,4.5vw,4.2rem); } .connect-one-trust-copy > p:nth-of-type(2) { color: var(--connect-muted); font-size: 1.03rem; line-height: 1.7; } .connect-one-shield { display: flex; align-items: center; gap: 14px; margin-top: 34px; color: var(--connect-gold-light); } .connect-one-shield > span { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgba(215,181,95,.42); border-radius: 50%; font-size: 2rem; box-shadow: 0 0 40px rgba(215,181,95,.1); } .connect-one-shield small { font-size: .78rem; font-weight: 850; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; } .connect-one-trust-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--connect-line); } .connect-one-trust-list li { display: grid; grid-template-columns: minmax(145px,.7fr) 1.3fr; gap: 24px; padding: 25px 0; border-bottom: 1px solid var(--connect-line); } .connect-one-trust-list strong { color: #fff; font: 700 1.05rem/1.35 var(--connect-serif); } .connect-one-trust-list span { color: var(--connect-muted); font-size: .96rem; line-height: 1.58; } .connect-one-powered { background: var(--connect-deep); } .connect-one-capabilities { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .connect-one-capabilities > * { min-height: 215px; padding: 28px; border: 1px solid var(--connect-line); border-radius: 22px; background: linear-gradient(145deg,rgba(13,38,63,.68),rgba(4,15,29,.86)); color: inherit; } .connect-one-capabilities > * > span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(215,181,95,.32); border-radius: 13px; color: var(--connect-gold-light); font-size: 1.15rem; } .connect-one-capabilities strong { display: block; margin-top: 34px; color: #fff; font: 700 1.15rem/1.3 var(--connect-serif); } .connect-one-capabilities small { display: block; margin-top: 8px; color: var(--connect-muted); font-size: .84rem; line-height: 1.55; } .connect-one-final { padding: 110px 24px 126px; border-top: 1px solid rgba(215,181,95,.14); background: radial-gradient(circle at 50% 30%,rgba(22,65,104,.42),transparent 45%),#041020; text-align: center; } .connect-one-final h2 { width: min(760px,100%); margin: 16px auto 32px; } .connect-one-final .connect-one-primary { min-height: 58px; padding: 0 30px; font-size: .98rem; } body.connect-one-page #connectNotice, body.connect-one-page #connectLoading, body.connect-one-page #connectAuth, body.connect-one-page #connectWorkspace, body.connect-one-page #connectExplore { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } body.connect-one-page #connectExplore { padding-top: 96px !important; scroll-margin-top: 76px; } body.connect-one-page #connectExplore .connect-approved-hero { display: none !important; } body.connect-one-page #connectLoading[hidden], body.connect-one-page #connectAuth[hidden], body.connect-one-page #connectWorkspace[hidden], body.connect-one-page #connectGuidedMount #connectGuestBuyerMode[hidden], body.connect-one-page #connectGuidedMount #connectGuestPropertyMode[hidden] { display: none !important; } body.connect-one-page.connect-one-user-active #connectLanding { display: none; } body.connect-one-page.connect-one-user-active .connect-shell { padding-top: 104px; } body.connect-one-page .connect-guest-notice:not([hidden]), body.connect-one-page #connectNotice:not([hidden]) { position: fixed; top: 82px; left: 50%; z-index: 90; width: min(720px, calc(100% - 28px)); margin: 0; transform: translateX(-50%); box-shadow: 0 16px 44px rgba(2,10,22,.28); } @media (max-width: 980px) { body.connect-one-page .connect-header.connect-one-nav { min-height: 72px; padding: 0 20px; } body.connect-one-page .connect-header-actions { margin-left: auto; } body.connect-one-page .connect-mini-menu { inset: 82px 14px auto; width: auto; max-height: calc(100svh - 96px); } .connect-role-panel { grid-template-columns: 1fr; } .connect-role-panel > button { grid-column: auto; } .connect-one-trust { grid-template-columns: 1fr; } .connect-one-capabilities { grid-template-columns: repeat(2,1fr); } .connect-one-hero h1 { font-size: clamp(4rem,13vw,6.5rem); } .connect-one-earth img { object-position: 52% 49%; transform: scale(1.14); } } @media (max-width: 680px) { body.connect-one-page .connect-guest-notice:not([hidden]), body.connect-one-page #connectNotice:not([hidden]) { top: 70px; width: calc(100% - 24px); } body.connect-one-page .connect-header.connect-one-nav { gap: 10px; padding-inline: 16px; } body.connect-one-page .connect-brand { flex: 0 0 auto; min-width: 0; font-size: 1.12rem !important; } body.connect-one-page .connect-header-actions { flex: 1 1 auto; min-width: 0; gap: 8px; justify-content: flex-end; } body.connect-one-page .connect-identity { flex: 1 1 auto; min-width: 0; max-width: 160px; overflow: hidden; text-align: right; } body.connect-one-page .connect-identity strong, body.connect-one-page .connect-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .connect-one-hero { min-height: 88svh; padding: 98px 18px 40px; } .connect-one-hero h1 { margin-top: 14px; font-size: clamp(3.45rem,17vw,5.2rem); } .connect-one-subhead { margin-top: 22px; font-size: 1.15rem; } .connect-one-copy { font-size: 1.02rem; line-height: 1.65; } .connect-one-actions { flex-direction: column; width: min(100%,360px); margin-inline: auto; } .connect-one-actions > * { width: 100%; min-height: 56px; } .connect-one-trustline { display: grid; justify-items: center; gap: 9px; } .connect-one-section { width: min(100% - 36px,1180px); padding: 64px 0; } .connect-one-roles, .connect-one-trust { width: 100%; padding-inline: 18px; } .connect-one-section-head { margin-bottom: 30px; } .connect-one-section h2, .connect-one-final h2 { font-size: clamp(2.35rem,11vw,3.3rem); } .connect-role-selector { grid-template-columns: repeat(2,minmax(0,1fr)); min-width: 0; max-width: 100%; } .connect-role-selector button { width: 100%; min-width: 0; min-height: 48px; white-space: normal; } .connect-role-panels, .connect-role-panel, .connect-role-panel > * { min-width: 0; max-width: 100%; } .connect-role-panel { min-height: 0; gap: 28px; padding: 28px 24px; border-radius: 22px; } .connect-role-panel :is(h3,p,dd) { overflow-wrap: anywhere; } .connect-role-panel h3 { font-size: 2.25rem; } .connect-role-panel > button { justify-self: stretch; min-height: 54px; } .connect-one-steps { grid-template-columns: 1fr; gap: 24px; } .connect-one-steps::before { display: none; } .connect-one-steps li { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 0; text-align: left; } .connect-one-steps li > span { width: 58px; height: 58px; margin: 0; } .connect-one-trust-list li { grid-template-columns: 1fr; gap: 6px; padding: 17px 0; } .connect-one-capabilities { grid-template-columns: 1fr; } .connect-one-capabilities > * { min-height: 180px; } .connect-one-final { padding: 82px 18px 94px; } .connect-one-guided { padding: 58px 14px; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-paths,.connect-guest-modebar) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; min-width: 0 !important; max-width: 100% !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-paths,.connect-guest-modebar) button { width: 100% !important; min-width: 0 !important; min-height: 92px !important; display: grid !important; grid-template-columns: 28px minmax(0,1fr) 12px !important; padding: 13px 11px !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-paths,.connect-guest-modebar) button :is(strong,small) { min-width: 0; overflow-wrap: anywhere; white-space: normal !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-paths,.connect-guest-modebar) button small { display: none !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) { padding: 22px 17px !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) .connect-guest-form-grid { grid-template-columns: 1fr !important; gap: 14px !important; } body.connect-one-page #connectGuidedMount #connectExplore :is(.connect-approved-form,form.connect-guest-form-card) .connect-guest-form-grid > label { grid-column: 1 !important; } body.connect-one-page #connectGuidedMount #connectExplore .connect-one-feature-picker { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } body.connect-one-page #connectGuidedMount #connectExplore .connect-feature-chips { display: grid !important; grid-template-rows: repeat(2,auto); grid-auto-flow: column; grid-auto-columns: 142px; width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px 0 7px; scrollbar-width: thin; scroll-snap-type: x proximity; } body.connect-one-page #connectGuidedMount #connectExplore .connect-feature-chip { min-height: 44px !important; padding: 9px 12px !important; font-size: .8rem !important; } body.connect-one-page #connectGuidedMount #connectExplore .connect-feature-chip { scroll-snap-align: start; justify-content: center; text-align: center; } body.connect-one-page #connectNotice, body.connect-one-page #connectLoading, body.connect-one-page #connectAuth, body.connect-one-page #connectWorkspace, body.connect-one-page #connectExplore { width: calc(100% - 28px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }