/* House of Anons v3 — content.css
   Lane B: content styling for the panel pages, below-the-fold blocks, and the /i/<slug> capture
   page. References tokens.css roles only — no new L1 primitives, no JS-driven ambient motion. */

.hoa-content{max-width:760px; margin-top:4px; padding:0}
.hoa-content h1{font-size:28px; margin-bottom:6px}
.hoa-content .lead{color:var(--text-muted); font-size:15.5px; margin-bottom:22px; max-width:560px}
.hoa-content .section-h{font-size:19px; margin:26px 0 10px}
.hoa-content p{font-size:16px; line-height:1.6; color:var(--text-primary)}
.hoa-content .hint{margin-top:16px; font-size:13.5px; color:var(--text-muted)}
.hoa-content .hint a{color:var(--accent-live); text-decoration:underline}

/* tenant-owned marker — distinct from lane A's structural [LANE B] tag */
.tenant-tag{display:inline-block; font-size:10px; letter-spacing:.06em; color:var(--accent-price); border:1px dashed rgba(255,176,84,.45); border-radius:8px; padding:3px 8px; line-height:1.5}

/* the three quiet rules */
.hoa-rule{border-top:1px solid var(--border-cool); padding:16px 0}
.hoa-rule:first-of-type{border-top:none; padding-top:6px}
.hoa-rule-no{font-size:11px; letter-spacing:.2em; color:var(--accent-live); font-weight:700}
.hoa-rule h2{font-size:18px; margin:6px 0 6px}
.hoa-rule p{color:var(--text-muted); font-size:15px}

/* If tonight is hard */
.hoa-crisis{margin-top:26px; background:rgba(255,176,84,.06); border:1px solid rgba(255,176,84,.3); border-radius:var(--radius-md); padding:20px 22px}
.hoa-crisis h2{font-size:18px; margin-bottom:8px; color:var(--accent-price)}
.hoa-crisis p{font-size:15px}
.hoa-crisis-list{list-style:none; margin:12px 0; display:flex; flex-direction:column; gap:8px}

/* Find your people */
.hoa-fyp-grid{display:grid; gap:14px; margin-top:8px}
.hoa-room-example{margin-top:10px; background:var(--parchment-bg); color:var(--parchment-ink); border-radius:var(--radius-sm); padding:12px 14px}
.hoa-room-example .eyebrow{font-size:10.5px; letter-spacing:.16em; color:var(--parchment-rule)}
.hoa-room-example .q{font-family:var(--k3-serif); font-style:italic; font-size:15px; margin-top:4px; color:var(--parchment-ink)}
.hoa-fold-block details > summary{cursor:pointer; list-style:none}
.hoa-fold-block details > summary::-webkit-details-marker{display:none}
.hoa-fold-block details[open] > summary{margin-bottom:0}
.hoa-room-example .from{display:block; font-size:12.5px; color:var(--parchment-rule); margin-top:4px}
.hoa-cta-row{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}

/* Talk to a professional */
.hoa-cat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 28px; margin:10px 0 20px}
.hoa-cat{padding:14px 0; border-bottom:1px solid var(--border-cool)}
.hoa-cat:last-child{border-bottom:none}
.hoa-cat b{font-size:14.5px; display:block; margin-bottom:4px}
.hoa-cat span{font-size:13px; color:var(--text-muted)}
a.hoa-cat{display:block; text-decoration:none; color:inherit}
.hoa-cat-staffed span{color:var(--accent-live)}
.hoa-cat-soon{opacity:.7}
.hoa-how-booking{margin-top:6px}
@media(max-width:640px){.hoa-cat-grid{grid-template-columns:1fr}}

/* Gatherings */
.hoa-events-grid{display:flex; flex-direction:column; gap:10px; margin:14px 0}
.hoa-events-grid .hoa-ev{align-items:center}
.hoa-events-grid .locked{opacity:.7}

/* Shared month calendar (calendar.js) — operator ruling 2026-09-09: rendered from one events
   array on both index.html's Events panel and app.html's Events view, above the existing
   image-led event cards. Desktop: grid left (~60%) + the selected day's events right; mobile
   (<=900px, same breakpoint the events grid below already uses): stacked. */
.hoa-cal{display:grid; grid-template-columns:60% 1fr; gap:20px; margin:14px 0 22px}
@media(max-width:900px){.hoa-cal{grid-template-columns:1fr}}
.hoa-cal-grid-wrap{background:var(--surface-panel); border:1px solid var(--border-cool); border-radius:var(--radius-lg); padding:16px}
.hoa-cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.hoa-cal-title{font-size:16px; font-weight:800; letter-spacing:.04em}
.hoa-cal-nav{width:32px; height:32px; border-radius:8px; border:1px solid var(--border-cool-strong); display:grid; place-items:center; font-size:16px; color:var(--text-primary); flex:none}
.hoa-cal-nav:hover{background:rgba(120,150,220,.09)}
.hoa-cal-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px}
.hoa-cal-dow span{text-align:center; font-size:11px; color:var(--text-muted); letter-spacing:.08em; text-transform:uppercase}
.hoa-cal-days{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.hoa-cal-day{position:relative; aspect-ratio:1; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text-primary)}
.hoa-cal-day.blank{visibility:hidden}
.hoa-cal-day:not(.blank):hover{background:rgba(120,150,220,.09)}
.hoa-cal-day.today{box-shadow:inset 0 0 0 2px var(--accent-live)}
.hoa-cal-day.selected{background:var(--accent-primary-fill); color:var(--text-on-accent)}
.hoa-cal-day .dot{position:absolute; bottom:5px; width:5px; height:5px; border-radius:50%; background:var(--accent-primary)}
.hoa-cal-day.selected .dot{background:var(--text-on-accent)}
.hoa-cal-legend{display:flex; flex-wrap:wrap; gap:6px 16px; list-style:none; margin:0 0 10px; padding:0; font-size:12px; color:var(--text-muted)}
.hoa-cal-legend li{display:flex; align-items:center; gap:6px}
.hoa-cal-legend .swatch{width:10px; height:10px; border-radius:50%; background:#e5484d}
.hoa-cal-legend .type-workshop .swatch{background:#e85d9e}
.hoa-cal-legend .type-retreat .swatch{background:#f5c542}
.hoa-cal-day.has-event.type-event{background:rgba(229,72,77,.22)}
.hoa-cal-day.has-event.type-workshop{background:rgba(232,93,158,.22)}
.hoa-cal-day.has-event.type-retreat{background:rgba(245,197,66,.22)}
.hoa-cal-day.has-event.type-event .dot{background:#e5484d}
.hoa-cal-day.has-event.type-workshop .dot{background:#e85d9e}
.hoa-cal-day.has-event.type-retreat .dot{background:#f5c542}
.hoa-cal-day.has-event.selected{background:var(--accent-primary-fill); color:var(--text-on-accent)}
.hoa-cal-day.has-event.selected .dot{background:var(--text-on-accent)}
.hoa-cal-nav:disabled{opacity:.35; cursor:not-allowed}
.hoa-cal-nav:disabled:hover{background:none}
.hoa-cal-note{margin:12px 0 0; font-size:12px; color:var(--text-muted)}
.hoa-cal-list{background:var(--surface-panel); border:1px solid var(--border-cool); border-radius:var(--radius-lg); padding:16px}
.hoa-cal-list-title{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:10px}
.hoa-cal-list-item{display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--border-cool)}
.hoa-cal-list-item:first-child{border-top:none; padding-top:0}
.hoa-cal-list-date{background:var(--chip-date-bg); color:var(--chip-date-fg); border-radius:10px; padding:5px 10px; text-align:center; line-height:1.1; flex:none; height:fit-content}
.hoa-cal-list-date b{display:block; font-size:15px}
.hoa-cal-list-date span{font-size:9px; letter-spacing:.1em}
.hoa-cal-list-item b{font-size:14.5px; display:block; margin-bottom:4px}
.hoa-cal-list-item p{font-size:13px; color:var(--text-muted)}
.hoa-cal-empty{font-size:13px; color:var(--text-muted)}

/* Membership tiers */
.hoa-tier-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:14px 0}
.hoa-tier{border:1px solid var(--border-cool); border-radius:var(--radius-md); padding:18px; position:relative}
.hoa-tier.most{border-color:rgba(255,107,94,.5)}
.hoa-tier.most::before{content:"MOST CHOSEN"; position:absolute; top:-10px; right:14px; background:var(--accent-primary-fill); color:#fff; font-size:9px; letter-spacing:.1em; padding:3px 8px; border-radius:6px}
.hoa-tier h3{font-size:18px}
.hoa-tier .tier-sub{font-size:12.5px; color:var(--text-muted); margin-bottom:8px}
.hoa-tier .price{font-size:16.5px; font-weight:700; margin:8px 0; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.hoa-tier ul{list-style:none; margin:10px 0; display:flex; flex-direction:column; gap:5px}
.hoa-tier li{font-size:13.5px; color:var(--text-muted)}
@media(max-width:640px){.hoa-tier-grid{grid-template-columns:1fr}}

/* About */
.hoa-founders{display:flex; gap:16px; margin:14px 0; flex-wrap:wrap}
.hoa-founder{display:flex; align-items:center; gap:9px}
.hoa-founder .mark{position:relative; flex:none; width:56px; height:56px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--accent-community),var(--accent-live)); display:grid; place-items:center; font-weight:800; font-size:18px; color:#04121c}
.hoa-founder .mark img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hoa-founder .who b{display:block; font-size:14.5px}
.hoa-founder .who span{font-size:12px; color:var(--text-muted)}
.hoa-stats-row{display:flex; gap:14px; flex-wrap:wrap; margin:14px 0}
.hoa-stat{border:1px solid var(--border-cool); border-radius:var(--radius-sm); padding:12px 16px; min-width:100px}
.hoa-stat b{display:block; font-size:19px; color:var(--accent-live)}
.hoa-stat span{font-size:11.5px; color:var(--text-muted)}
.hoa-source{font-size:11.5px; color:var(--text-muted); margin-top:6px}
.hoa-single-line{font-size:14.5px; margin:6px 0}
.hint-link{color:var(--accent-live); text-decoration:underline; font-size:14.5px}

/* Get involved */
.hoa-gi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:10px}
.hoa-gi-grid .hoa-card b{display:block; margin-bottom:4px; font-size:15px}
.hoa-gi-grid .hoa-card p{font-size:13.5px; color:var(--text-muted); margin-bottom:10px}
@media(max-width:640px){.hoa-gi-grid{grid-template-columns:1fr}}

/* ============ Specialists — resource persons ============ */
.hoa-specialists-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:14px 0 20px}
.hoa-specialist b{display:block; font-size:16px; margin-bottom:4px}
.hoa-specialist .role{font-size:12.5px; color:var(--text-muted); margin-bottom:6px}
.hoa-specialist .expertise{font-size:12.5px; margin-bottom:6px}
.hoa-specialist .fee{font-size:12.5px; color:var(--accent-price); margin-bottom:4px}
.hoa-specialist .avail{font-size:12px; color:var(--text-muted); margin-bottom:10px}
.hoa-specialist .hoa-btn{width:100%; min-height:38px}
@media(max-width:900px){.hoa-specialists-grid{grid-template-columns:1fr}}
.hoa-rail .hoa-specialist b{font-size:14px}
.hoa-rail .hoa-specialist .role{font-size:11px; margin-bottom:4px}
.hoa-rail .hoa-specialist .expertise{font-size:11px; margin-bottom:8px}
.hoa-rail .hoa-specialist .hoa-btn{width:100%; margin-top:2px}

/* ============ Contact form (ruling 7 — local-only, no network call) ============ */
.hoa-contact-form{max-width:420px; margin-top:6px}
.hoa-contact-form input[type=text],.hoa-contact-form textarea{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border-cool-strong); background:var(--surface-panel-alt); color:var(--text-primary); font-size:16px; font-family:inherit}
.hoa-contact-form textarea{resize:vertical}

/* ============ /i/<slug> interest-capture page (§6) ============ */
.hoa-i-wrap{min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px; background:var(--surface-bg)}
.hoa-i-card{width:min(420px,100%); background:var(--surface-panel); border:1px solid var(--border-cool); border-radius:var(--radius-lg); padding:26px 24px}
.hoa-i-card .eyebrow{font-size:10px; letter-spacing:.18em; color:var(--accent-live); margin-bottom:6px}
.hoa-i-card h1{font-size:22px; margin-bottom:8px}
.hoa-i-card p.lead{color:var(--text-muted); font-size:14.5px; margin-bottom:18px}
.hoa-i-field{margin-bottom:12px}
.hoa-i-field label{display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:5px}
.hoa-i-field input[type=email],.hoa-i-field input[type=tel],.hoa-i-field select{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border-cool-strong); background:var(--surface-panel-alt); color:var(--text-primary); font-size:16px; min-height:44px}
.hoa-i-check{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--text-muted); margin-bottom:14px}
.hoa-i-check input{margin-top:3px}
.hoa-i-consent{font-size:12px; color:var(--text-muted); margin-bottom:16px; line-height:1.5}
.hoa-i-card .hoa-btn{width:100%; min-height:44px; text-align:center; display:flex; align-items:center; justify-content:center}
.hoa-i-confirm{display:none; text-align:center}
.hoa-i-confirm.show{display:block}
.hoa-i-confirm .tick{font-size:34px; margin-bottom:10px}
.hoa-i-retention{margin-top:20px; padding-top:16px; border-top:1px solid var(--border-cool); font-size:10.5px; color:var(--text-muted); line-height:1.6}
.hoa-i-back{display:inline-block; margin-top:16px; font-size:13px; color:var(--accent-live)}

/* ============ Revision 2 — cover bands (operator ruling 2, 2026-09-09 18:4x) ============
   Every menu-item panel / app view opens with this full-width band instead of a boxed card:
   a background-image slot (--cover, set inline per element) layered over a per-section CSS
   fallback gradient, a dark bottom-weighted scrim for legible text, and the eyebrow/title/intro
   pinned to the bottom-left — same rounded frame as the Shore scene. Cover images are not on
   disk yet (assets/covers/<slug>.jpg); the gradient alone carries the band until they land. */
.hoa-cover{position:relative; width:100%; height:300px; border-radius:var(--radius-lg); overflow:hidden; margin:8px 0 26px;
  background-image:var(--cover), linear-gradient(135deg,#16233d,#0a1226);
  background-size:cover,cover; background-position:center,center; background-repeat:no-repeat,no-repeat}
.hoa-cover::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,11,24,.08) 0%,rgba(6,11,24,.62) 62%,rgba(6,11,24,.92) 100%)}
.hoa-cover-in{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:28px 32px; max-width:620px}
.hoa-cover .eyebrow{display:block; font-size:11px; letter-spacing:.2em; color:var(--accent-live); margin-bottom:8px; font-weight:700}
.hoa-cover h1{font-size:30px; margin-bottom:8px; color:#fff}
.hoa-cover p{font-size:15px; color:rgba(255,255,255,.86); line-height:1.5}
@media(max-width:900px){
  .hoa-cover{height:180px; margin-bottom:18px}
  .hoa-cover-in{padding:18px 20px; max-width:100%}
  .hoa-cover h1{font-size:21px}
  .hoa-cover p{font-size:13px}
}
/* per-section fallback gradients — distinct hues so each band reads as its own place even
   before a real photo lands */
.hoa-cover[data-cover="how-it-works"]{background-image:var(--cover), linear-gradient(135deg,#1b2f4d,#0c1530)}
.hoa-cover[data-cover="find-your-people"]{background-image:var(--cover), linear-gradient(135deg,#2a1f45,#0c1530)}
.hoa-cover[data-cover="specialists"]{background-image:var(--cover), linear-gradient(135deg,#123a35,#0c1530)}
.hoa-cover[data-cover="gatherings"],.hoa-cover[data-cover="events"]{background-image:var(--cover), linear-gradient(135deg,#3a2013,#0c1530)}
.hoa-cover[data-cover="membership"]{background-image:var(--cover), linear-gradient(135deg,#402313,#0c1530)}
.hoa-cover[data-cover="about"]{background-image:var(--cover), linear-gradient(135deg,#1a2540,#0c1530)}
.hoa-cover[data-cover="get-involved"]{background-image:var(--cover), linear-gradient(135deg,#123626,#0c1530)}
.hoa-cover[data-cover="contact"]{background-image:var(--cover), linear-gradient(135deg,#241a3d,#0c1530)}
.hoa-cover[data-cover="dashboard"]{background-image:var(--cover), linear-gradient(135deg,#12283f,#0c1530)}
.hoa-cover[data-cover="shore"]{background-image:var(--cover), linear-gradient(135deg,#0c1f3a,#060b18)}
.hoa-cover[data-cover="meets"]{background-image:var(--cover), linear-gradient(135deg,#2a1f45,#0c1530)}
.hoa-cover[data-cover="chat"]{background-image:var(--cover), linear-gradient(135deg,#241a3d,#0c1530)}
.hoa-cover[data-cover="my-chapter"]{background-image:var(--cover), linear-gradient(135deg,#3d2f1a,#0c1530)}
.hoa-cover[data-cover="saved"]{background-image:var(--cover), linear-gradient(135deg,#1a2540,#0c1530)}
.hoa-cover[data-cover="notifications"]{background-image:var(--cover), linear-gradient(135deg,#123a35,#0c1530)}
.hoa-cover[data-cover="settings"]{background-image:var(--cover), linear-gradient(135deg,#22242e,#0c1530)}

/* ============ Revision 2 — image-led event cards (ruling 3) ============ */
.hoa-events-grid.image-led{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; flex-direction:unset}
@media(max-width:900px){.hoa-events-grid.image-led{grid-template-columns:1fr}}
.hoa-event-card{border-radius:var(--radius-lg); overflow:hidden; background:var(--surface-panel); border:1px solid var(--border-cool)}
.hoa-event-pic{position:relative; aspect-ratio:16/9;
  background-image:var(--cover), linear-gradient(135deg,#3a2013,#0c1530);
  background-size:cover,cover; background-position:center,center; background-repeat:no-repeat,no-repeat}
.hoa-event-pic[data-cover="sync"]{background-image:var(--cover), linear-gradient(135deg,#123a35,#0c1530)}
.hoa-event-pic[data-cover="finding-frequency"]{background-image:var(--cover), linear-gradient(135deg,#2a1f45,#0c1530)}
.hoa-event-date{position:absolute; top:10px; left:10px; background:var(--chip-date-bg); color:var(--chip-date-fg); border-radius:10px; padding:5px 10px; text-align:center; line-height:1.1}
.hoa-event-date b{display:block; font-size:15px}
.hoa-event-date span{font-size:9px; letter-spacing:.1em}
.hoa-event-body{padding:14px 16px}
.hoa-event-body b{font-size:16px; display:block; margin-bottom:4px}
.hoa-event-body p{font-size:13.5px; color:var(--text-muted); margin-bottom:12px}
/* rail compact row keeps its existing layout (ruling 3) but gains a small square thumbnail */
img.hoa-ev-thumb{width:36px; height:36px; border-radius:8px; flex:none; object-fit:cover; display:block}

/* ============ Revision 2 — specialist portraits (ruling 4) ============
   Portrait slot assets/specialists/<slug>.jpg; the <img>'s onerror hides itself and reveals a
   sibling initials span on a warm gradient — no email/phone/address anywhere. */
.hoa-specialist-portrait{width:76px; height:76px; border-radius:50%; overflow:hidden; margin-bottom:10px; position:relative}
.hoa-specialist-portrait img{width:100%; height:100%; object-fit:cover; display:block}
.hoa-specialist-initials{display:none; width:100%; height:100%; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent-community),var(--accent-price)); color:#20140a; font-weight:800; font-size:22px}
.hoa-specialist-head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.hoa-specialist-avatar{width:40px; height:40px; border-radius:50%; overflow:hidden; flex:none; position:relative}
.hoa-specialist-avatar img{width:100%; height:100%; object-fit:cover; display:block}
.hoa-specialist-initials-sm{display:none; width:100%; height:100%; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent-community),var(--accent-price)); color:#20140a; font-weight:800; font-size:13px}
.hoa-rail .hoa-specialist-head b{font-size:14px}


/* ============ Revision 2 fix — .hoa-rail independent scroll (operator follow-up #4) ============
   A rail taller than the viewport was growing the whole .hoa-app grid row past 100vh, so the
   OUTER page scrolled instead of .hoa-main's own internal scroll container — .hoa-topbar's
   sticky positioning is contained by .hoa-main, so it never engaged and scrolled off with the
   page. Capping .hoa-rail the same way .hoa-main already is restores independent per-column
   scrolling and keeps the topbar genuinely sticky at >=901px, on any page sharing this shell. */
@media(min-width:901px){
  .hoa-rail{
    max-height:100vh; max-height:100dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:var(--border-cool-strong) transparent;
  }
  .hoa-rail::-webkit-scrollbar{width:9px}
  .hoa-rail::-webkit-scrollbar-track{background:transparent}
  .hoa-rail::-webkit-scrollbar-thumb{background:var(--border-cool-strong); border-radius:6px}
}
/* revision 3 (operator): the fold blocks' buttons sat too close to their text.
   revision 7 (operator 2026-09-09): generalized to every panel CTA that follows a paragraph —
   20px above. The fold-block buttons still carried an inline style="margin-top:10px" that beat
   this class rule at 18px (inline always wins); those inline overrides are removed in index.html
   so this rule is what actually governs them now. */
.hoa-fold-block button, .hoa-fold-block .hoa-btn,
.hoa-panel p + button, .hoa-panel p + .hoa-btn, .hoa-panel p + .cta{margin-top:20px}

/* ============ Round 1 (card #3593) — n2 type scale (sizes only), n4 shorter covers, n5 crumb + where-next ============ */
.hoa-cover h1, .hoa-slide h1, .hoa-content h1{font-size:40px; line-height:1.15}
.hoa-content > h2, .hoa-content section > h2{font-size:28px}
.hoa-content > h3, .hoa-content section > h3{font-size:20px}
.hoa-content p, .hoa-content li{font-size:17px}
.hoa-cover{height:260px}
.hoa-crumb{display:flex; align-items:center; gap:12px; margin:0 0 14px; font-size:13px; color:var(--text-muted)}
.hoa-where-next{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:32px 0 8px}
.hoa-where-next .hint{margin:0 6px 0 0; color:var(--text-muted); font-size:13px}
@media(max-width:900px){
  .hoa-cover h1, .hoa-slide h1, .hoa-content h1{font-size:32px}
  .hoa-content > h2, .hoa-content section > h2{font-size:24px}
  .hoa-content > h3, .hoa-content section > h3{font-size:18px}
  .hoa-content p, .hoa-content li{font-size:16px}
  .hoa-cover{height:200px}
}

/* Shared page heading, breadcrumb and next steps. */
.hoa-page-hero{padding:clamp(24px,4vw,48px);border:1px solid var(--border-cool);border-radius:var(--radius-lg);background:var(--surface-panel);margin-bottom:16px}
.hoa-page-hero-eyebrow{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-live);margin-bottom:12px}
.hoa-page-hero h1{font-family:var(--k3-serif);font-size:clamp(29px,4vw,52px);line-height:1.13;max-width:760px}
.hoa-page-crumb{margin-top:20px;font-size:13px;color:var(--text-muted)}
.hoa-page-crumb a{text-decoration:underline;text-underline-offset:3px}
.hoa-page-next{margin-top:22px;padding:22px;border-top:1px solid var(--border-cool);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hoa-page-next .hint{width:100%;margin:0}
.hoa-referral-label{margin:0 0 18px;color:var(--accent-live)}
@media(max-width:600px){.hoa-page-hero{padding:24px 19px}.hoa-page-next .hoa-btn{flex:1;text-align:center}}

/* R2 one-header ruling: the breadcrumb sits under the page banner with breathing room. */
.hoa-cover + .hoa-page-crumb{display:block; margin:12px 0 18px}

/* R2 policy pages use the existing shell palette and cover. */
.hoa-policy{min-width:0}
.hoa-policy-lead{font-family:var(--k3-serif);font-size:clamp(19px,2vw,23px) !important;line-height:1.5;margin:0 0 22px}
.hoa-policy-section{padding:22px 0;border-top:1px solid var(--border-cool)}
.hoa-policy-section h2{font-size:24px;line-height:1.25;margin:0 0 12px}
.hoa-policy-section p + p{margin-top:10px}
.hoa-policy-section ul{padding-left:1.35em;display:grid;gap:10px}
.hoa-policy-section li{line-height:1.55;overflow-wrap:anywhere}
.hoa-policy-section a{color:var(--accent-live);text-decoration:underline;text-underline-offset:3px}
.hoa-policy-faq{padding:15px 0;border-top:1px solid var(--border-cool)}
.hoa-policy-faq:first-of-type{border-top:0}
.hoa-policy-faq summary{cursor:pointer;font-weight:700;font-size:17px}
.hoa-policy-faq p{padding-top:10px}
@media(max-width:600px){.hoa-policy-section h2{font-size:21px}.hoa-page-footer{gap:10px 16px}}

/* R2 lane B: policy pages use the page banner without a photo; a root default keeps var(--cover) defined (per-page inline --cover still wins). */
:root{--cover:none}

/* R2 A2 — contact/report form status */
.hoa-form-status{margin-top:12px;font-size:14px}
.hoa-form-status.ok{color:var(--accent-live)}
.hoa-form-status.err{color:#ff8a80}
.hoa-form-status a{color:inherit;text-decoration:underline}
.hoa-contact-form select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border-cool-strong);background:var(--surface-panel-alt);color:var(--text-primary);font-size:16px;min-height:44px}
.hoa-contact-form input[type=email]{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border-cool-strong);background:var(--surface-panel-alt);color:var(--text-primary);font-size:16px;min-height:44px}