@layer harner.pages {
.pubtop .in { gap: var(--space-5); }
.pubtop a.nav { font-size: var(--fs-md); padding: var(--space-2) 0; }
.pubtop a.nav[aria-current="page"] { font-weight: 550; }
.pubtop .btn.sm { margin-left: var(--space-1); }
@media (max-width: 520px) {
  .pubtop .in { gap: var(--space-3); padding-inline: var(--space-4); }
  .pubtop .svc { display: none; }
}
.gh { width: 16px; height: 16px; flex: none; fill: currentColor; }
.pub { max-width: 1060px; margin: 0 auto; padding: 0 20px 96px; }
.pub-hero { padding: 56px 0 36px; max-width: 44em; }
.pub-hero h1 { font-size: 40px; line-height: 1.06; letter-spacing: -.034em; text-wrap: balance; }
.pub-hero p { margin-top: var(--space-3); font-size: var(--fs-xl); line-height: var(--lh-body);
              color: var(--text-2); max-width: 38em; }
.pub-hero .status-badge { margin-bottom: var(--space-4); }
.pub h2.pub-h { font-size: var(--fs-2xl); letter-spacing: -.02em; margin: 56px 0 var(--space-4); }
.pub > h2.pub-h:first-of-type { margin-top: var(--space-6); }
@media (max-width: 520px) {
  .pub { padding: 0 var(--space-4) 72px; }
  .pub-hero { padding: 36px 0 24px; }
  .pub-hero h1 { font-size: 32px; }
  .pub-hero p { font-size: var(--fs-lg); }
}
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.price { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
         padding: var(--space-5); background: var(--surface);
         border: 1px solid var(--border); border-radius: var(--radius); }
.price .kicker { font-size: var(--fs-sm); color: var(--text-3); }
.price h3 { font-size: var(--fs-2xl); letter-spacing: -.02em; }
.price > p { font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--text-2); }
.price .rates { list-style: none; margin: auto 0 0; padding: var(--space-3) 0 0;
                border-top: 1px solid var(--border-soft);
                display: grid; gap: var(--space-2); font-size: var(--fs-md); color: var(--text-2); }
.price .rates b { color: var(--text); font-weight: 550; font-variant-numeric: tabular-nums; }
.price .rates .unit { display: block; margin-bottom: 2px; font-size: var(--fs-sm); color: var(--text-3); }
.price .rates .foot { font-size: var(--fs-sm); color: var(--text-3); }
.price-planned { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
                 margin-top: var(--space-4); padding: var(--space-4) var(--space-5);
                 border: 1px dashed var(--border-strong); border-radius: var(--radius);
                 color: var(--text-2); font-size: var(--fs-md); }
.price-planned b { color: var(--text); font-weight: 550; }
.price-planned[hidden], .price-note[hidden] { display: none; }
.price-note { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
              font-size: var(--fs-md); color: var(--text-2); }
@media (max-width: 900px) { .price-grid { grid-template-columns: minmax(0, 1fr); } }
.pub-faq { max-width: 760px; }
.pub-faq .fold { border-bottom: 1px solid var(--border); }
.pub-faq .fold:first-child { border-top: 1px solid var(--border); }
.pub-faq .fold summary { display: flex; align-items: center; gap: var(--space-3);
                         padding: 14px 0; font-size: var(--fs-base); font-weight: 550; }
.pub-faq .fold summary::after { content: "+"; margin-left: auto; color: var(--text-3);
                                font-weight: 400; font-size: var(--fs-xl); line-height: 1; }
.pub-faq .fold[open] summary::after { content: "–"; }
.pub-faq .fold > p { padding: 0 0 16px; color: var(--text-2); font-size: var(--fs-md);
                     line-height: var(--lh-body); max-width: 64ch; overflow-wrap: anywhere; }
.pub-faq .fold > p + p { margin-top: -6px; }
.pub-cta { margin-top: 64px; padding: 40px var(--space-5); text-align: center;
           border-top: 1px solid var(--border); }
.pub-cta h2 { font-size: var(--fs-3xl); letter-spacing: -.025em; }
.pub-cta p { margin: var(--space-2) auto 0; color: var(--text-2); max-width: 36em; }
.pub-cta .btn.primary { margin-top: var(--space-5); min-width: 260px; height: 44px;
                        justify-content: center; gap: var(--space-2); }
.pub-foot { margin-top: 48px; display: flex; gap: var(--space-5); flex-wrap: wrap;
            font-size: var(--fs-sm); color: var(--text-3); }
.pub-foot a { color: var(--text-3); }
.pub-foot a:hover { color: var(--text); }
body.public[data-page="help"] .help-lede h1 { text-wrap: balance; }
body[data-page="help"] .help-split > .side { background: none; border: 0; width: auto;
                                             overflow: visible; }
body[data-page="help"] .side .form-field { margin-top: var(--space-4); }
body[data-page="help"] .contact-form textarea { width: 100%; }
body[data-page="help"] .fold summary { font-weight: 550; }
body[data-page="help"] .fold summary::after { content: "+"; margin-left: auto; color: var(--text-3);
                                              font-weight: 400; font-size: var(--fs-xl); line-height: 1; }
body[data-page="help"] .fold[open] summary::after { content: "–"; }
body[data-page="help"] .fold summary { display: flex; align-items: center; gap: var(--space-3); }
body[data-page="help"] .fold .mute { max-width: 64ch; line-height: var(--lh-body); }
body[data-page="help"] .faq-group { margin: 28px 0 8px; font-size: var(--fs-sm); font-weight: 550;
                                    color: var(--text-3); }
body[data-page="help"] .faq-group:first-child { margin-top: 0; }
.invite-shell .lede-note { margin-top: var(--space-4); font-size: var(--fs-md); color: var(--text-2); }
.invite-shell .consent { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-3); }
.invite-shell .consent a { color: inherit; }
.invite-shell .btn.primary { gap: var(--space-2); }
.invite-shell #problem { margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
                         border-radius: var(--radius); background: var(--danger-bg);
                         color: var(--danger); font-size: var(--fs-md); line-height: var(--lh-snug); }
.invite-shell #problem[hidden] { display: none; }
.invite-shell .steps { margin: var(--space-6) 0 0; padding: 0; list-style: none;
                       display: grid; gap: var(--space-3); font-size: var(--fs-md);
                       color: var(--text-2); line-height: var(--lh-snug); }
.invite-shell .steps b { color: var(--text); font-weight: 550; }
.invite-shell .foot-links { margin-top: 40px; display: flex; gap: var(--space-5); flex-wrap: wrap;
                            font-size: var(--fs-sm); }
.invite-shell .foot-links a { color: var(--text-3); }
.invite-shell .foot-links a:hover { color: var(--text); }
body[data-page="waiting"], body[data-page="not-set-up"] { min-height: 100dvh; background: var(--bg); }
}