/* The public header's two menus: Product ▾ · Pricing · Resources ▾ (2026-10-08).
   Native <details> disclosures — keyboard and no-JS friendly; nav.js only
   closes the other menu, and closes on Escape or a click outside.
   v4 (2026-10-10, Michel's "Pamio Nav Redesign" mock): each menu is a
   full-width panel hanging from the header — labelled columns with an icon
   and a one-line outcome per page, a featured card (Product: Pam booking a
   lesson in four bubbles + both doors; Resources: the RSA-portal how-to), and
   a footer strip. The panel is absolute to .topnav (sticky counts as
   positioned), so .navmenu must stay static.
   Desktop only: on a phone the link row is hidden and nav.js builds the sheet. */
.navlinks { align-items: center; }
.navmenu { position: static; }
.navmenu > summary { list-style: none; cursor: pointer; color: var(--paper); font-size: 15px; font-weight: 500;
                     display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; position: relative; }
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                            transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.navmenu[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.navmenu > summary:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 4px; }
.navpanel { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: var(--card); color: var(--ink);
            border-bottom: 2px solid var(--ink); box-shadow: 0 18px 40px -20px rgba(26,23,19,.35); text-align: left; }
.navpanel-in { max-width: 1080px; margin: 0 auto; padding: 28px 24px 0; display: grid; gap: 32px; align-items: start; }
.navpanel-product .navpanel-in { grid-template-columns: 1fr 1.1fr 1fr; }
.navpanel-res .navpanel-in { grid-template-columns: 1fr 1fr .8fr 1.15fr; }
.navcol { min-width: 0; }
.navpanel .navgroup { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.navpanel a { color: var(--ink); text-decoration: none; }
.navpanel a[aria-current="page"] { color: var(--verm); }
.navitem { display: flex; gap: 12px; padding: 10px; margin: 0 -10px; border-radius: 12px; transition: background .15s; }
.navitem:hover, .navitem:focus-visible { background: var(--paper); outline: none; }
.navitem b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.navitem small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
.navitem:hover b { color: var(--verm-deep); }
.navic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1.5px solid var(--ink); }
.navic svg { width: 18px; height: 18px; }
.navic.o { background: #FCE3D9; } .navic.g { background: #D8EEDF; } .navic.b { background: #DCE4F7; } .navic.y { background: #FBEFC4; }
.navplain a { display: block; padding: 7px 0; font-weight: 500; font-size: 15px; }
.navplain a:hover { color: var(--verm-deep); }
.navfeat { display: flex; flex-direction: column; gap: 12px; background: var(--paper); border: 2px solid var(--ink); border-radius: 16px;
           padding: 16px; box-shadow: 5px 5px 0 var(--green); }
.navfeat.navy { box-shadow: 5px 5px 0 var(--blue); }
.navfeat-h { margin: 0; font-size: 22px; line-height: 1.15; text-wrap: balance; }
.navfeat-p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.navchat { background: #fff; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.35; }
.navchat span { max-width: 85%; padding: 6px 9px; border-radius: 10px; }
.navchat .in { background: #F1EEE8; align-self: flex-start; }
.navchat .out { background: #D9FDD3; align-self: flex-end; }
.navchat .bk { border: 1.5px solid var(--verm); background: #fff; align-self: flex-start; }
.navctas { display: flex; gap: 8px; flex-wrap: wrap; }
.navbtn { padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 13px; border: 1.5px solid var(--ink); }
.navbtn:hover { background: var(--card); }
.navbtn.pri { background: var(--verm); color: var(--paper); border-color: var(--verm); }
.navbtn.pri:hover { background: var(--verm-deep); border-color: var(--verm-deep); color: var(--paper); }
.navtag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
          background: var(--blue); color: var(--paper); padding: 3px 8px; border-radius: 6px; }
.navsteps { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.navmore { font-weight: 600; font-size: 13px; color: var(--verm-deep); }
a.navfeat:hover .navmore { text-decoration: underline; }
.navstrip { grid-column: 1 / -1; border-top: 1px solid var(--line); margin: 0 -24px; padding: 12px 24px; display: flex;
            justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.navstrip a { font-weight: 600; }
.navstrip a:hover { color: var(--verm-deep); }
.navchips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.navchips i { font-style: normal; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; background: #fff; color: var(--ink); }
@media (max-width: 900px) {
  .navpanel-product .navpanel-in, .navpanel-res .navpanel-in { grid-template-columns: 1fr 1fr; }
  .navfeat { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .navmenu[open] > .navpanel { animation: navdrop .18s ease-out; }
  @keyframes navdrop { from { opacity: .4; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .navmenu > summary::after { transition: none; } }

/* The phone menu (2026-10-08, v2 from Michel's mock): under 640px the header
   is the logo + one ☰ button (Sign in / Sign up move INTO the sheet — they
   collided with the logo on narrow phones). The sheet fills the viewport below
   the header: three big links (the audiences + Pricing), the features as
   chips, one collapsed "Guides & resources", and a footer that always ends in
   "Start free". nav.js builds it; without JS the header keeps Pricing · Sign in
   · Sign up and the footer carries everything. */
.navburger { display: none; }
@media (max-width: 640px) {
  .has-burger .nav a.navlink-phone, .has-burger .nav a.signin, .has-burger .nav a.register { display: none; }
  .navburger { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px;
               background: rgba(255,255,255,.14); color: var(--paper); cursor: pointer; }
  .navburger:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
  .navburger svg { display: block; }
  .navburger .x { display: none; }
  .navburger[aria-expanded="true"] .bars { display: none; }
  .navburger[aria-expanded="true"] .x { display: block; }
  html.navsheet-open, html.navsheet-open body { overflow: hidden; }
}
.navsheet { position: fixed; left: 0; right: 0; bottom: 0; top: var(--navsheet-top, 80px); z-index: 40;
            background: var(--paper); color: var(--ink); display: flex; flex-direction: column;
            overflow-y: auto; overscroll-behavior: contain; }
.navsheet[hidden] { display: none; }
.navsheet .ns-primary { padding: 8px 20px 4px; }
.navsheet .ns-primary a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0;
                          border-bottom: 1px solid var(--line); font-size: 21px; font-weight: 600; color: var(--ink); text-decoration: none; }
.navsheet .ns-primary a::after { content: "→"; font-size: 18px; color: var(--verm); }
.navsheet .ns-primary a[aria-current="page"] { color: var(--verm); }
.navsheet .ns-label { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
                      padding: 20px 20px 10px; margin: 0; }
.navsheet .ns-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px; }
.navsheet .ns-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px;
                        background: var(--card); border: 1px solid var(--line); font-size: 14.5px; font-weight: 500;
                        color: var(--ink); text-decoration: none; }
.navsheet .ns-chips a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.navsheet .ns-chips a[aria-current="page"] { border-color: var(--verm); color: var(--verm); }
.navsheet details { margin: 18px 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.navsheet summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 15px 0;
                    font-size: 16.5px; font-weight: 600; cursor: pointer; }
.navsheet summary::-webkit-details-marker { display: none; }
.navsheet summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
                           transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }
.navsheet details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.navsheet details > div { padding-bottom: 12px; }
.navsheet details a { display: block; padding: 9px 0; font-size: 15.5px; color: var(--ink); text-decoration: none; }
.navsheet details a[aria-current="page"] { color: var(--verm); }
.navsheet .ns-foot { margin-top: auto; position: sticky; bottom: 0; padding: 16px 20px calc(22px + env(safe-area-inset-bottom, 0px));
                     display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); background: var(--paper); }
.navsheet .ns-cta { display: block; text-align: center; background: var(--verm); color: #fff; font-weight: 600; font-size: 16.5px;
                    padding: 15px; border-radius: 14px; text-decoration: none; }
.navsheet .ns-signin { text-align: center; font-size: 15px; margin: 0; }
.navsheet .ns-signin a { color: var(--ink); font-weight: 600; }
.navsheet a:focus-visible, .navsheet summary:focus-visible { outline: 2px solid var(--verm); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .navsheet summary::after { transition: none; } }
@media (min-width: 641px) { .navsheet { display: none !important; } }