/* Oct 31 2026: "How it works" drop-down + phone menu */
.dd{position:relative;display:flex;align-items:center}
.dd-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;margin:0;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);cursor:pointer}
.dd-btn:hover,.dd.open .dd-btn{color:var(--brick)}
.dd-btn:focus-visible,.nav-toggle:focus-visible,.mnav-sub:focus-visible{outline:2px solid var(--brick);outline-offset:3px;border-radius:4px}
.chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.dd.open .chev,.dd:hover .chev{transform:translateY(1px) rotate(-135deg)}
.dd-menu{display:none;position:absolute;top:100%;left:-14px;z-index:30;min-width:230px;margin:0;padding:12px 0 0;list-style:none}
.dd-menu::before{content:"";display:block;position:absolute;inset:12px 0 0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(40,25,10,.14)}
.dd-menu li{position:relative;margin:0}
.dd-menu li:first-child{padding-top:6px}.dd-menu li:last-child{padding-bottom:6px}
.nav .dd-menu a{display:block;padding:10px 16px;font-size:.95rem;font-weight:600;white-space:nowrap}
.nav .dd-menu a:hover,.nav .dd-menu a:focus-visible{background:var(--tint,#f6efe2);color:var(--brick);outline:none}
.nav .dd-menu a[aria-current=page]{color:var(--brick)}
.dd:hover .dd-menu,.dd.open .dd-menu,html:not(.navjs) .dd:focus-within .dd-menu{display:block}
.nav-toggle{display:none}
.mnav{display:none}
@media (min-width:1241px){.nav a,.dd-btn{white-space:nowrap}}
@media (min-width:1241px) and (max-width:1440px){.nav{gap:14px}.nav a,.dd-btn{font-size:.9rem}}
@media (max-width:1240px){
 .nav a:not(.btn):not(.nav-demos){display:none}
 .nav a.nav-demos{display:inline-block}
 .dd{display:none}
 .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;padding:0;color:var(--ink)}
 .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .15s}
 .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
 .nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
 .nav-toggle[aria-expanded=true] span{background:transparent}
 .nav-toggle[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
 .nav-toggle[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
 .mnav{display:block;border-top:1px solid var(--line);background:#fff;max-height:calc(100vh - 64px);overflow-y:auto}
 .mnav[hidden]{display:none}
 .mnav ul{list-style:none;margin:0;padding:6px 0 12px}
 .mnav li{margin:0}
 .mnav a,.mnav-sub{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 4px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:1.05rem;font-weight:600;color:var(--ink);text-decoration:none;text-align:left;cursor:pointer}
 .mnav-sub[aria-expanded=true] .chev{transform:translateY(1px) rotate(-135deg)}
 .mnav ul ul{padding:0 0 4px 16px;border-left:3px solid var(--brick);margin:6px 0 6px 4px}
 .mnav ul ul a{font-size:1rem;padding:11px 4px}
 .mnav a[aria-current=page]{color:var(--brick)}
}
@media (max-width:420px){.brand>span{display:none}.nav-toggle{width:38px;height:38px}}