/* ═══════════════════════════════════════════════════════════════
   The pro pages — /join-as-a-pro/ and /premium/ (4.77.0)

   Their own sheet, scoped under .pp, so the dark / light / tint
   bands, the type scale and the buttons here cannot collide with
   hrhs-core or the older marketing sheet the About and homeowner
   pages still use. Every class is pp-*.

   Pictures: the compositions (a photo with the product's own cards
   over it) ship as one WebP each with a transparent margin baked in;
   .pp-flat pulls that margin back out in the file's own proportion
   (--fp = 150 / 540) so each scales as a single picture. The demo
   section crossfades six slides in CSS alone.
═══════════════════════════════════════════════════════════════ */
.pp{font-family:Inter,-apple-system,'Segoe UI',sans-serif;color:#0A1A2F;font-size:16px;line-height:1.6;background:#F1F4F9;overflow-x:hidden}
.pp *{box-sizing:border-box}
.pp a{text-decoration:none;color:inherit}
.pp img{max-width:100%;display:block;height:auto}
.pp p{max-width:none}
/* the mega menu anchors into these pages; clear the sticky header */
.pp section[id]{scroll-margin-top:88px}
.pp-faqwrap{margin-top:26px;max-width:860px}
.pp-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* the trades band on Premium */
.pp-chips{display:flex;gap:8px;flex-wrap:wrap}
.pp-chips span{font-size:12.5px;font-weight:600;border:1px solid #E4EAF3;border-radius:99px;padding:6px 12px;color:#3D5069;background:#fff}
.pp-chips span.pp-on{background:#0A1A2F;color:#fff;border-color:#0A1A2F}
.pp-wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.pp-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:#0BFF84;margin-bottom:12px}
.pp-eyebrow--dk{color:#0A7A4B}
.pp-sec{padding:84px 0}
.pp-dark{background:#0A1A2F;color:#fff;position:relative;overflow:hidden}
.pp-dark .pp-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.pp-dark .pp-orb--1{width:520px;max-width:130vw;height:520px;background:#0BFF84;opacity:.14;top:-200px;right:-120px}
.pp-dark .pp-orb--2{width:420px;max-width:120vw;height:420px;background:#2C6CFF;opacity:.16;bottom:-220px;left:-100px}
.pp-dark .pp-wrap{position:relative;z-index:1}
.pp-light{background:#fff}
.pp-tint{background:#F1F4F9}
.pp h1{font-size:54px;line-height:1.05;letter-spacing:-.035em;margin:0 0 20px;font-weight:800}
.pp h2{font-size:38px;line-height:1.12;letter-spacing:-.03em;margin:0 0 14px;font-weight:800}
.pp h3{font-size:18px;margin:0 0 8px;font-weight:700;letter-spacing:-.015em}
.pp-lede{font-size:19px;line-height:1.55;color:#B9C6D8;max-width:58ch;margin:0 0 26px}
.pp-light .pp-lede,.pp-tint .pp-lede{color:#3D5069}
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 24px;border-radius:14px;font-weight:700;font-size:15.5px;border:1px solid transparent;white-space:nowrap}
.pp-btn--a{background:#0BFF84;color:#0A1A2F;box-shadow:0 8px 28px rgba(11,255,132,.35)}
.pp-btn--d,.pp a.pp-btn--d{background:#0A1A2F;color:#fff}
.pp-btn--w,.pp a.pp-btn--w{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22)}
.pp-btn--o{background:#fff;color:#0A1A2F;border-color:#E4EAF3}
.pp-btn--sm{height:42px;padding:0 16px;font-size:14px;border-radius:11px}
.pp-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pp-note{font-size:13px;color:#8FA3BE;margin:12px 0 0}
.pp-light .pp-note,.pp-tint .pp-note{color:#7488A1}
.pp-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:88px 28px 96px}
.pp-strip{display:flex;gap:26px;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:#B9C6D8}
.pp-strip b{display:block;font-size:26px;color:#fff;letter-spacing:-.03em;line-height:1.1}
/* a flattened composition: the transparent margin baked into the file is pulled back out with negative margins, in the file's own proportion, so it scales as one picture */
.pp-flat{--fp:27.78%;margin:calc(-1 * var(--fp));max-width:none !important}
.pp-flat img{width:100%;max-width:none}
/* found: three facts */
.pp-facts3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.pp-fact{background:#fff;border:1px solid #E4EAF3;border-radius:18px;padding:24px}
.pp-dark .pp-fact{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.pp-fact .pp-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#0A7A4B;margin-bottom:8px}
.pp-dark .pp-fact .pp-k{color:#0BFF84}
.pp-fact p{margin:0;font-size:14.5px;color:#3D5069;line-height:1.55}
.pp-dark .pp-fact p{color:#B9C6D8}
.pp-fact .pp-pill{display:inline-flex;gap:6px;align-items:center;margin-top:12px;font-size:12.5px;font-weight:700;border-radius:8px;padding:5px 10px;background:#F1F4F9;color:#0A1A2F}
.pp-dark .pp-fact .pp-pill{background:#fff}
/* the demo section */
.pp-demo{display:grid;grid-template-columns:1fr;gap:26px}
.pp-demo__hd{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end}
.pp-browser{display:block;border-radius:18px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);background:#0A1A2F;position:relative}
.pp-browser__bar{display:flex;gap:6px;align-items:center;padding:11px 16px;background:#132338;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;color:#8FA3BE}
.pp-browser__bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.pp-browser__bar span{margin-left:10px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;background:rgba(255,255,255,.06);border-radius:7px;padding:4px 10px}
.pp-browser__bar .pp-live{margin-left:auto;background:#0BFF84;color:#0A1A2F;font-weight:800;letter-spacing:.1em;font-size:10.5px;border-radius:99px;padding:4px 10px}
.pp-browser img{width:100%}
/* the demo pages, crossfading: the first is a still underneath; each of the other five fades in on top at its turn and drops out once the next has covered it; the last fades back to the first at the end of the 24s round */
.pp-slides{position:relative;aspect-ratio:1280/776;background:#0A1A2F}
.pp-slides img{position:absolute;inset:0;width:100%;height:100%}
.pp-slides img+img{opacity:0;animation:hrhs-slide 24s linear infinite}
.pp-slides img:nth-child(2){animation-delay:4s}.pp-slides img:nth-child(3){animation-delay:8s}.pp-slides img:nth-child(4){animation-delay:12s}.pp-slides img:nth-child(5){animation-delay:16s}.pp-slides img:nth-child(6){animation-delay:20s;animation-name:hrhs-slide-last}
@keyframes hrhs-slide{0%{opacity:0}3%{opacity:1}19.67%{opacity:1}19.7%{opacity:0}100%{opacity:0}}
@keyframes hrhs-slide-last{0%{opacity:0}3%{opacity:1}13.67%{opacity:1}16.67%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .pp-slides img+img{animation:none}
}
/* "everybody knows": the statement section */
.pp-knows{position:relative}
.pp-knows__l,.pp-knows__sub{max-width:980px}
.pp-knows__l{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:baseline;padding:22px 0;border-top:1px solid rgba(255,255,255,.14)}
.pp-knows__l:first-of-type{border-top:0;padding-top:6px}
.pp-knows__q{font-size:15px;font-weight:600;color:#8FA3BE;line-height:1.35}
.pp-knows__l b{font-size:40px;line-height:1.05;letter-spacing:-.035em;font-weight:800;color:#fff}
.pp-knows__l b em{font-style:normal;color:#0BFF84}
.pp-knows__l--us{border-top:2px solid #0BFF84;margin-top:8px;padding-top:30px}
.pp-knows__l--us .pp-knows__q{color:#fff}
.pp-knows__l--us b{font-size:50px;color:#0BFF84}
.pp-knows__sub{margin:30px 0 0;font-size:19px;line-height:1.55;color:#B9C6D8;max-width:62ch}
.pp-knows__sub b{color:#fff}
.pp-sell{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.pp-sell>div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px}
.pp-sell .pp-ic{width:38px;height:38px;border-radius:11px;background:#0BFF84;color:#0A1A2F;display:grid;place-items:center;font-weight:800;margin-bottom:12px}
.pp-sell b{display:block;font-size:17px;letter-spacing:-.015em;margin-bottom:6px}
.pp-sell p{margin:0;font-size:14px;color:#B9C6D8;line-height:1.55}
/* feature bands */
.pp-band{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;border-top:1px solid #E4EAF3}
.pp-band:first-of-type{border-top:0;padding-top:0}
.pp-band--flip .pp-band__img{order:-1}
.pp-band p{font-size:16.5px;color:#3D5069;line-height:1.6;margin:0 0 14px}
.pp-band ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:8px}
.pp-band li{display:flex;gap:10px;font-size:15px;color:#0A1A2F}
.pp-band li i{width:20px;height:20px;border-radius:50%;background:#E6F7EF;color:#0A7A4B;display:grid;place-items:center;font-style:normal;flex:0 0 auto;margin-top:2px}
.pp-band__img{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(10,26,47,.18);border:1px solid #E4EAF3}
.pp-band__img--dark{background:#0A1A2F;padding:0}
.pp-fig{font-size:12.5px;color:#7488A1;margin-top:10px}
/* tiles */
.pp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.pp-tile{background:#fff;border:1px solid #E4EAF3;border-radius:18px;padding:24px}
.pp-tile .pp-ic{width:40px;height:40px;border-radius:12px;background:#0A1A2F;color:#0BFF84;display:grid;place-items:center;font-weight:800;margin-bottom:14px;font-size:16px}
.pp-tile p{margin:0;font-size:14.5px;color:#3D5069;line-height:1.55}
/* steps */
.pp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.pp-step{background:#fff;border:1px solid #E4EAF3;border-radius:18px;padding:26px;position:relative}
.pp-step i{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#0BFF84;color:#0A1A2F;font-style:normal;font-weight:800;margin-bottom:14px}
.pp-step p{margin:0;font-size:14.5px;color:#3D5069;line-height:1.55}
.pp-step small{display:block;margin-top:10px;font-size:12.5px;color:#7488A1}
/* pricing */
.pp-price{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;align-items:start}
.pp-plan{background:#fff;border:1px solid #E4EAF3;border-radius:22px;padding:30px}
.pp-plan--hi{border:2px solid #0A1A2F;box-shadow:0 30px 70px rgba(10,26,47,.16);position:relative}
.pp-plan--hi::before{content:"Founding member rate";position:absolute;top:-13px;left:24px;background:#0BFF84;color:#0A1A2F;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:99px;padding:5px 12px}
.pp-plan h3{font-size:22px}
.pp-plan .pp-amt{font-size:44px;font-weight:800;letter-spacing:-.04em}
.pp-plan .pp-per{color:#7488A1;font-size:15px}
.pp-plan ul{list-style:none;margin:20px 0 22px;padding:0;display:grid;gap:12px}
.pp-plan li{display:flex;gap:10px;font-size:14.5px;line-height:1.45}
.pp-plan li i{width:20px;height:20px;border-radius:50%;background:#E6F7EF;color:#0A7A4B;display:grid;place-items:center;font-style:normal;flex:0 0 auto;margin-top:2px}
.pp-plan li span{color:#3D5069}
.pp-plan li strong{color:#0A1A2F}
.pp-plan .pp-btn{width:100%}
/* table */
.pp-tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 1px 0 #E4EAF3;font-size:14.5px;margin-top:30px}
.pp-tbl th,.pp-tbl td{padding:13px 18px;border-bottom:1px solid #EEF2F8;text-align:left}
.pp-tbl th{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#7488A1;background:#F7F9FC}
.pp-tbl th.pp-pro,.pp-tbl td.pp-pro{background:#F2FFF8;color:#0A1A2F;font-weight:600}
.pp-tbl tbody th{font-weight:600;text-transform:none;letter-spacing:0;font-size:14.5px;color:#0A1A2F;background:#fff}
/* lock bar */
.pp-lock{background:#E6F7EF;border:1px solid #BFE7D5;border-radius:16px;padding:18px 22px;font-size:15px;color:#0A1A2F;margin-top:26px}
.pp-lock b{color:#0A7A4B}
.pp-final{text-align:center;padding:96px 28px}
.pp-final h2{font-size:44px}
.pp-final .pp-lede{margin:0 auto 26px}
.pp-final .pp-acts{justify-content:center}
.pp-pricebig{display:flex;align-items:baseline;gap:6px;margin:8px 0 18px}
.pp-pricebig .pp-amt{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1}
.pp-pricebig .pp-per{font-size:18px;color:#B9C6D8}
.pp-hero--pro{grid-template-columns:1fr 1fr}
@media (max-width:820px){
  .pp-wrap{padding:0 18px}
  .pp h1{font-size:36px}.pp h2{font-size:28px}
  .pp-hero{grid-template-columns:1fr;gap:34px;padding:56px 18px 64px}
  .pp-strip{gap:16px;flex-wrap:wrap}
  .pp-strip b{font-size:22px}
  .pp-strip>div{flex:1 1 40%}
  .pp-facts3{grid-template-columns:1fr}
  .pp-tiles{grid-template-columns:1fr}
  .pp-steps{grid-template-columns:1fr}
  .pp-price{grid-template-columns:1fr}
  .pp-demo__hd{grid-template-columns:1fr;gap:22px}
  .pp-band{grid-template-columns:1fr;gap:22px}
  .pp-sell{grid-template-columns:1fr}
  .pp-knows__l{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .pp-knows__l b{font-size:28px}
  .pp-knows__l--us b{font-size:34px}
  .pp-knows__sub{font-size:16px}
  .pp-band--flip .pp-band__img{order:0}
  .pp-sec{padding:56px 0}
  .pp-btn{width:100%}
  .pp-final h2{font-size:32px}
}