@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600;700;800;900&display=swap');
/* Shared mobile chrome per the design handoff: MENU button + glass panel. */
.demo-ribbon{display:none !important}

/* Two breakpoints: mobile (hamburger, including Owner Login) is the default.
   Desktop from 861px spreads the full nav across the header. */
.burger{display:block;margin-left:auto;border:1px solid rgba(251,249,243,.35);
  background:rgba(251,249,243,.1);color:#F7F7F6;font:600 11px/1 'Instrument Sans',sans-serif;
  letter-spacing:.12em;padding:13px 16px;cursor:pointer}
.topbar .in,.top .in{display:flex !important;align-items:center;flex-wrap:nowrap !important;
  justify-content:flex-start;gap:16px;width:100%}
.navr,.navr.expanded-nav{display:none !important}
.navr a{text-decoration:none;color:inherit;cursor:pointer}
.navr a.on{color:#F7F7F6;font-weight:700}
.topbar .brand,.top .brand{white-space:nowrap;flex:0 0 auto}
.pagehead h1{font-size:29px}
.brand{font-size:24px !important}

@media (min-width:861px){
  .burger{display:none !important}
  .brand{font-size:31px !important}
  .pagehead h1{font-size:inherit}
  .topbar .in,.top .in{justify-content:center !important;gap:0}
  .topbar .brand,.top .brand{margin-right:56px}
  .navr,.navr.expanded-nav{flex:0 1 auto !important;display:flex !important;align-items:center;
    justify-content:flex-start !important;gap:24px !important;min-width:0;
    margin-left:0 !important;
    font-size:12px !important;letter-spacing:.1em !important;flex-wrap:nowrap !important}
  .navr a{padding:0;white-space:nowrap;flex-shrink:0}
  .navr.expanded-nav .login{margin-left:28px !important;padding:10px 18px !important;flex:0 0 auto}
}

/* The three workflow products share one compact desktop entry so the header
   stays on one line. The mobile menu lists each portal directly. */
.nav-portals{position:relative;color:inherit}
.nav-portals summary{list-style:none;cursor:pointer;white-space:nowrap}
.nav-portals summary::-webkit-details-marker{display:none}
.nav-portals summary::after{content:"";display:inline-block;width:5px;height:5px;
  margin:0 0 3px 7px;border-right:1px solid #A8AAAD;border-bottom:1px solid #A8AAAD;
  transform:rotate(45deg)}
.nav-portals[open] summary,.nav-portals summary:hover,.nav-portals summary:focus-visible{
  color:#F7F7F6;outline:none}
.nav-portals.on summary{color:#F7F7F6;font-weight:700}
.nav-portals[open] summary::after{transform:rotate(225deg);margin-bottom:0}
.portal-nav-menu{position:absolute;z-index:80;top:calc(100% + 14px);right:0;
  min-width:190px;padding:7px 0;background:#1C1F24;
  border:1px solid rgba(251,249,243,.2);box-shadow:0 18px 42px rgba(28,31,36,.35)}
.portal-nav-menu a{display:block;padding:11px 16px;color:#E4E4E2 !important;
  font-size:11.5px;line-height:1.2;letter-spacing:.1em;white-space:nowrap}
.portal-nav-menu a:hover,.portal-nav-menu a.on{background:rgba(251,249,243,.09);
  color:#FFFFFF !important}

/* No BACK button: the browser has one and the nav is always visible */
/* Title band, every screen: heading at the left, back button at the right. */
.backbar{display:none !important}
.pagehead .in.has-back{display:flex !important;align-items:center;
  justify-content:flex-start;gap:20px;flex-wrap:wrap;text-align:left !important}
.backbtn{order:1;flex:0 0 auto;margin-left:auto;
  background:rgba(251,249,243,.16);border:1px solid rgba(28,31,36,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#1C1F24;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  padding:7px 12px;text-decoration:none;white-space:nowrap;line-height:1;
  display:inline-flex;align-items:center;min-height:30px}
.backbtn:hover{background:rgba(251,249,243,.3);color:#1C1F24}
.pagehead .in.has-back > h1,
.pagehead .in.has-back > .bc{order:0;margin-left:0 !important;text-align:left}
.pagehead .in.has-back > .sub,
.pagehead .in.has-back > .note{order:2;flex:1 0 100%;text-align:left;margin:0}
.pagehead .eyebrow{display:none}
.pagehead .bc,.pagehead .bc a{color:#5A6B42 !important}

/* Wordmark and charcoal header / footer bands. */
/* The wordmark is an anchor on every page but the home page, so it needs its
   own colour and no underline; otherwise it inherits the body link style. */
.brand{font-family:'Instrument Sans',system-ui,sans-serif !important;
  font-weight:800 !important;letter-spacing:.04em !important;
  -webkit-text-stroke:0 !important;font-size:31px !important;
  color:#F7F7F6 !important;text-decoration:none !important;cursor:pointer;
  white-space:nowrap}
.brand:hover{color:#FFFFFF !important}
.brand .hoa-silver,.footer-brand .hoa-silver,
.brand:hover .hoa-silver,.footer-brand:hover .hoa-silver{color:#C5C8CC !important}
.topbar,.top,.foot{background:#1C1F24 !important}
.menu-panel{background:rgba(28,31,36,.72) !important}
/* Shared management footer: the reference composition, with Willow Bend's
   actual management details. */
.foot.hoa-foot{background:#1C1F24 !important;color:#C5C6C8 !important;
  font-family:'Instrument Sans',system-ui,sans-serif}
.foot.hoa-foot *{box-sizing:border-box}
.foot.hoa-foot .footer-primary{padding:22px var(--pad,64px) 34px;
  max-width:none;margin:0 auto;width:100%;box-sizing:border-box;
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px}
.foot.hoa-foot .footer-brand{font-family:'Instrument Sans',system-ui,sans-serif;
  font-weight:800;font-size:24px;line-height:1;letter-spacing:.04em;
  text-transform:uppercase;color:#F7F7F6;text-decoration:none;
  -webkit-text-stroke:0;width:max-content;white-space:nowrap;flex:0 0 auto}
.foot.hoa-foot .footer-brand:hover{color:#E4E4E2}
.foot.hoa-foot .footer-columns{display:block;margin-left:auto;flex:0 1 auto;text-align:left}
.foot.hoa-foot .footer-column{min-width:0}
.foot.hoa-foot .footer-label{margin-bottom:8px;font-size:10.5px;line-height:1.2;
  letter-spacing:.18em;font-weight:700;color:#5A6B42}
.foot.hoa-foot address{margin:0;font-style:normal;font-size:13.5px;line-height:1.7;
  color:#D8D8D6}
.foot.hoa-foot .footer-reach{display:none}
.foot.hoa-foot .footer-legal,.foot.hoa-foot .footer-dim{display:none !important}

/* ---- Summary cards inside a band (63e) --------------------------------
   label, title, one meta line, one action. Light type on the dark grounds. */
.cardt{font-size:20px;font-weight:700;color:#3A3D41;line-height:1.25}
.cardm{font-size:13.5px;color:#5C5F63;margin-top:6px;line-height:1.5}
.carda{display:inline-block;font-size:13px;font-weight:700;color:#5A6B42;
  text-decoration:none;margin-top:14px;padding:12px 0;min-height:44px}
.carda:hover{color:#5A6B42}
.band[style*="#3A3D41"] .lab,.band[style*="#5A6B42"] .lab{color:#A8AAAD}
.band[style*="#3A3D41"] .cardt,.band[style*="#5A6B42"] .cardt{color:#F7F7F6}
.band[style*="#3A3D41"] .cardm,.band[style*="#5A6B42"] .cardm{color:#C5C6C8}
.band[style*="#3A3D41"] .carda,.band[style*="#5A6B42"] .carda{color:#E4E4E2}
.band[style*="#3A3D41"] .carda:hover,.band[style*="#5A6B42"] .carda:hover{color:#F7F7F6}

/* ---- The frame ---------------------------------------------------------
   Header and footer are full-bleed brown bands across the screen. The
   content container floats between them with padding and a shadow.

     content box   max-width 1440px  (from the design handoff - this is what
                   keeps the type at its intended size)
     inner pad     64px desktop / 32px tablet / 20px phone   (--pad)
     side rails    10% of screen width, or whatever is left once the box
                   hits 1440px, whichever is larger
     top + bottom  a percentage of screen HEIGHT, sized so the header, the
                   box and the footer all land inside one screen

   On a short laptop the box scrolls inside its own frame, keeping the
   footer on the screen.
   -------------------------------------------------------------------- */
:root{--pad:64px;--rail:10vw;--vpad:clamp(28px,5vh,68px);
  --moss:#5A6B42;--moss-d:#3A3D41;--moss-pale:#E4E4E2}
body,.page{gap:0 !important}
body,.page{background:#EFEFEE !important}

/* Breathing room above the container and above the footer. */
.topbar,.top{margin-bottom:var(--vpad) !important}
.foot{margin-top:var(--vpad) !important}
.backbar{width:min(calc(100vw - 2*var(--rail)),1440px) !important;max-width:1440px !important;
  margin:0 auto !important;padding:0 0 14px !important}
.backbar+.wrap{margin-top:0 !important}
.wrap{width:min(calc(100vw - 2*var(--rail)),1440px) !important;max-width:1440px !important;
  margin:0 auto !important;display:flex !important;flex-direction:column !important;
  box-shadow:0 24px 60px rgba(28,31,36,.22), 0 4px 14px rgba(28,31,36,.10) !important}
.wrap > *{min-width:0}
.in{padding-left:var(--pad) !important;padding-right:var(--pad) !important}
.topbar .in,.top .in{padding-top:22px !important;padding-bottom:22px !important;
  max-width:none !important;width:100% !important}
.top,.topbar{padding-top:0 !important;padding-bottom:0 !important}
.foot .in{padding-top:22px !important;padding-bottom:22px !important}
.page > .foot{padding:0 !important;margin-top:auto !important}

/* ---- One scroller, and padding that gives way -------------------------
   The container used to be a fixed-height box with its own scrollbar inside
   the page's scrollbar, so a long page scrolled internally while empty
   padding sat above it. The document is now the only scroller: the container
   is as tall as its content, and the padding above and below shrinks as the
   screen gets shorter, keeping the page to one scroller.

   The home page is the exception - it keeps its own fit-to-screen rules.  */
@media (min-width:701px){
  html,body{min-height:100%;}
  body{min-height:100vh;min-height:100dvh;display:flex !important;flex-direction:column}
  .page{flex:1 1 auto;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
  .topbar,.top{flex:0 0 auto !important;margin-bottom:0 !important}
  .wrap{flex:0 0 auto !important;min-height:0 !important;overflow:visible !important;
    margin-top:auto !important;margin-bottom:auto !important}
  .foot{flex:0 0 auto !important;margin-top:0 !important;margin-bottom:0 !important}
  .page > .foot{margin-top:0 !important}
}

/* Short screens: trim the bands so the box keeps its proportions */
@media (max-height:1000px){
  :root{--vpad:clamp(26px,4.6vh,56px)}
  .topbar .in,.top .in{padding-top:22px !important;padding-bottom:22px !important}
  .top,.topbar{padding-top:0 !important;padding-bottom:0 !important}
  .foot .in{padding-top:12px !important;padding-bottom:11px !important}
}
@media (max-height:840px){
  :root{--vpad:clamp(22px,3.6vh,40px)}
  .topbar .in,.top .in{padding-top:18px !important;padding-bottom:18px !important}
  .top,.topbar{padding-top:0 !important;padding-bottom:0 !important}
  .foot .in{padding-top:10px !important;padding-bottom:9px !important}
}
@media (max-width:1180px){
  :root{--pad:32px;--rail:7vw;--vpad:6vh}
  .topbar .in,.top .in{padding-top:22px !important;padding-bottom:22px !important}
  .top,.topbar{padding-top:0 !important;padding-bottom:0 !important}
  .foot .in{padding-top:22px !important;padding-bottom:22px !important}
}
@media (max-width:700px){
  :root{--pad:20px;--rail:4vw;--vpad:clamp(24px,3.4vh,38px)}
  /* Short pages still fill the screen, so no white sits under the footer. */
  html{min-height:100%}
  body{min-height:100vh;display:flex !important;flex-direction:column}
  .page{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .wrap{margin-bottom:auto !important}
  .topbar,.top,.foot{flex:0 0 auto !important}
  .foot{margin-top:auto}
  .topbar .in,.top .in{padding-top:16px !important;padding-bottom:16px !important}
  .top,.topbar{padding-top:0 !important;padding-bottom:0 !important}
  .foot .in{padding-top:30px !important;padding-bottom:27px !important}
}

.menu{position:fixed;inset:0;background:rgba(28,31,36,.45);z-index:50;display:none}
.menu.open{display:block}
.menu-panel{position:absolute;top:8px;right:12px;width:max-content;min-width:172px;max-width:70vw;
  max-height:calc(100dvh - 16px);overflow:hidden;
  background:rgba(28,31,36,.62);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(251,249,243,.22);
  display:flex;flex-direction:column;box-shadow:none}
.menu-top{display:flex;align-items:center;justify-content:flex-end;padding:11px 14px 7px}
.menu-close{border:none;background:none;color:#E4E4E2;font-size:14px;font-weight:600;
  line-height:1;padding:0;cursor:pointer}
.menu-close:hover{color:#F7F7F6}
.menu nav{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;overflow-y:auto}
.menu nav a{display:block;color:#F7F7F6;font-size:12.5px;font-weight:600;letter-spacing:.1em;
  padding:11px 15px;border-bottom:1px solid rgba(251,249,243,.14);text-decoration:none}
.menu nav a:last-child{border-bottom:none}
.menu nav a:hover{background:rgba(251,249,243,.07);color:#F7F7F6}

/* ---- Phone layout, per the 63e / 63f / 63g / 62a references -----------
   The references show the inside of the content container: sections stacked
   full-width WITHIN the container, alternating dark and light, separated by a
   hairline. The container itself keeps its padding and shadow, as on desktop.
   -------------------------------------------------------------------- */
@media (max-width:700px){
  /* A label sitting flush on its heading read as one run-on line. */
  .kick,.lab{margin-bottom:6px}
  /* sections run edge to edge inside the container, hairline between them */
  .wrap .band{border-top:1px solid rgba(28,31,36,.16)}
  .wrap .band:first-child{border-top:0}
  /* One title in its own sage band. The eyebrow repeated the heading word
     for word, and Minutes carried a breadcrumb saying it a third time. */
  .pagehead{background:#E4E4E2 !important}
  .pagehead .in{padding-top:10px !important;padding-bottom:11px !important;
    display:block !important;text-align:left}
  .pagehead .eyebrow{display:none !important}
  .pagehead .sub{display:none !important}
  /* Minutes carried a breadcrumb that named the page a third time. */
  .pagehead .bc{display:none !important}
  .pagehead h1,.pagehead .bc h1{color:#1C1F24 !important;margin:0 !important;
    display:block !important;font-size:26px !important;line-height:1.15 !important}
}

@media (max-width:700px){
  .foot.hoa-foot .footer-primary{padding:15px 18px 16px;gap:16px;
    display:flex !important;flex-direction:row !important;
    justify-content:space-between !important;align-items:flex-start !important}
  .foot.hoa-foot .footer-brand{font-size:18px}
  .foot.hoa-foot .footer-columns{display:block !important;margin-left:auto}
  .foot.hoa-foot address{font-size:12px;line-height:1.5}
  .foot.hoa-foot .footer-legal{margin:0 18px;gap:4px 12px;padding:8px 0 16px;
    font-size:10px;flex-direction:row;justify-content:space-between}
  .foot.hoa-foot .footer-dim{text-align:right}
}

/* Keep Management on the right even on a short landscape screen. */
@media (max-height:700px){
  .foot.hoa-foot .footer-primary{padding:11px 18px 14px;gap:16px;
    display:flex !important;flex-direction:row !important;
    justify-content:space-between !important;align-items:flex-start !important}
  .foot.hoa-foot .footer-brand{font-size:18px}
  .foot.hoa-foot .footer-columns{display:block !important;margin-left:auto}
  .foot.hoa-foot address{font-size:12px;line-height:1.45}
  .foot.hoa-foot .footer-legal{margin:0 18px;gap:4px 12px;padding:7px 0 14px;
    font-size:10px;flex-direction:row;justify-content:space-between}
  .foot.hoa-foot .footer-dim{text-align:right}
}

.totop-bar,.totop{display:none !important}

/* Portal screens: header and footer stay on screen; the white card is the scroller. */
html:has(body.workflow-page),body.workflow-page{height:100%;overflow:hidden !important}
body.workflow-page{display:flex !important;flex-direction:column;min-height:100vh;gap:0}
body.workflow-page{height:100vh !important;height:100dvh !important}
body.workflow-page .topbar{flex:0 0 auto;margin-bottom:0 !important}
body.workflow-page .foot{flex:0 0 auto !important;margin-top:0 !important;display:block !important}
body.workflow-page #workflow{
  flex:1 1 auto;min-height:0;overflow:auto;
  width:min(calc(100vw - 2*var(--rail)),1440px);max-width:1440px;margin:0 auto;
  background:#F7F7F6;box-shadow:none}

/* Overlays: login gate, workflow dialogs, and dashboard composers.
   Charcoal / gray surfaces, moss accent. No copper, no steel-blue. */
.veil{background:rgba(28,31,36,.62)!important}
.gate,.preview-form,dialog{
  background:#F7F7F6!important;color:#1C1F24!important;
  box-shadow:0 24px 60px rgba(28,31,36,.28)!important;border-radius:0!important}
.gate .b2,.preview-form h2,dialog h2{color:#1C1F24!important}
.gate .go-btn,dialog .dialog-done,.preview-form button[type=submit]{
  background:#3A3D41!important;color:#F7F7F6!important;border:0!important}
.gate .go-btn:hover,dialog .dialog-done:hover{background:#5A6B42!important}
.gate input:focus,dialog input:focus,dialog textarea:focus{border-color:#5A6B42!important}
dialog{border:1px solid #D8D8D6!important;background:#F7F7F6!important}
dialog::backdrop{background:rgba(28,31,36,.62)!important}

.dashboard-demo-composer,.dashboard-billing{color:#1C1F24;font-family:'Instrument Sans',sans-serif}
.dashboard-demo-composer::backdrop,.dashboard-billing::backdrop{background:rgba(28,31,36,.62)!important}
.ddc-shell,.dashboard-billing{background:#F7F7F6!important;box-shadow:0 24px 60px rgba(28,31,36,.28)!important}
.ddc-accent,.is-email .ddc-accent{background:#5A6B42!important;display:block!important;height:4px}
.ddc-header h2 b,.is-email .ddc-header h2 b,
.ddc-context,.is-email .ddc-context,
.ddc-field>label,.is-email .ddc-field>label,
.ddc-signature summary,.is-email .ddc-signature summary,
.ddc-preview-kicker,.dashboard-billing h2 span,.dashboard-billing .db-context,.dashboard-billing h3{
  color:#5A6B42!important}
.ddc-file-box,.is-email .ddc-file-box{
  border:1px dashed #A8AAAD!important;background:#EFEFEE!important;color:#5C5F63!important}
.ddc-primary,.is-email .ddc-primary,.dashboard-billing .db-primary,
.dashboard-billing .db-periods .is-active{
  background:#3A3D41!important;border-color:#3A3D41!important;color:#F7F7F6!important}
.ddc-recipients strong{background:#3A3D41!important;color:#F7F7F6!important}
.ddc-email-meta,.ddc-preview-files li,.ddc-records,.is-email .ddc-file-box{
  background:#EFEFEE!important;border-color:#D8D8D6!important}
.dashboard-billing .db-tile:nth-child(2){background:#E4E4E2!important}
.dashboard-billing .db-tile:nth-child(3){background:#3A3D41!important;color:#F7F7F6!important}
.dashboard-billing .db-tiles .db-tile{background:#EFEFEE!important}
.dashboard-billing button:focus-visible{outline-color:#5A6B42!important}

@media (max-width:860px){
  .navr,.navr.expanded-nav{display:none !important}
  button.burger,.burger{display:block !important;margin-left:auto !important}
  .topbar .in{gap:12px!important;min-width:0}
  .topbar .brand{min-width:0;font-size:clamp(18px,5vw,22px)!important;white-space:normal;overflow-wrap:anywhere}
  .topbar .burger{flex:0 0 auto}
}