/* YOURHOA marketing pages: homepage (For Owners), For Board Members, FAQ, Privacy.
   Approved design, October 2026. Every page holds its desktop, tablet and phone
   layouts with the exact sizes, colors and spacing inline on each element.
   This file switches between the three layouts and holds resets, hover states,
   the menu, the See It Work tour and the scroll reveal. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-width:none}
html::-webkit-scrollbar,body.yh::-webkit-scrollbar,.yh-menu::-webkit-scrollbar{display:none;width:0;height:0}
body.yh{margin:0;background:#FFFFFF;color:#1C1F24;font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.yh h1,.yh h2,.yh h3,.yh p{margin:0;font-size:inherit;font-weight:inherit}
.yh a{color:inherit;text-decoration:none}
.yh button{font:inherit;color:inherit}
.yh .menu-toggle{border:0;background:transparent;cursor:pointer}
.yh [data-film]{cursor:pointer}
.yh a:focus-visible,.yh button:focus-visible{outline:3px solid #8FAFC4;outline-offset:3px}

/* Layout switch: desktop 1180px+, tablet 600-1179px, phone below 600px.
   Narrow tablet windows keep the supplied 834px canvas and its proportions. */
.v{display:none}
@media (min-width:1180px){.v-desk{display:block}}
@media (600px <= width < 1180px){.v-tab{display:block;max-width:834px;margin:0 auto}body.yh{background:#E8EBEF}body.yh dialog.yh-menu{right:max(16px,calc((100vw - 834px)/2 + 16px))}}
@media (width < 600px){.v-phone{display:block}}
@supports (zoom:calc(100vw / 834px)){
 @media (600px <= width < 834px){.v-tab{width:834px;max-width:none;margin:0;zoom:calc(100vw / 834px)}}
}

/* Hover states from the design */
.hd0:hover{background:#EAEDF0 !important}
.hw0:hover{background:#EAEDF0 !important}

/* A visible signup path accompanies the product demonstration. */
.yh .yh-cta-pair{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.yh .yh-cta-pair>[data-film]{flex:none}
.yh .yh-start{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:22px;padding:12px 20px;border:1px solid currentColor;color:#FFFFFF;font:700 11px/1.2 'Instrument Sans',system-ui,sans-serif;letter-spacing:.14em;white-space:nowrap}
.yh .yh-menu-actions .is-start{background:#A5673F;color:#FFFFFF}
.yh :is(a[data-film],a[data-marketing-action],button[data-marketing-action],.yh-start,.yh-menu-actions a){transition:filter 160ms ease,transform 160ms ease,box-shadow 160ms ease}
@media(hover:hover) and (pointer:fine){
 .yh :is(a[data-film],a[data-marketing-action],button[data-marketing-action],.yh-start,.yh-menu-actions a):hover{filter:brightness(1.08);transform:translateY(-1px)}
}
.yh :is(a[data-film],a[data-marketing-action],button[data-marketing-action],.yh-start,.yh-menu-actions a):active{transform:scale(.98)}
@media(width < 600px){
 .yh .v-phone .yh-page>:is(header,main,footer){min-width:0}
 .yh .v-phone [data-reveal]>div{min-width:0}
 .yh .yh-cta-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
 .yh .yh-cta-pair>[data-film]{text-align:center}
 .yh .yh-start{margin-top:0;width:100%}
}
@media(width < 360px){.yh .v-phone [data-marketing-hero] h1{font-size:clamp(24px,8.8vw,32px)!important}}
@media(prefers-reduced-motion:reduce){
 .yh :is(a[data-film],a[data-marketing-action],button[data-marketing-action],.yh-start,.yh-menu-actions a){transition:none}
 .yh :is(a[data-film],a[data-marketing-action],button[data-marketing-action],.yh-start,.yh-menu-actions a):is(:hover,:active){transform:none}
}

/* Scroll reveal (marketing-navigation.js adds .reveal-pending below the first screen) */
.yh [data-reveal]{transition:opacity 900ms cubic-bezier(.2,0,0,1),transform 900ms cubic-bezier(.2,0,0,1)}
.yh .reveal-pending{opacity:0;transform:translateY(28px)}
@media (prefers-reduced-motion:reduce){.yh [data-reveal]{transition:none}.yh .reveal-pending{opacity:1;transform:none}}

/* Menu: tablet and phone */
dialog.yh-menu{position:fixed;inset:12px 16px auto auto;margin:0;width:260px;max-width:calc(100vw - 32px);max-height:calc(100vh - 24px);overflow:auto;scrollbar-width:none;overscroll-behavior:contain;padding:0;border:0;color:#1C1F24;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:-16px 0 40px rgba(0,0,0,.25)}
dialog.yh-menu::backdrop{background:rgba(28,31,36,.18)}
.yh-menu-top{height:72px;display:flex;align-items:center;justify-content:flex-end;padding:0 12px 0 20px}
.yh-menu-close{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer}
.yh-menu nav{display:grid;padding:0 20px}
.yh-menu nav a{padding:16px 0;font:700 12px/1.2 'Instrument Sans',system-ui,sans-serif;letter-spacing:.16em;color:#1C1F24}
.yh-menu nav a.is-platform{color:#A5673F}
.yh-menu-actions{display:grid;gap:10px;padding:16px 20px 20px}
.yh-menu-actions a{text-align:center;padding:13px 16px;font:500 12px/1.2 'Instrument Sans',system-ui,sans-serif;letter-spacing:.14em;background:#FFFFFF;color:#1C1F24}
.yh-menu-actions a.is-demo{padding:14px 16px;background:#A5673F;color:#FFFFFF}

/* See It Work: the tour opens in place under the hero (marketing-navigation.js) */
.yh-w-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows 700ms cubic-bezier(.2,0,0,1)}
.yh-w-wrap.is-open{grid-template-rows:1fr}
.yh-w-wrap[hidden]{display:none}
.yh-w-clip{min-height:0;overflow:hidden}
.yh .yh-w{background:#243544;color:#FFFFFF;padding:56px 72px 64px;box-shadow:0 1px 2px rgba(28,31,36,.06),0 24px 60px rgba(28,31,36,.18)}
.yh .yh-w-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.yh .yh-w-controls{display:flex;flex:none;gap:16px;padding-top:1px}
.yh .yh-w-controls button{border:0;padding:8px 0;background:transparent;color:#C9D6DE;font:700 10px/1.2 'Instrument Sans',system-ui,sans-serif;letter-spacing:.14em;cursor:pointer;white-space:nowrap}
.yh .yh-w-close span{margin-left:5px;font-size:16px;vertical-align:-1px}
.yh .yh-w-controls button[hidden],.yh .yh-w-panel[hidden]{display:none}
.yh .yh-w-panel:focus-visible{outline:3px solid #8FAFC4;outline-offset:8px}
.yh .yh-w-wrap.is-paused *{animation-play-state:paused!important}
.yh .yh-w-kicker{font:700 11px/1.3 'Instrument Sans',system-ui,sans-serif;letter-spacing:.18em;color:#D9A87F}
.yh .yh-w-title{margin-top:10px;font:700 32px/1.08 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.03em;color:#FFFFFF}
.yh .yh-w-sub{margin-top:8px;font:400 15px/1.5 'IBM Plex Sans',system-ui,sans-serif;color:#C9D6DE}
.yh .yh-w-left{display:flex;flex-direction:column;align-items:flex-start;gap:48px}
.yh .yh-w-tabs{display:flex;gap:2px}
.yh .yh-w-tab{position:relative;overflow:hidden;border:0;padding:13px 18px;background:#3F4F5C;color:#C9D6DE;font:700 11px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.14em;white-space:pre;cursor:pointer}
.yh .yh-w-label{position:relative}
.yh .yh-w-fill{position:absolute;inset:0;background:#A5673F;transform:scaleX(0);transform-origin:left center}
.yh .yh-w-tab.is-done .yh-w-fill{transform:scaleX(1)}
.yh .yh-w-tab.is-active,.yh .yh-w-tab.is-done{color:#FFFFFF}
.yh .yh-w-body{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;align-items:center}
.yh .yh-w-copy{transition:opacity 260ms ease,transform 260ms ease}
.yh .yh-w-copy.is-swapping{opacity:0;transform:translateY(8px)}
.yh .yh-w-ck{font:700 12px/1.3 'Instrument Sans',system-ui,sans-serif;letter-spacing:.18em;color:#D9A87F}
.yh .yh-w-h{margin-top:14px;max-width:560px;font:700 44px/1.04 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.035em;color:#FFFFFF;text-wrap:balance}
.yh .yh-w-p{margin-top:18px;max-width:480px;font:400 16px/1.55 'IBM Plex Sans',system-ui,sans-serif;color:#DDE6EC;text-wrap:pretty}
.yh .yh-w-device{display:flex;justify-content:center}
.yh .yh-w-phone{flex:none;width:300px;height:616px;padding:10px;border-radius:48px;background:#11161B;box-shadow:0 40px 90px rgba(8,14,20,.55)}
.yh .yh-w-screen{height:100%;display:flex;flex-direction:column;border-radius:38px;overflow:hidden;background:#EAEDF0;color:#1C1F24;font-family:'Instrument Sans',system-ui,sans-serif}
.yh .yh-w-stage{position:relative;flex:1;min-height:0}
.yh .s-scr{position:absolute;inset:0;display:none;flex-direction:column}
.yh .s-scr.is-on{display:flex}
.yh .s-status{flex:none;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 26px;background:#3F4F5C;color:#FFFFFF;font:700 12px/1 'Instrument Sans',system-ui,sans-serif}
.yh .s-notch{width:84px;height:24px;border-radius:12px;background:#11161B}
.yh .s-ind{display:flex;align-items:flex-end;gap:2px}
.yh .s-ind i{width:3px;background:#FFFFFF}
.yh .s-ind i:nth-child(1){height:5px}.yh .s-ind i:nth-child(2){height:7px}.yh .s-ind i:nth-child(3){height:9px}
.yh .s-ind em{width:18px;height:9px;margin-left:5px;border-radius:2px;background:#FFFFFF}
.yh .s-head{flex:none;padding:2px 18px 16px;background:#3F4F5C;color:#FFFFFF}
.yh .s-back{font:700 9.5px/1.2 'Instrument Sans',system-ui,sans-serif;letter-spacing:.12em;color:#D9A87F}
.yh .s-hk{margin-top:8px;font:700 9px/1.3 'Instrument Sans',system-ui,sans-serif;letter-spacing:.14em;color:#C9D6DE}
.yh .s-ht{margin-top:4px;min-height:22px;font:700 19px/1.15 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.02em;color:#FFFFFF}
.yh .s-hs{margin-top:5px;font:400 11px/1.4 'IBM Plex Sans',system-ui,sans-serif;color:#C9D6DE}
.yh .s-flag{display:inline-block;margin-top:8px;padding:4px 7px;background:#5F7A8C;color:#FFFFFF;font:700 8.5px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.12em}
.yh .s-flag.cu{background:#A5673F}
.yh .s-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;padding:10px;overflow:hidden}
.yh .s-card{background:#FFFFFF;padding:10px 12px}
.yh .s-row{display:flex;align-items:center;gap:10px}
.yh .s-start{align-items:flex-start}
.yh .s-grow{flex:1;min-width:0}
.yh .s-k{font:700 8.5px/1.3 'Instrument Sans',system-ui,sans-serif;letter-spacing:.14em;color:#A5673F}
.yh .s-gray{color:#5B6570}
.yh .s-t{margin-top:2px;font:700 12.5px/1.3 'Instrument Sans',system-ui,sans-serif;color:#1C1F24}
.yh .s-d{margin-top:3px;font:400 11px/1.45 'IBM Plex Sans',system-ui,sans-serif;color:#5B6570}
.yh .s-d b{font-weight:500;color:#1C1F24}
.yh .s-dark{color:#2A2F36}
.yh .s-ph{color:#8A9199}
.yh .s-note{padding:6px 2px;font:400 10.5px/1.4 'IBM Plex Sans',system-ui,sans-serif;color:#5B6570}
.yh .s-pad{padding:8px 2px 4px}
.yh .s-btn{margin-top:6px;padding:12px;text-align:center;background:#243544;color:#FFFFFF;font:700 10px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.14em;transition:transform 160ms ease,filter 160ms ease}
.yh .s-btn.cu{background:#A5673F}
.yh .yh-w .press{transform:scale(.95);filter:brightness(1.15)}
.yh .s-okk{flex:none;font:700 8.5px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.12em;color:#A5673F}
.yh .s-pdf{flex:none;width:30px;height:36px;display:flex;align-items:center;justify-content:center;background:#DFE3E7;color:#5B6570;font:700 7.5px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.08em}
.yh .s-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.yh .s-tiles>div{padding:9px 9px 10px;background:#FFFFFF}
.yh .s-tiles .s-t{font-size:11px}
.yh .s-chips{display:flex;flex-wrap:wrap;gap:4px;padding-top:6px}
.yh .s-chips span{padding:5px 7px;background:#DFE3E7;color:#243544;font:700 9px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.06em}
.yh .s-tag{display:inline-block;margin-left:4px;padding:3px 5px;vertical-align:1px;background:#A5673F;color:#FFFFFF;font:700 7.5px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.12em}
.yh .s-num{flex:none;font:700 13px/1 'Instrument Sans',system-ui,sans-serif;color:#1C1F24}
.yh .s-bar{margin-top:7px;height:6px;background:#E3E7EB}
.yh .s-bar i{display:block;width:0;height:100%;background:#243544}
.yh .s-bar.fill i{width:var(--w)}
.yh .s-res{padding:7px 0}
.yh .s-tally{padding:8px 12px}
.yh .s-tally .s-bar{margin-top:6px}
.yh .s-box{flex:none;width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:#DFE3E7;color:#FFFFFF;font:700 11px/1 'Instrument Sans',system-ui,sans-serif;transition:background 200ms ease}
.yh .s-box.checked{background:#A5673F}
.yh .s-box.checked::after{content:'✓'}
.yh .s-mini{flex:none;font:700 8px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.12em;color:#5F7A8C}
.yh .s-photo{flex:none;width:58px;height:58px;display:flex;align-items:flex-end;padding:5px;background:#C9D6DE;color:#3F4F5C;font:700 7px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.1em}
.yh .s-band{display:flex;justify-content:space-between;gap:8px;margin:-10px -12px 8px;padding:7px 12px;background:#243544;color:#FFFFFF;font:700 8px/1.2 'Instrument Sans',system-ui,sans-serif;letter-spacing:.12em}
.yh .s-band span:last-child{color:#C9D6DE}
.yh .s-band.cu{background:#A5673F}
.yh .s-band.cu span:last-child{color:#F6EBE1}
.yh .s-work{padding:12px 4px;font:400 11px/1.4 'IBM Plex Sans',system-ui,sans-serif;color:#5B6570;animation:yhw-pulse 1.2s ease-in-out infinite}
.yh .s-done{margin-top:6px;padding:12px;background:#243544}
.yh .s-done .s-k{color:#D9A87F}.yh .s-done .s-t{color:#FFFFFF}.yh .s-done .s-d{color:#C9D6DE}
.yh .s-sheet{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:6px;padding:18px 16px 22px;background:#243544;color:#FFFFFF;box-shadow:0 -24px 60px rgba(28,31,36,.3)}
.yh .s-sheet.s-light{background:#FFFFFF;color:#1C1F24}
.yh .s-sk{font:700 8.5px/1.3 'Instrument Sans',system-ui,sans-serif;letter-spacing:.14em;color:#D9A87F}
.yh .s-st{font:700 18px/1.2 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.02em;color:#FFFFFF}
.yh .s-light .s-st{color:#1C1F24}
.yh .s-sd{font:400 11px/1.4 'IBM Plex Sans',system-ui,sans-serif;color:#C9D6DE}
.yh .s-quote{margin-top:2px;font:400 11.5px/1.5 'IBM Plex Sans',system-ui,sans-serif;color:#2A2F36}
.yh .s-sugg{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.yh .s-sugg .s-k{padding:4px 2px 6px}
.yh .s-sugg span{padding:10px 12px;background:#FFFFFF;color:#2A2F36;font:400 11px/1.3 'IBM Plex Sans',system-ui,sans-serif}
.yh .s-q{align-self:flex-end;max-width:84%;margin-top:6px;padding:10px 12px;background:#243544;color:#FFFFFF;font:500 11.5px/1.4 'IBM Plex Sans',system-ui,sans-serif}
.yh .s-a{margin-top:8px;padding:12px;background:#FFFFFF;color:#2A2F36;font:400 11.5px/1.5 'IBM Plex Sans',system-ui,sans-serif}
.yh .s-cites{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.yh .s-cites span{padding:6px 8px;background:#DFE3E7;color:#243544;font:700 8.5px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.1em;transition:transform 160ms ease,filter 160ms ease}
.yh .s-cites span.cu{background:#A5673F;color:#FFFFFF}
.yh .s-input{position:absolute;left:10px;right:10px;bottom:14px;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;background:#FFFFFF;box-shadow:0 6px 18px rgba(28,31,36,.12);color:#1C1F24;font:400 11px/1.35 'IBM Plex Sans',system-ui,sans-serif}
.yh .s-input b{flex:none;padding:8px 10px;background:#243544;color:#FFFFFF;font:700 9px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.12em;transition:transform 160ms ease,filter 160ms ease}
.yh .s-hl{margin-top:4px;padding:10px 12px;background:#F6EBE1}
.yh .s-toast{position:absolute;left:10px;right:10px;top:8px;padding:12px 14px;background:#FFFFFF;box-shadow:0 14px 34px rgba(10,16,22,.32)}
.yh .yh-w [data-step]:not(.on){display:none!important}
.yh .yh-w [data-hide].off{display:none!important}
.yh .yh-w [data-step].on{animation:yhw-in 480ms cubic-bezier(.2,0,0,1) both}
.yh .yh-w .s-sheet[data-step].on{animation:yhw-up 560ms cubic-bezier(.2,0,0,1) both}
.yh .yh-w .s-toast[data-step].on{animation:yhw-down 560ms cubic-bezier(.2,0,0,1) both}
@keyframes yhw-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes yhw-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes yhw-down{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes yhw-pulse{50%{opacity:.45}}
@media (600px <= width < 1180px){
.yh .yh-w{padding:40px}
.yh .yh-w-title{font-size:28px}
.yh .yh-w-body{margin-top:32px;gap:40px}
.yh .yh-w-left{gap:32px}
.yh .yh-w-h{font-size:32px}
.yh .yh-w-p{font-size:15px}}
@media (width < 600px){
.yh .yh-w{padding:28px 20px 32px}
.yh .yh-w-top{flex-direction:column;gap:12px}
.yh .yh-w-controls{gap:24px}
.yh .yh-w-title{font-size:24px}
.yh .yh-w-sub{font-size:14px}
.yh .yh-w-left{align-items:stretch;gap:24px}
.yh .yh-w-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.yh .yh-w-tab{padding:12px 4px;font-size:10px;letter-spacing:.1em;text-align:center}
.yh .yh-w-body{margin-top:24px;grid-template-columns:minmax(0,1fr);gap:28px}
.yh .yh-w-h{font-size:26px}
.yh .yh-w-p{font-size:14.5px}}
@media (width < 360px){.yh .yh-w-phone{transform:scale(.9);transform-origin:top center;margin-bottom:-62px}}
@media (prefers-reduced-motion:reduce){.yh-w-wrap{transition:none}.yh .yh-w *{animation:none!important;transition:none!important}.yh .yh-w-copy.is-swapping{opacity:1;transform:none}}
.yh .yh-platform-context{background:#fff;border-bottom:1px solid #dce2e7;padding:12px clamp(20px,4vw,48px);color:#243544;font:400 13px/1.5 'IBM Plex Sans',system-ui,sans-serif}
.yh .yh-platform-context p{margin:0}
.yh .yh-platform-context [data-demo-context]{margin-top:4px;color:#5b6570;font-size:12px}